<< Înapoi

Eroare IE: margine dubla la "float"

publicat 2008-07-08 15:52:26 de gigi


Situatie des intalnita in activitatea unui tanar web designer: un div pe care il vom numi "floatbox" asezat in interiorul altui div mai mare, numit "container". Div-ului "floatbox" ii vom atribui "float: left", si pentru o pozitionare cat mai usoara si mai corecta, vom folosi "margin-left".

Iata ce avem pana acum:

 

.floatbox {
float: left;
width: 150px;
height: 150px;
margin-left: 100px;
}

Toate bune si frumoase, dar IE6, browserul de la MS (care inca este folosit de aproximativ 26% dintre utilizatorii internetului), are o cu totul alta parere despre cum ar trebui sa arate design-ul nostru. Si anume, in loc de cei 100 pixeli pe care ar trebui sa ii avem in stanga div-uliu "floatbox" vom avea 200 pixeli!?!? Da, este o eroare binecunoscuta de care orice tanar web designer s-a lovit de nenumarate ori. Marginea setata pentru "floatbox" in partea stanga apare dublata. Si pe cat de frustranta si de enervanta este problema aceasta, pe atat de simpla este si rezolvarea, si anume: "{display: inline;}" atat trebuie adaugat div-ului nostru "floatbox" pentru a fi pozitionat corect si in IE6.

Si iata cum ar trebuie sa arate:

.floatbox {
float: left;
width: 150px;
height: 150px;
margin-left: 100px;
display: inline;
}

Acum designul va arata in IE6, ca si in alte browsere normale folosite de utilizatori din toata lumea.
Spor la lucru in continuare!