CSS Rollover Menu Problem - please help

Try removing the white space
<div id="navlist"><ul><li><a href="#">Home</a></li><li><a href="#">Page One</a></li><li><a href="#">Page Two</a></li><li><a href="#">Page Three</a></li><li><a href="#">Page Four</a></li><li><a href="#">Page Five</a></li></ul></div>

I tried that too and the space is still there. Any other ideas?

well I am looking at this in IE6 and Firbird and there is no difference.

Ummm just to make sure - try refreshing your browser. Wouldn't be the first time and won't be the last time I sometimes forget to do that.

Regards
Day

Hi,

You could solve this by giving the list items a negative bottom margin of 2px.
But there's a catch; you will lose the bottom border of the last item unless you set it's bottom margin to zero.

The best solution would however be to lose the list structure all together (you don't need it, so why keep it).

The following code give's you the same result with less code.

HTML-part:

<div id="navlist">
<a href="#">Home</a>
<a href="#">Page One</a>
<a href="#">Page Two</a>
<a href="#">Page Three</a>
<a href="#">Page Four</a>
<a href="#">Page Five</a>
</div>

CSS-part:

#navlist {
	position: absolute;
	left: 36px;
	top: 86px;
}

#navlist a {
   display: block;
   padding: 2px 2px 2px 24px;
   border: 1px solid #333;
   width: 160px;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   color: #EEE;
   text-decoration: none;
   background-color: #999;
   background-image:  url(l1_down.gif);
   margin: 0;
}

#navlist a:hover {
	border: 1px solid #333;
	background-color: #F60;
	background-image:  url(l1_over.gif);
	color: #333;
}

This should work in all browsers.

I hope this helps you out.

Greetings, Oscar.