In stanga am incercat sa ilustrez un element cu text centrat orizontal si rezultatul pe care vrem sa-l atingem citind acest post. Intr-o lume ideala in care standardele W3C guverneaza browserele, acest lucru se poate face foarte usor specificand ca elementul (sa zicem DIV) este o celula de tabel in care centrarea verticala este posibila nativ.

div { height: 40px; font-size: 12px; display: table-cell; vertical-align: middle; }

Cum Internet Explorer are propriile reguli, trebuie facut in asa fel incat si restul de 60% din populatia internetului sa vada corect si identic continutul. Solutia mea este urmatoarea:

div { height: 40px; font-size: 12px; padding-top: 14px; max-height: 26px; }

Pentru ca textul are o inaltime de 12 pixeli, stim ca distanta fata de border sus si jos este de cate 14 pixeli si prin padding vom distanta textul de limita superioara a elementului. Desi se vede bine pe Internet Explorer, Firefox va adauga padding-ul la inaltimea totala a elementului (din motive explicate in post-ul anterior), astfel incat div-ul va avea 54px inaltime. Solutia este atributul max-height care este recunoscut de toate browserele compatibile W3C si care va forta atributul height sa se mentina intr-o limita superioara de 26px. In Internet Explorer max-height este ignorat.

Si o reprezentare grafica a felului in care este interpretat CSS-ul (partea hasurata este padding-ul):

Lucrurile marunte dau un rezultat bun in ansamblu :)

Internet Explorer are modelu’ cutiutei diferit de restul browserelor pamantului, astfel tu trebuie sa faci lucrurile putin diferit pentru a ajunge la acelasi rezultat. In plus, nu te poti adresa unui singur browser, deci trebuie specifici reguli care sa functioneze identic atat in IE (standarde Microsoft) cat si in Firefox, Safari, Chrome, Opera etc (restul browserelor care functioneaza dupa standardele W3C).

Problema este ca Microsoft considera ca latimea unui element contine padding-ul si borderul (ceea acum 4 ani si mie mi se parea logic), dar asta contrazice standardul. Logic sau nelogic, standardul este cel ce incurajeaza progresul, face ca lumea sa fie mai buna si ca toate site-urile sa arate la fel indiferent ce browser preferi.

In alte cuvinte, daca tu specifici unui element sa aiba latimea de 900px si distanta interioara fata de continut de 10 pixeli pe fiecare latura, latimea totala va fi de 900px in IE si 920px in orice alt browser de pe planeta asta, iar asta da ceva batai de cap in unele cazuri.

Asta e un fel de introducere pentru niste articole pe care vroiam sa le scriu de mult timp pentru cei ce sunt la inceput cu CSS-ul.

Sa luam urmatorul caz: aveti un link cu un text-indent negativ, iar Firefox va afisa o linie punctata in jurul elementului. Puteti scapa de avea linie punctata folosind:

a { outline: none; }

Lucrurile sunt tratate mai in detaliu aici.

Jonathan Snook, web developer, isi ofera sfaturile in privinta CSS aici.