Newsgroup: it.comp.www.html
Titolo: Problema CSS con IE

Copio e incollo il codice
index.htm
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/stile.css">
</head>
<body>
<center>
<div id="contenitore">
<div id="menu">&nbsp;
<a href="
http://tidus84.dyns.cx
">Link</a>
</div>
<div id="main">&nbsp;
<a href="
http://tidus84.dyns.cx
">Link</a>
</div>
</div>
</center>
</body>
</html>
css/stile.css
#contenitore 	{margin: 0px; width: 600px; height: 100%;}
#main 	{padding: 5px; margin-top: 0px; background-color: #FFFFFF;
height: 100%; text-align: justify;}
#main a:link {color: #000000;}
#main a:visited {color: #000000;}
#main a:hover {color: #000000;}
#main a:active {color: #000000;}
#menu 	{float: left; width: 120px; height: 100%; margin: 0px;
margin-right: 0px; padding: 5px; background-color: #000000; text-align:
justify;}
#menu a:link {color: #FFFFFF;}
#menu a:visited {color: #FFFFFF;}
#menu a:hover {color: #FFFFFF;}
#menu a:active {color: #FFFFFF;}
body	{margin: 0px; background-color: #AAAAAA; font-family: Tahoma,
Verdana, Arial, Helvetica, sans-serif; font-size: 11px;}
 
a:link	{text-decoration: none;}	
a:visited	{text-decoration: none;}
a:hover	{text-decoration: underline;}
a:active	{text-decoration: underline;}
In pratica con Firefox si vede giusto, il div contenitore centrato in
mezzo alla pagina e senza spazi tra il div menu' e il div main...
Mentre con IE, appare sě centrato ma alto una riga, i due div non
occupano il 100% della pagina e con un piccolo spazio tra i div menu' e
main...
Come fare?
-- 
@Le aka TIDUS
-- 
Posted via Mailgate.ORG Server - 
http://www.Mailgate.ORG

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd
">
<html>
<head>
<style type="text/css">
html {
 height: 100%;
}
#contenitore {margin: auto;
 width: 600px;
  height: 100%;
  background-color: #ffffff;
    }
#main {padding: 5px;
 background-color: #FFFFFF;
height: 100%;
 text-align: justify;
}
#main a:link {color: #000000;}
#main a:visited {color: #000000;}
#main a:hover {color: #000000;}
#main a:active {color: #000000;}
#menu {float: left;
 width: 120px;
  height: 100%;
   margin: 0px;
 padding: 5px;
 background-color: #000000;
  text-align: justify;
  }
#menu a:link {color: #FFFFFF;}
#menu a:visited {color: #FFFFFF;}
#menu a:hover {color: #FFFFFF;}
#menu a:active {color: #FFFFFF;}
body { margin: 0px; padding: 0;
 background-color: #aaaaaa;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 text-align: center;
 height: 100%;
 }
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}
a:active {text-decoration: underline;}
</style>
</head>
<body>
<div id="contenitore">
<div id="menu">&nbsp;
<a href="
http://tidus84.dyns.cx
">Link</a>
</div>
<div id="main">&nbsp;
<a href="
http://tidus84.dyns.cx
">Link</a>
</div>
</div>
</body>
</html>
Per soluzioni più elaborate guardati i vecchi post... se non richiedi la
perfezione questa può andare. Testata su IE 5.x, 6.0, Firefox 0.8, Netscape
7.0, Opera 7.0.
Il problema di quello spazio credo proprio sia un bug di IE.....

 Il problema di quello spazio credo proprio sia un bug di IE.....
Uhm, non mi va, cioè, si vede come mi si vedeva prima...
Mozilla FireFox ok, div occupano 100% della pagina anche se vuoti, IE
no...
Ma il bello è che se non centro il div mi si vede ok...
MAH


Controlla nuovamente. Ho fatto i test su più pc e il codice che ti ho
postato funziona....

 Come fare?
A me con Opera 7.23 non risulta centrato ed è alto solo una riga; l'unica
cosa che và bene, è che non c'è quello spazio tra i 2 div.
Per risolvere in parte i tuoi problemi, ho fatto così:
-nel css body, aggiungi " text-align:center "
-nel css contenitore fai " margin: 0px auto; "
-nel html togli i tag " center"
Per lo spaziettino non ho trovato ancora come risolverlo.
Testato su IE 5,5 e Opera 7.23
Bye Cico

Per lo spaziettino non ho trovato ancora come risolverlo.
Probabile bug di IE, e' risaputo che non gestisce bene il "CSS1 box
model".
Non e' il massimo ma questo potrebbe funzionare, aggiungere nell'HTML:
<!--[if IE]>
<style type="text/css" media="screen">
#menu 	{
	margin-right:-2px;
}
</style>
<![endif]-->
Solo per IE imposta il margine a -2px. 
Nota: sul mio PC bastano 2 pixels, verificare che vadano bene per
tutti :-)
Oppure modificare ed aggiungere questo:
#menu 	{
	//... definizioni precedenti
	margin-right:-2px;
}
html>body #menu{
	margin-right:0px;
}
IE non e' ancora in grado di gestire i CSS2 selectors ("html>body
#menu...") e quindi il margine rimane definito a -2px, ma Mozilla,
Firefox e Opera reimpostano il margine a 0px.
'bye