[css] layout errato in crossbrowser
sto lavorando su un nuovo layout e deve esserci qualcosa nel settaggio del css che manda in pallone tutto il resto.
testando con IE va perfettamente, con FF invece é come se i valori di width proprio non li riconoscesse e di conseguenza i vari blocchi che compongono il corpo e il piè di pagina se ne vanno per i fatti loro!!
altra cosa: é possibile secondo la dtd xhtml transitional settare un tag <hr /> in colore e allineamento?
no perchè sempre con ie, secondo i settaggi che gli ho dato, lo mette allineato a destra e colorato; mentre per ff non caga niente al di fuori del settaggio width a 50%; per opera invece va abastanza bene, solo il colore non cambia o_o
potete darmi una mano nel risolvere tale problema?? :=): denghiu!!
n.b. per tutti i paragoni e le info posto di seguito le 3 view sui 3 browser e di seguito ancora il codice.
IE visione
Firefox visione
Opera visione
Codice 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>
<title>index n.3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<style type="text/css">
<!--
html, body {margin: 0px; padding: 0px; text-align: left }
body { font: 100.01% "Trebuchet MS", Arial, sans-serif }
div#header
{
width: 80%;
height: 115px;
background-color: #9A9CAD;
background-image: url(include/med_Graphic_0138_sx.jpg);
background-repeat: no-repeat;
background-position: left
}
div#header h1 { margin: 0px 20px 0px 0px; line-height: 70px; text-align: right }
div#contenuti
{
width: 80%;
background-color: #9A9CAD;
background-image: url(include/med_Graphic_0138_sx.jpg);
background-repeat: repeat-y;
background-position: top left;
text-align: right;
padding: 2em 20px 1em 1em
}
div#footer
{
width: 80%;
background-color: #9A9CAD;
background-image: url(include/med_Graphic_0138_sx.jpg);
background-repeat: no-repeat;
background-position: left;
text-align: right;
padding: 1em 20px 1em 5px
}
div#menu { width: 80%; background-color: #9A9CAD; margin: 0px; padding: 0px }
div#mo1 { float: left; background-color: #99CCFF; border-bottom: 1px solid #787878; padding: 5px 20px 0px 20px; text-align: left; font-weight: bold }
div#mo1 ul { list-style-type: none; margin: 0px; padding: 0px; white-space: nowrap }
div#mo1 li { display: inline; margin: 0px; padding: 0px }
div#mo1 li a { text-decoration: none; border: 1px solid #787878; padding: 0px 0.3em; background: #ccc; color: #036 }
div#mo1 li a:hover { background-color: #f0f0f0 }
div#mo1 li#activelink a { border-bottom: 1px solid #fff; background-color: #fff; color: #603 }
div#mo2 { float: right; background-color: #9A9CAD; border-bottom: 1px solid #787878; padding: 5px 20px 5px 20px; text-align: left; }
div#mo2 ul { list-style-type: none; margin: 0px; padding: 0px; white-space: nowrap }
div#mo2 li { display: inline; margin: 0px; padding: 0px }
div#mo2 li a { text-decoration: none; border: 1px solid #787878; padding: 0px 0.3em; background: #ccc; color: #036 }
div#mo2 li a:hover { background-color: #f0f0f0 }
div#mo2 li#activelink a { border-bottom: 1px solid #fff; background-color: #fff; color: #603 }
#box { width: 80%; border-left: 5px solid #787878; background-color: #99CCFF; padding: 10px 1em 10px 1em; text-align: justify }
-->
</style>
</head>
<body>
<div id="header"><h1>NOME DEL SITO</h1></div>
<div id="menu">
<div id="mo1">
<ul>
<li id="activelink"><a href="#">Home</a></li>
<li><a href="#">Chi Siamo</a></li>
<li><a href="#">I Nostri Servizi</a></li>
<li><a href="#">Servizi Clienti</a></li>
</ul>
</div>
<div id="mo2">
<ul>
<li><a href="#"><img src="include/it.jpg" alt="italian version" style="vertical-align: middle; border: 0px; width: 27px; height: 18px" /></a></li>
<li><a href="#"><img src="include/uk.jpg" alt="english version" style="vertical-align: middle; border: 0px; width: 27px; height: 18px" /></a></li>
</ul>
</div>
</div>
<div id="contenuti">
<div id="box">
Benvenuti<br />
tutti i css sono scritti nell'head a parte lo stile per il tag HR che é scritti inline.<br />
<br />
nota: ho qualcosa che mi fa entrare in conflitto il div contenitore con il div del menu e i sotto div menù.<br />
devo capire cos'é!!
</div>
</div>
<div id="footer">
<hr style="width: 50%; text-align: right; padding-right: 20%; color: #787878" />
<cite>© 2000-2006 piè di pagina</cite>
</div>
</body>
</html>
