List Items never look the same in IE 5 please help!

[mumford1]

Hi

I have made up an unordered list using CSS. It looks fine in IE 6 and Netscape 7 but in IE 5 the text is about 10 px below the first bullet (image).

URL : http://www.omegadm.co.uk/lists/sub_nav.htm

Could someone look at my code and tell me where i am going wrong please!

HTML

<table width="172" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"><img src="images/nav_bottom2.gif" width="172" height="11" border="0" alt="la manga club spain"></td>
</tr>
<tr>
<td>
<ul>
<li><a href=".htm">dsds</a></li>
</ul>
</td>
<td background="images/sub_nav_right.jpg"><img src="images/spacer.gif" width="2" height="1" border="0" alt="la manga club spain"></td>
</tr>
<tr>
<td colspan="2"><img src="images/sub_nav_bottom.jpg" width="172" height="19" border="0" alt="la manga club spain" /></td>
</tr>
</table>

CSS

ul {
list-style-image: url(images/listitem.gif);
list-style-type:disc;
margin: 5px 20px 0 20px;
padding: 10px;
border: 0;
}
li {
font:bold 10px Verdana, Arial, Helvetica, Geneva, sans-serif;
margin-top:0;
margin-left: 0;
margin-bottom: 0;
padding: 0;
border: 0;
}
li a {
color: #0877AF;
text-decoration: none;
margin-top:0;
margin-left: 0;
margin-bottom: 0;
padding: 0;
}
li a:hover {
color: #7A0026;
margin-top:0;
margin-left: 0;
margin-bottom: 0;
padding: 0;
}

[Tygger2512]

Visit Listutorial for an excellent tutorial on customising lists of links using CSS. It should answer your problem.

Andy.

[mumford1]

Thanks, that really is a good resource