Enkele weken geleden lanceerde Mozilla een nieuwe versie van FireFox, ondertussen al versie 3.6. Deze bevat een aantal nieuwigheden waaronder de 'Personas', wat waarschijnlijk ook de opvallendste nieuwigheid is. Ook is er iets gewijzigd aan de manier waarop FireFox tekstvelden behandelt met CSS. Daardoor wordt op sommige tekstvelden de tekst niet meer mooi verticaal uitgelijnd.

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.