Hi,

I'm trying to make a menu base on nested lists but I run in to some problems when viewing the menu in IE.

In Firefox everything works fine but IE adds an extra line break after the <a> element within the <li> elements. What am I doing wrong?


Here's the source(try it in browser to see what I mean):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//SV">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">

li {
font-family: Verdana;
list-style-type: none;
padding: 0px 0px 0px 0px;
border-color: #FFFFFF;
border-style: solid;
border-width: 1px 0px 0px 0px;
border-bottom-width: 0px;
color: #FFFFFF;
}
ul {
padding: 0px;
margin: 0px;
}
a {
text-decoration: none;
color: #FFFFFF;
display: block;
background-color: #993399;
}
/* Level 1 */
ul {
background-color: #6D6D6D;
}
ul li a{
font-size: 22px;
padding: 3px 10px 3px 8px;
}
/* Level 2 */
ul li ul {
background-color: #999999;
}
ul li ul li a{
font-size: 15px;
padding: 4px 10px 4px 18px;
}
/* Level 3 */
ul li ul li ul {
background-color: #999999;
}
ul li ul li ul li {
background-color: #339933;
}
ul li ul li ul li a{
font-size: 10px;
padding: 4px 10px 4px 30px;
}
</style>
<title>Three level menu (no javascript yet)</title>
</head>
<body>
<ul>
<li>
<a href="#">AAA</a>
<ul>
<li>
<a href="#">Aettan</a></li>
<li>
<a href="#">Atvåan</a></li>
<li>
<a href="#">Atrean</a></li>
</ul></li>
<li>
<a href="#">BBB</a></li>
<li>
<a href="#">CCC</a>
<ul>
<li>
<a href="#">Cettan</a></li>
<li>
<a href="#">Ctvåan</a>
<ul>
<li>
<a href="#">Cettan111</a></li>
<li>
<a href="#">Ctvåan222</a></li>
<li>
<a href="#">Ctrean333</a></li>
</ul></li>
<li>
<a href="#">Ctrean</a></li>
</ul></li>
</ul>
</body>
</html>