Costruendo un esempio di menù con rollover (solo CSS) verticale mi sono accorto che non riesco in alcun modo ad eliminare la spaziatura verticale tra i vari pulsanti solo in IE.

Zeldman suggerisce di aggirare questo bug di IE scrivendo il codice XHTML senza spaziature, ed io così ho fatto, ma senza risultato.

Eccovi il codice:


<!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" lang="en" xml:lang="en">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<head>
<title>menù con rollover verticale CSS</title>

<style type="text/css" media="all">




#nav {
padding:0px;
margin:0px;
border:0px;
}


ul {
font-family:verdana;
font-size:12px;
width:150px;
margin:0px;
padding:0px;
list-style-type:none;
}

li {
margin:0px;
padding:0px;
}



a {
display:block;
width:150px;
height:20px;
padding:0px 0px 0px 5px;
margin:0px;
line-height:20px;
}

a:link {
color:#666666;
text-decoration:none;
border:1px solid #666666;
}


a:visited {
color:#FFFFFF;
text-decoration:none;
background-color:#999999;
border:1px solid #666666;
}

a:hover {
color:#FFFFFF;
text-decoration:none;
background-color:#666666;
border:1px solid #666666;
}






</style>



</head>
<body>


<div id="nav"><ul>[*]home[*]chi siamo[*]servizi[*]news[*]faq[*]contatti[/list]</div>





</body>
</html>

sicuramente sbaglio qualcosa il fatto è che non capisco cosa.