Newsgroup: it.comp.www.html
Titolo: Comportamento insolito

ciao a tutti,
ho un problema di compatibilit� con del codice.
In pratica con IE tutto funziona correttamente mentre con FF il menu
salt� fuori dall'ordine logico.
pi� precisamente il div menu � all'interno di un altro div se dico al
div menu di occupare il 100% dello spazio
disponibile in FF questo va oltre lo spazio e partendo dal div
contenitore va ad occupare tutti i 960px del body.
non riesco proprio a capire cos'� mi sfugge qualcosa...
grazie
harlan
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd
">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1">
<script>
function show(link,element) {
	for(var i=1;i<5;i++){
		if (i == element) document.getElementById('menu' + i).className "active";
		else 	document.getElementById('menu' + i).className = "noactive";
		}
	};
</script>
<style type="text/css">
	html,body{margin:0;padding:0}
	body{font:76% "Trebuchet MS",arial,sans-serif;color: #333;text-
align:center;padding: 10px}
	div#container{width:960px;height:720px;margin: 0 auto;text-align:
left}
	div#header{height:5%;background-color: #e7e7e7;padding:10px 0}
	div#center{margin-top:5px;margin-bottom:5px;height:93%;}
	div#footer{height:2%;padding-top:5px;text-align: center;font-size:
90%;background: #8395CB;color: #FFF}
	div#left{margin-right:5px;float:left;height:100%;width:17%;background-
color: #C0CDF2;}
	div#right{margin-left:5px;float:right;height:100%;width:
17%;background-color: #C0CDF2;}
	div#principal{height:100%;background-color: #C0CDF2;}
	div#menu{width:100%;overflow:auto;background: red;padding-top: 5px}
	ul#nav,ul#nav li{list-style-type:none;margin:0;padding:0}
	ul#nav{padding-left:15px}
	ul#nav li{float:left;width:80px;margin-right:2px;text-align: center}
	ul#nav a{float:left;width:80px;text-decoration:none;background:
#FFC;color: #999}
	ul#nav li.active a,ul#nav a:hover{color: #000}
	div#content{background-color: #C0CDF2;}
	div#statistic{background-color: #C0CDF2;}
</style>
</head>
<body>
<div id="container">
	<div id="header">
		header
	</div>
	<div id="center">
		<div id="left">
			left
		</div>
		<div id="right">
			right
		</div>
		<div id="principal">
			<div id="menu">
				 <ul id="nav">
			        <li id="menu1" class="active"><a href="javascript:show
('generale.html',1)">Generale</a></li>
			        <li id="menu2" class="noactive"><a href="javascript:show
('grafici.html',2)" >Grafici</a></li>
			        <li id="menu3" class="noactive"><a href="javascript:show
('allarmi.html',3)" >Allarmi</a></li>
			        <li id="menu4" class="noactive"><a href="javascript:show
('
http://192.168.2.97
',4)">Video</a></li>
			    </ul>
			</div>
			<div id="content">
			</div>
			<div id="statistic">
			</div>
		</div>
	</div>
	<div id="footer">
		footer
	</div>
</div> <!-- close container -->
</body>
</html>
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente

 non riesco proprio a capire cos'è mi sfugge qualcosa...
Usa firebug e ti accorgi (quasi) subito del problema. ;)
In particolare principal e` largo quanto tutto il container (960), ma ha 
left e right che sono float.
Menu e` largo come principal (quindi 960), ma viene spostato a destra da 
left (che e` float).
Metti un margin: 0 17%; a principal.
Bye.


 Newsgroup robomoderato - gli articoli vengono approvati automaticamente
grazie mille,
non mi ero proprio accorto.
E invece perch� sempre in FF ignora il margin-right e margin-left in
pratica le 2 colonne sono contigue al principal.
mentre in IE tutto � ok?
devo forse fissare fissare il margine del principal a 5px e 17%+5px?
grazie


 devo forse fissare fissare il margine del principal a 5px e 17%+5px?
Esatto. Ma non si puo` :) Dovresti calcolarlo a mano e metterlo in px.
Oppure togli il margin dalle due colonne laterali e metti il margin a 18% 
(o 19 o 20 o ...) invece che a 17 sul principal.


 (o 19 o 20 o ...) invece che a 17 sul principal.
immaginavo ho concluso mettendo il margin al 18% ora funziona.
grazie mille
