Horizontal button problem in ff- need a CSS god!

Firefox is not compatible with css rolover button

[jomoweb]

Hi,

I am designing a horizontal navigation with css rollover buttons. Everything is perfect in explorer. But in firefox, the button will not show the full background image, rather only enough to go around the text link.

[jomoweb]

Here is the code:

<style type="text/css">
<!--
#menu li {
list-style-type: none;
display: inline;
margin: 0px;
height: 30px;
width: 100px;
}

#menu a, #menu a:link {
background: url(images/buttons.gif);
background-repeat: no-repeat;
color: #FFFFFF;
font: bold 12px/22px tahoma, verdana, arial, sans-serif;
text-decoration: none;
height: 30px;
width: 100px;
}

#menu a:hover {
background: url(images/buttons.gif);
background-position: 0px -30px;
}

#menu a:active {
background: url(images/buttons.gif);
background-position: 0px -60px;
}
-->
</style>
<div id="menu" style="height: 30px;">
<nobr><li><a href="#">&nbsp;&nbsp;Home&nbsp;&nbsp;</a></li>
<li><a href="#">&nbsp;&nbsp;Registration&nbsp;&nbsp;</a></li>
<li><a href="#">&nbsp;&nbsp;Information&nbsp;&nbsp;</a></li>
</div><nobr>

[createErrorMsg]

First, IE will only display more of that image in the anchor if your page does not have a valid doctype (with a doctype, it handles this the same as FF). A good first step to take in both designing and debugging a CSS application is to add a full and valid doctype [w3.org] to the top of the page. This way you know that you only have to code for one set of rules in order to get uniform result sbetween themodern browsers (IE6, FF, Opera). Older browsers are another story, but a valid doctype is always a good plac to start.

Following that, the reason FF (and IE6 with a doctype) are not filling the LI with your link background is that the link, itself, is not filling the LI, either. Anchors are inline elements, which means that their height is determined exclusively by the height of their content. You cannot set a width or a height on an inline element.

IE without a doctype does not adhere to this standard and will apply your 30px height to the anchor. Compliant browsers will not.

To make compliant browsers apply the height setting to the anchor (and the width, for that matter), you have to set the anchor to display:block.

So, just to sum up, the two things you need to do are:
(a) add a full and valid doctype [w3.org] to the page.
(b) add display:block to the #menu a, #menu a:link style declaration.

cEM

[jomoweb]

cem,

Thank you for the help and very specific description of the problem I am having.

However, I already have tried to apply the

display: block;

property to the tag you specified, and it works great, but it turns my horizontal navigation into a vertical one which I have used on many other pages, but sometimes you just have to have a horizontal.

Any clues on the next step to turning it back horizontally?

Thanks,
jomoweb

[createErrorMsg]

Any clues on the next step to turning it back horizontally?

My apologies. Float the anchors to the left. Bear in mind before you do this that it is likely to cause other problems. You'll have to clear whatever element comes after the list, for one thing. For another, if you're attempting to center this menu, there will be some trickery involved to make that work properly. Also, remember that widths have to be really precise in order to keep floats behaving properly. The combined width of the floated, block level anchors cannot exceed the width of the container they are in or the floats will wrap and break the navbar.

Try it, play with it, and see what happens.

If you need some extra guidance, post back. If you're looking for further reading material on making horizontal nav systems work, check out Listamatic [css.maxdesign.com.au]. Like the Zen garden, it uses a single list to demonstrate all the various ways it could be styled. Very educational.

cEM

[jomoweb]

cEM,

Just checked out your web site and noticed you were are using the exact same nav bar I was trying to build.

In your code, I saw what was making yours work and mine not:

{float: left;}

I applied that to the li style group, and-- duhh... pounding my head on the desk.

Thanks so much. I also added a DOCTYPE to my page.

-Jomoweb