Style based rollover menu does not appear properly in FireFox 2

[jacksbackw]

I have been working with a menu where I am using styles to recreate a rollover/javascript looking menu. The background images are swapped via a:hover and the text for the buttons is overlayed.

When viewing the menu in IE it looks great but in FireFox it has extra padding between the buttons. The problem is that IE needs top padding to align the text properly in the button vertically. Not sure how to resolve the problem and was wondering if anyone here might have an idea.

Here is a link to the menu in action

http://webdesignnow.com/Open Files/menu.html

Here is the CSS code behind it.

http://webdesignnow.com/Open Files/turner101.css

Any help much appreciated.
Thanks

 

[BillyRayPreachersSon]

I've not tried it in IE, but it works in FF... Change this:

padding-top: .5em;

to this:

line-height: 28px;

Bear in mind that you might not want to use absolute font sizes, as if the user changes their font size, the text overlaps the "buttons".

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[Vragabond]

Your problem was that your <a> elements were bigger than your background. In IE quirks mode this will not show, because IE makes a blunder of the box model. However, Geckos will apply the correct model and then you have:

- background graphics of 163x27
- <a> element with (163px + 0.5em)x(27px + 0.5em)

Follow Dan's advice or reformat the padding to pixels and adjust the width and height. Add complete and valid doctype at the top to make IE like it as well. This works for me:

#menu a {
	display: block;
	width: 155px;
	height: 20px;
	background-repeat: no-repeat;
	background-image:url(menu_images/buttons_off.gif);
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
	white-space: pre;
}

#menu a:hover {
	background-image: url(menu_images/buttons_on.gif);
}

I also cleared up your repeated values in CSS that are not needed.

 

[jacksbackw]

This worked like a charm! I am still new to CSS so it has been a long and hard uphill battle. Thank you for your help and enhancing my understanding of how this works.