Navigation list renders incorrectly in IE 5.0 [Archive]

richiebman

07-05-2004, 11:26 AM

Hello all,

Can anyone get this to render correctly in IE 5.0?

It is fine in Firefox, Opera, IE 6.0 & 5.5 and Netscape 6.0, but in IE 5.0 it puts a white space between each element.

Cheers,
R

<html>
<head>
<style type="text/css">
#link {
position:absolute;
left:13px;
top:10px;
width:118px;
font-family:arial, sans-serif;
font-size:8pt;
color:#031758;
}

#link ul {
margin:0;
padding:0;
border:0;
list-style:none;
}

#link li a {
display:block;
height:15px;
line-height:15px;
border:solid #B98246;
border-width:1px 1px 0px 1px;
background-color:#E3A869;
color:#0B206A;
text-decoration:none;
font-weight:bold;
text-align:center;
}

#link li a:hover {
background-color:#0B206A;
color:#FFFFFF;
}

#link li.ienav a {
border-bottom:1px solid #B98246;
}

#link li.ienav a:hover {
border-bottom:1px solid #B98246;
}
</style>
</head>
<body>
<div id="link">
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Prices">Prices</a></li>
<li><a href="#" title="Contact us">Contact us</a></li>
<li><a href="#" title="Directions">Directions</a></li>
<li><a href="#" title="Printable version">Printable version</a></li>
<li class="ienav"><a href="#" title="Links">Links</a></li>
</ul>
</div>
</body>
</html>

richiebman

07-05-2004, 11:47 AM

Abort, abort.

Many apologies, but I think I've sorted it. I've discovered

display:inline;

in one of the posts below.

I put it in #link ul li and put the width in #link li a, and it works. Woo hoo.

Sorry if I wasted anyones time.
R

David Harrison

07-05-2004, 12:38 PM

I think the real reason was that you still had the default margins on the li's, I think that the problem went away when you added display:inline; because inline elements can't have any margins, but don't quote me on that.