Over tekstvelden, CSS en... FireFox 3.6

Geschreven door: Bart Geraerts

Over tekstvelden, CSS en... FireFor 3.6

Na de installatie van de nieuwste versie van FireFox merkte ik al snel dat bepaalde tekstvelden van websites er anders uitzagen. De tekst stond niet meer verticaal gecentreerd. Al snel bleek dat ik niet de enige was die deze verandering ontdekt had.

De verandering van de uitlijning na de upgrade naar 3.6 doet zich enkel voor wanneer het element een vaste hoogte heeft gekregen in combinatie met het ontbreken van padding aan de onderzijde. Ter illustratie volgende code:

input { height: 34px; padding: 15px 20px 0 20px; font-size: 15px; }

In bovenstaand voorbeeld is aangegeven dat het veld geen padding aan de onderzijde heeft. Dit werkte goed in vorige versies van FireFox. Echter in versie 3.6 zal de tekst niet meer verticaal gecentreerd staan door een verandering in de manier waarop FireFox de CSS interpreteert ten opzichte van zijn voorgangers. Gelukkig kan dit snel rechtgetrokken worden door de vaste hoogte weg te halen en de padding aan de onderzijde toe te voegen. Een oplossing is dus:

input { padding: 15px 20px; font-size: 15px; }

Heb je zelf een website waarbij je een tekstveld van stijl voorzien hebt? Controleer dan even of de tekst verticaal gecentreerd staat in FireFox 3.6 (als dit de bedoeling was toch). Het is meteen ook een best-practice: tekst verticaal centreren door zowel een padding vanboven en vanonder mee te geven, een handige tip voor iedereen.

2 Reacties op deze blogpost:

Sam Vloeberghs
Door Sam Vloeberghs op 19 februari 2010

Raar , het was mij nog niet opgevallen.. Maar ik geef dan ook nooit een vaste hoogte aan mijn inputvelden.

Tim Schoefs
Door Tim Schoefs op 28 februari 2010

Interessante post, ook ik was er niet van op de hoogte, ga er zeker rekening mee houden!

{* Remarketing tag *}