4 replies [Last post]
tomhouy
Offline
Regular
Last seen: 6 years 11 weeks ago
Timezone: GMT-4
Joined: 2003-12-09
Posts: 11
Points: 0

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?

firstreflex
firstreflex's picture
Offline
Enthusiast
Brooklyn USA
Last seen: 12 years 38 weeks ago
Brooklyn USA
Timezone: GMT-5
Joined: 2003-10-21
Posts: 104
Points: 0

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>

tomhouy
Offline
Regular
Last seen: 6 years 11 weeks ago
Timezone: GMT-4
Joined: 2003-12-09
Posts: 11
Points: 0

CSS Rollover Menu Problem - please help

firstreflex wrote:
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?

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 1 week ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

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

The only way to learn is to do it yourself

Oscar van de Leur
Offline
newbie
Eindhoven, the Netherlands
Last seen: 15 years 50 weeks ago
Eindhoven, the Netherlands
Timezone: GMT+1
Joined: 2003-12-10
Posts: 1
Points: 0

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.