Tre div all'interno di un altro div - problema IE

eugene

Tre div all'interno di un altro div - problema IE

Buongiorno!

Ecco cosa abbiamo oggi:
un div "header" che contiene a sua volta tre div "left - center- right".
Il div "center" contiene un filmato flash.
Il problema è che, mentre con NN, FF e opera i tre div vengono posiszionati tutti alla stessa altezza (all'interno del div "header"), con IE il div centrale viene posizionato sotto i due laterali.
Eppure questo non dovrebbe accadere.
Ho provato a non includere il filmato flash in un div ma lasciarlo "libero" all'interno del div "header".
Ancora una volta, con i tre browser sopra menzionati nessun problema, mentre con IE il problema rimane invariato.

Ecco il codice html:

e quello css:

div#container{
width: 759px;
margin: 5px auto 0px;
background-color: #C0C1D6;
}

div#header{
height: 366px;
margin: 0px;
padding: 0px;
text-align: center;
}

div#headerLeft{
height: 366px;
width: 30px;
background-image: url(../images/head_left.gif);
float: left;
margin: 0px;
padding: 0px;
}

div#headerRight{
width: 39px;
height: 366px;
background-image: url(../images/head_right.gif);
float: right;
margin: 0px;
padding: 0px;
}

Ho attribuito vari valori al div "headerCenter" ma senza successo perchè mi sono reso conto che non cambia nulla.
O meglio, potrei dargli delle coordinate assolute ed a quel punto lo posizioni dove voglio, ma non capisco perchè così non debba funzione soprattutto perchè il problema è solo con IE. Cribbio!

Adesso ho anche fatto delle prove impostando i bordi a zero ed il risultato non cambia.

Per verificare l'ingombro dei div, ho asswgnato dei bordi colorati, e mi sono accorto che IE inserisce uno spazio di qualche pixel tra i tre div, a differenza degli altri browser che dispongono i div in maniera adiacente.

Ovviamente, una volta che specifico le dimensioni del div centrale (oppure inserisco un contenuto che ne occupa il 100%) quella manciata di pixel aggiunti da IE fa sballare tutto.
Stranamente non risesco ad eliminarli con i vari padding, margin e border.

Sapete niente?

Grazie.

claudioweb

A me così escono allineati...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
div#container&#123;
width&#58; 759px;
margin&#58; 5px auto 0px;
background-color&#58; #C0C1D6;
&#125;

div#header&#123;
height&#58; 366px;
margin&#58; 4px;
padding&#58; 0px;
text-align&#58; center;
&#125;

div#headerLeft&#123;
height&#58; 366px;
width&#58; 30px;
background-color&#58;#00CC00;
float&#58; left;
margin&#58; 0px;
padding&#58; 0px;
&#125;

div#headerRight&#123;
width&#58; 39px;
height&#58; 366px;
background-color&#58;#CC0000;
float&#58; right;
margin&#58; 0px;
padding&#58; 0px;
&#125; 

div#headerCenter&#123;
height&#58; 366px;
background-color&#58;#006699;
float&#58;none;
margin&#58; 0px;
padding&#58; 0px;
&#125; 
-->
</style>
</head>
<body>
<div id="container">
  <div id="header">
    <div id="headerLeft"></div>
    <div id="headerRight"></div>
    <div id="headerCenter"></div>
  </div>
</div>
</body>
</html>

Non so che dirti... Magari postami il link alla pagina.

Aggiunto: Ho verificato che aggiungendo contenuti il problema si presenta.
Io ti consiglierei di rivedere il codice con i consigli che trovi qui:

http://www.constile.org/template/layout_a_tre_colonne/

Ciao

nightmare

controlla anche che sia tutto codice validato.