CSS Menu in Firefox

[Steve Zodiac]

Hi folks,

I have committed the heinous sin of creating a menu for an Actinic site using IE and then looking at it at the end in Firefox.
The upshot is that it looks like it should in IE and crap in Firefox, and I am tearing my hair out trying to get it to look right in Firefox (I don't care about IE so much as I can hack the CSS to make it work).
I have been messing around with padding, but this seems extra unpredictable.

The menu is tabbed and can be seen here

The styles that control it are on the attached text file

I know that Firefox is the one that is doing it correctly but it is being a right pain. :-)

[wjcampbe]

It looks the same in Opera as it does in Firefox. What happens if you use line-height in place of height in the css?

[jont]

Hmmm... been playing around and got it looking "better" for want of a better word in Firefox but just the spacing to sort ... keep staring but too late in the day to focus ... this is what I changed:

#mainnav {
font-family: Verdana, Helvetica, Arial, sans-serif;
width: 100%;
}

#mainnav ul {
width: auto;
height: 25px;
list-style: none;
}


#mainnav a {
background: url("acatalog/navbtn_up.gif") no-repeat top center;
padding: 2px 25px 0 25px;
text-align: center;
margin: 0px;
}


#mainnav li {
border: none;
float: left;
display: inline;
}

#mainnav ul li a:link {
font-weight: bold;
text-decoration: none;
color: #ffffff;
width: 78px;
}

#mainnav ul li a:visited {
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
background-image: url("actalog/navbtn_up.gif");
background-repeat: no-repeat;
width: 78px;
height: 25px;
text-align: center;
}

#mainnav ul li a:hover {
background-image: url("acatalog/navbtn_over.gif");
background-repeat: no-repeat;
text-decoration: none;}

#mainnav ul li a:active {
background-image: url("acatalog/navbtn_over.gif");
background-repeat: no-repeat;
text-decoration: none;}

.here {
background-image: url("acatalog/navbtn_over.gif");
background-repeat: no-repeat;
text-decoration: none;
font-size: 12px;
font-weight: bold;
color: #ffffff;
text-align: center;
width: 78px;
height: 25px;}

You should look at the path to the images which I needed to put in the "acatalog/" path and you should really use the "" around the image path.

Just a note that I have used the shorthand version for the background (in the #main nav a to do away with all the lines you had in there) and you also do not need the font, style statements in all the link | visited | hover | active states as these are inherited from the previous - unless you want them changing eg change of hover colour.

Attached is a screen grab of where I got to.

Hopefully someone else can see why the horizontal spacing is out

[wjcampbe]

Jont - 25px padding?

[jont]

Think that was to show the whole of the background image around the text otherwise it was collapsing to the size of the text

[wjcampbe]

And that was the minimum padding that did not see the collapse? Seems excessive when combined with the 78px width in the a:link.

[Steve Zodiac]

keep staring but too late in the day to focus

I know exactly what you mean! :-)
Many thanks, you have popinted me in the right direction I think, most grateful!

[jont]

Just checked an old site that I created using CSS tabs but that featured tabs that shrink and expand to fit the amount of text in the <li> ... that was done by having a large (horizontally large in width with rounded top right corner) image positioned top right in the <ul> selector and a small (small in width with just the top left hand corner and a small amount of horizontal top line) image in the <li> selector positioned top left... the larger image expands and shrinks to fit the size of the text and the small image stays put.