[Firefox] Border-box werkt niet op input

[4WardNL]

Beste mensen,

Bij het maken van een form waarmee mensen dingen kunnen inzenden, loop ik helaas tegen het volgende aan:

Op een text-input heb ik de volgende CSS toegepast:

Cascading Stylesheet:

#submit form input[type=text], #submit form input[type=email], #submit form textarea {
        padding: 10px 10px;
        margin: 8px 0;
        width: 100%;
        font-family: roboto, sans-serif;
        font-size: .8em;
        border-radius: 7px;
        border: solid 3px #83af9b;
        box-sizing: border-box;
        transition: border-color .3s;
        display: block;
        }

In Chrome (en ook in IE 10) ziet dit eruit zoals ik wil dat het eruit ziet, wat inhoudt dat de tekstboxen niet breder zijn dan de div eromheen en de tekst door de padding altijd 10px van de linker en rechter rand verwijderd is.
Nou is het in Firefox echter zo dat de padding ervoor zorgt dat de tekstboxen 20px te breed worden, wat niet zo hoort te zijn vanwege 'box-sizing: border-box'.

Ik heb al veel rondgezocht op internet, maar heb nog steeds geen oplossing hiervoor gevonden. Ik heb al geprobeerd 'width: 100%' aan te passen naar 'max-width: 550px', maar dan neemt hij geen breedte aan (de tekstbox is niet 550px breed).

Screenshot van hoe het eruit ziet (thumbnails zijn klikbaar):

Chrome


Firefox

Weet iemand hoe ik dit op kan lossen?

Alvast bedankt!

[NMe]

http://caniuse.com/css3-boxsizing

[4WardNL]

Ik was van plan het te proberen met -moz- ervoor, maar het is er uiteindelijk toch bij ingeschoten omdat ik dacht: Elke moderne browser ondersteunt dit inmiddels wel zonder -moz- of -webkit- etc. ervoor. Niet dus!
Het probleem is dus nu opgelost! Bedankt

[ Voor 4% gewijzigd door 4WardNL op 24-12-2013 23:38 ]

[NMe]

Het grappige is dat Firefox juist de enige is met volledige support (padding-box) maar in ruil daarvoor wél de vendorspecifieke toevoeging wil zien.

[Ramon]

Gebruik gewoon Compass, dan hoef je je geen zorgen meer te maken over vendor-prefixes.

[NMe]

Roepen dat iemand "gewoon" een framework moet gebruiken terwijl je niks van de eisen of specs weet vind ik nogal gewaagd. Ik vind SASS ook fijn spul maar voor de gemiddelde kleine website voegt het niks toe behalve overhead.

[4WardNL]

Ramon schreef op dinsdag 24 december 2013 @ 23:40:
Gebruik gewoon Compass, dan hoef je je geen zorgen meer te maken over vendor-prefixes.

Bedankt voor de tip! Ik zal dit binnenkort eens bekijken, want ik zie dat dit meer functies heeft dan puur ervoor zorgen dat je zelf geen vendor-prefixes hoeft toe te voegen.

Zo'n heel framework toevoegen puur voor het niet hoeven te gebruiken van vendor-prefixes vind ik namelijk vrij onnodig, aangezien dit voor zover ik weet de enige plek is waar ik zelf vendor-prefixes in m'n CSS heb staan.

NMe schreef op dinsdag 24 december 2013 @ 23:42:
Ik vind SASS ook fijn spul maar voor de gemiddelde kleine website voegt het niks toe behalve overhead.

Ook naar SASS zal ik binnenkort eens wat beter kijken. Wat ik tot nu toe ervan gezien heb ziet er erg handig uit! (Al heb ik het op zich niet echt nodig, want de website waar ik momenteel mee bezig ben is vrij klein en het voegt dus inderdaad vrij weinig toe .)

[ Voor 50% gewijzigd door 4WardNL op 24-12-2013 23:52 ]

[NMe]

quote: http://compass-style.org/

Compass uses Sass.

[_Thanatos_]

Mijn vuistregel is om *altijd* ook de -webkit- en -moz- prefixen te gebruiken, als die bestaan. Het kost nauwelijks extra tijd, en je neemt ook gelijk support mee voor oudere versies van die engines (denk aan mobiele apparaten, de standaardbrowsers daarvan worden bijna nooit geupdate - en mensen die updaten maar een nuisance vinden: die heb je echt).

Anyway, altijd de prefixen gebruiken. Bij een paar uitzonderingen moet je ook de -ms- prefix erbij trekken (bij de transform property bijv), en heeeel soms de -o- prefix.

Zoals gezegd, zie caniuse.com, zeker als je twijfelt

[NMe]

Juist mensen die niet op IE zitten updaten over het algemeen prima, al was het maar omdat Firefox en Chrome dat automatisch doen.

[_Thanatos_]

Ik heb bij Firefox meerdere malen gezien dat het updaten kapot gaat en de gebruiker geen reet aan de foutmelding heeft, waardoor-ie blijft steken op de op dat moment geinstalleerde versie. En bij webkit moet je ook denken aan Android en iOS, welke ook niet heel frequent updates krijgen, en heel goed nog een (oer)oude layout engine kunnen gebruiken.

[hiekikowan]

NMe schreef op dinsdag 24 december 2013 @ 23:39:
Het grappige is dat Firefox juist de enige is met volledige support (padding-box) maar in ruil daarvoor wél de vendorspecifieke toevoeging wil zien.

Dit is helemaal niet vreemd. Regel bij Mozilla is al heel lang dat de vendor-prefix pas niet meer nodig is vanaf het moment dat de specificatie voor een standaard final moet zijn. Zoals zij op MDN aangeven is dat bij CSS3's box-sizing nog niet het geval en is het daarom dat vendor-prefixes nog nodig zijn.

Het feit dat andere browsers box-sizing ondersteunen terwijl dit nog niet vaste specificaties betreft is veel vreemder, aangezien het haast een conventie is om browser-prefixes te gebruiken voor nog inet afgeronde specificaties...

[NMe]

bdalenoord schreef op woensdag 01 januari 2014 @ 15:10:
[...]


Dit is helemaal niet vreemd. Regel bij Mozilla is al heel lang dat de vendor-prefix pas niet meer nodig is vanaf het moment dat de specificatie voor een standaard final moet zijn. Zoals zij op MDN aangeven is dat bij CSS3's box-sizing nog niet het geval en is het daarom dat vendor-prefixes nog nodig zijn.

Het feit dat andere browsers box-sizing ondersteunen terwijl dit nog niet vaste specificaties betreft is veel vreemder, aangezien het haast een conventie is om browser-prefixes te gebruiken voor nog inet afgeronde specificaties...

Ik vind dat juist goed van alle andere browservendors. Het W3C is een veel te grote, veel te logge organisatie die alle beslissingen door tig commissies moet loodsen en bovendien allerlei vage eisen stelt aan zaken die een potentiële nieuwe standaard worden. De meest simpele wijzigingen kosten jaren, en dat slaat juist op het moderne web nergens op. Schaf in hemelsnaam die vendor prefixes af. De browsermakers onderling kunnen afspraken maken en daarmee leggen ze het W3C vanzelf die nieuwe standaard op. Dan beweegt er tenminste eens wat...

[MaffeMaarten]

Als je het wel zat bent om voor elke browser prefixes toe te voegen, maar nog niet toe bent aan een framework als sass met compass (bijv. geen controle over ontwikkelomgevind). Dan kan je ook nog kijken naar -prefix-free.

Dit is een klein .js-bestandje dat je kan toevoegen aan je website. Deze zal je css bekijken en overal waar dat nodig is de prefix toevoegen van de browser waar hij in gedraaid wordt.

[_Thanatos_]

MaffeMaarten schreef op donderdag 02 januari 2014 @ 13:48:
Als je het wel zat bent om voor elke browser prefixes toe te voegen, maar nog niet toe bent aan een framework als sass met compass (bijv. geen controle over ontwikkelomgevind). Dan kan je ook nog kijken naar -prefix-free.

Dit is een klein .js-bestandje dat je kan toevoegen aan je website. Deze zal je css bekijken en overal waar dat nodig is de prefix toevoegen van de browser waar hij in gedraaid wordt.

Die zal weer last hebben van de FOUC, en erger nog - als je css van een static content subdomein of CDN wordt geserveerd, gaat het script er niet bij kunnen komen.

[gitaarwerk]

Voor kleinere projecten zou je ook nog Yeoman kunnen pakken. Zit alles in. Moet je wel zin hebben alles eerst op te trekken enzo

Vendor prefixen is een hel soms. Zeker inderdaad waarbij wanneer je denkt dat een browser dat wel ondersteund native, maar toch dus uiteindelijk niet . Sass is inderdaad er wel erg fijn voor. Maar voor kleine projecten toch wat too much ja.