Salve a tutti.
Costruendo il mio sito ho notato un conflitto tra il tag <ul> e la proprietà float: in pratica, gli item della lista risultano disallineati proprio nel punto in cui in linea d'aria finisce il menù di navigazione. Gli item sono allineati perfettamente con Firefox, mentre con IE6 risultano disallineati
Ecco il sorgente della pagina
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Conflitto tra <ul> e float su IE</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.0">
<style type="text/css">
@import url("Style.css");
a#viewcss{color: #00f;font-weight: bold}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>SConflitto tra <ul> e float su IE</h1>
</div>
<div id="navigation">
<ul>[*]Home[*]Download[*]Plug-in[*]Chat[*]Link[*]Contatti[/list]
</div>
<div id="content">
<h2>Versione 2.05</h2>
<h3>[28-09-2007]</h3>
*** Aggiustamenti e cambiamenti:</p>
<div>
- Item n° 1
- Item n° 2
- Item n° 3
- Item n° 4
- Item n° 5
- Item n° 6 - Da qua inizia a spostarsi
- Item n° 7
</div>
</div>
<div id="footer">« Copyright © 2004-2007 Rand0m. Tutti i diritti riservati - Sponsored by IRC-Zone.org»
</div>
</div>
</body>
</html>
E il suo CSS
Codice PHP:
html,body{margin-top: 0px;margin-left: 0px;background-color:#000;color: #fff;height: 100%}
body{font-family: arial,sans-serif;font-size: 76%;text-align: center;}
div#container{
margin: 0 auto;
text-align: left;
}
div#header{background-color:#36C;color: #ff0;width: 760px;}
h1,h2{margin: 0;padding:0}
h1{padding-left:0em;font: bold 2.3em/80px arial,serif}
h2{color: #999;font-size: 1.5em}
h3{color: #999;font-size: 1.2em}
div#footer{text-align:center;padding: 0.5em;
background-color: #69c; color: #000}
div#footer a{color: #fff;font-weight: bold;text-decoration: underline}
div#navigation {
float: left;
width : 100px;
background : #5179a4;
font : 11px Arial, Helvetica, sans-serif;
}
div#navigation ul, div#navigation li {
margin : 0;
padding : 0;
list-style-type : none;
}
div#navigation li {
margin : 0 0 1px;
}
div#navigation a {
display : block;
padding-left : 19px;
height : 31px;
line-height : 31px;
background-color : #0d4b72;
color : #fff;
text-decoration : none;
}
div#navigation a:hover {
color : #ffffff;
background-color : #ff0000;
text-decoration: underline;
}
div#content{padding: 1em;margin-left: 150px;padding-top: 15px;min-height: 100%;}
Sapreste dirmi la soluzione a questo problema?
Grazie