I was following a tutorial and created the following page...
http://www.tomhouy.com/index.htm
In IE6, there is a 2px margin bewteen the button despite the fact I have it set at 0. It shows up properly (no space between buttons) in Mozilla Firebird.
Can anyone clue me in on what is causing this?
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>
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?
CSS Rollover Menu Problem - please help
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
CSS Rollover Menu Problem - please help
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.