problemi con margin, padding e IE

gc

problemi con margin, padding e IE

Ciao, sto realizzando un semplice layout in css per un sito
Sono riuscito ad ottenere un layout quasi identico su Firefox 1.5, Opera 9, IE5, IE5.5, IE6 e IE7
non riesco solo a risolvere un problema di margini tra il DIV "corpo" e il DIV "menu": IE6 e precedenti visualizzano 4px di margine tra questi 2 DIV, tutti gli altri browser invece ne visualizzano 0.
Come posso eliminare questi 4px da IE?
(Il codice è a fine messaggio)

Grazie

Giuseppe

CSS:

body, html {margin:0; width:100%; height:100%; text-align:center; vertical-align:middle; background:#B58F76;}

div#container2 {
width:864px;
height:564px;
position:absolute;
top:50%;
left:50%;
margin-left:-432px;
margin-top: -282px;
color:#fff;
padding:0;
background:#8a9;
background:url(img/sfondo_pag.gif) no-repeat 0 0;
background-color:#ECE3D8;
}

div#titolo {text-align:left; margin-left:162px; margin-top:13px; }

div#corpo {height:391px; margin-top:5px;}

div#menu {height:27px; margin-left:7px; margin-right:7px; margin-top:0; padding:-3PX; border:0; background-color:#000099; }

div#footer {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:11pt;
color:#41332A;
margin-top:10px;
}

div#footer a {color:#7D584E; text-decoration:none;}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link href="stili.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container2">
<div id="titolo"><img src="" /></div>
<div id="corpo"><img src="" width="850" height="391" /></div>
<div id="menu">ITALIANO ENGLISH</div>
<div id="footer"></div>
</div>
</body>
</html>

sten

io ho risolto impostando margin-top= -4px per div#menu; forse gli altri browser lo "digeriscono" perchè non hai impostato il posizionamento assoluto. Anche se come soluzione non è il massimo

sten

Aspetta un momento! ho tolto le proprietà height e width da img e lo spazio di 4 px è sparito su IE6. Prova a vedere....
<div id="corpo"><img src="" /></div>

problemi con margin, padding e IE

CSS:

div#footer a {color:#7D584E; text-decoration:none;}

HTML:

<body> <div id="container2"> <div id="titolo"><img src="" /></div> <div id="corpo"><img src="" width="850" height="391" /></div> <div id="menu">ITALIANO ENGLISH</div> <div id="footer"></div> </div> </body> </html>

<body>
<div id="container2">
<div id="titolo"><img src="" /></div>
<div id="corpo"><img src="" width="850" height="391" /></div>
<div id="menu">ITALIANO ENGLISH</div>
<div id="footer"></div>
</div>
</body>
</html>