Monday, July 28, 2008

CSS: Cum centrez continutul in IE6

Un nou început de săptămână, o nouă problemă, o nouă soluție. De o bună bucată de vreme obișnuiesc să testez fiecare proiect pentru Web la care lucrez pe Firefox, IE7 și uneori în Safari. Cum încă mă încăpățânez să folosesc Vista (licența Business, mulțumită MSDNAA), nu cunosc o modalitate de a instala IE6, așa că (încerc să) uit că se mai folosește și această versiune. ...Până când am deschis un site pe PC-ul unei colege! Da, prima observație a fost că era totul "aliniat" la stanga... de restul nu mai zic, măcar nu acum!

O soluție elegantă și frumos explicată am găsit-o pe blogul lui Andy Budd:

          body {
text-align: center;
min-width: 600px;
}

#wrapper {
margin:0 auto;
width:600px;
text-align: left;
}

Eu obișnuiam să centrez un div doar declarând margin:0 auto;. Din păcate, IE6 nu interpretează cum era de așteptat. Din fericire, el interpretează prost si declarația text-align:center care, aplicată pe elementul body, în IE6 centrează și div-ul nostru. Totuși, acum avem centrat și textul din body, în toate celelalte browsere. Pentru asta, declarăm text-align:left; pentru div-ul pe care îl centrăm. Astfel neutralizăm efectele secundare din IE. Dacă în Mozilla reducem fereastra, jumătate din div-ul centrat atârna la stânga paginii. Pentru a repara și această ultimă problemă, declarăm min-width pe body.

2 comments:

adi said...

nu cred ca e nevoie de declaratiile alea pentru body. eu nu le folosesc si tot ce testez in ie6 e centrat. e important sa ai width si margin auto pe div-ul care e container...

pe langa asta... pentru xp exista stand-alone si de ie7 si de ie6. pentru vista nu stiu, dar google sigur stie :)

Marius said...

Hmm... am sa vad sa il mai rafinez atunci... Merci de idee!

Cat pt XP, asa-i...