Differenze IE/Firefox

**raulz79** · 13-05-2008, 16:15

Salve a tutti,

vi spiego un problema grosso che ho con IE quando rendo float alcuni elementi di pagina, la situazione è questa:

In HTML ho:

Codice PHP:


<div id="box1">Box 1</div><div id="box2">Box2</div>

<div id="box3">Box 3</div><div id="box4">Box 4</div>

mentre il CSS è questo:

Codice PHP:


#box1 { float: left; } #box2 { float: left; }

#box3 { clear: left; float: left;} #box4 { float: left; }

Il problema è che su Firefox i quattro box vengono visualizzati correttamente cioè box1 e box2 sono affiancati sulla prima riga mentre box3 e box4 affiancati sotto, sulla seconda riga.

In IE invece questo non succede, cioè il box4 va ad affiancarsi al box2 lasciando da solo il box3 sulla seconda riga. Ho notato che questo comportamento avviene se c'è spazio accanto al box2, se invece il box2 ha un margine destro che arriva al limite destro del contenitore il box4 si allinea regolarmente al box3 anche su ie, ma non posso dare margine al box2.

Perchè succede questo? E' un bug di explorer o sbaglio qualcosa io?

Il doctype della pagina HTML è il seguente:

Codice PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<!--"http://www.w3.org/TR/html4/loose.dtd">

Grazie.

**noize86** · 13-05-2008, 17:43

così dovrebbe funzionare:

Codice PHP:


<style>

.inbox { float:left; clear:left; width:100px}

#box1, #box2, #box3, #box4 { float: left; width:50% }

</style>



<div class="inbox">

<div id="box1">Box 1</div><div id="box2">Box2</div>

</div>

<div class="inbox">

<div id="box3">Box 3</div><div id="box4">Box 4</div>

</div>

in pratica fai ricorso ad un'altra div..

ps

vviamente nella classe inbox ho messo un width generico..

Discussione: Differenze IE/Firefox

Strumenti discussione

Ricerca discussione

Visualizza

Differenze IE/Firefox

Permessi di invio