Background hover image works in IE but not FF

HTML & CSS
1

The hover state in the main navigation in the header menu - (About-The Academy-Adult Education and so on) works fine in IE but it gets chopped off in FF. Anyone see my error? Here’s the link

2

Add

#header .menu ul li a:hover span { display:block; float:left; background:url(images/menu_right.png) top right no-repeat; height:34px; }

to your CSS, I didn’t check it in IE as I edited the CSS with the Firefox developer tools.

3

Thank you tolra - that did it. One last thing - I tried to vertically align the text (you’ll see in FF it sits at the top of the background) but it did not work (it looks fine in IE).Any idea what would cause that?

Thanks again for the help.

4

You could add a padding-top to align it vertically within the background image.

5

Yep think in this case I’d just add top padding e.g.

#dropmenu .menu ul li a span span {padding-top: 9px; line-height:34px; padding-right:0 } }
6

I tried that but that also moves it down in IE. Is the only solution to split the difference or is there another way to have the text line up in the middle of the button in both browsers?

7

I had a play and if you comment out all your top-level menu CSS and try:


#header .menu { height: 34px; padding:0; list-style:none; z-index:9999; position:absolute; right: 15px; top: -50px;}	
#header .menu ul {list-style:none; padding:0; width:100%;}
#header .menu ul li {float: left; cursor: pointer; text-align:center; background:url(images/bg_menu.gif) top right no-repeat; }	
#header .menu ul li:last-child {background:none}	

#header .menu ul li a {
display:block;
color:#fff;
text-decoration:none;
text-transform:uppercase;
font-weight: bold;
font-size:13px;
padding-left: 16px;
word-spacing: 2px;
}
#header .menu ul li a span {
display: block;
padding-right: 16px;
}

#header .menu ul li a span span {
display: inline;
height: 34px;
line-height: 34px;
}

#header .menu ul li a:hover {
background: url(images/menu_left.png) top left no-repeat;
}

#header .menu ul li a:hover span {
background: url(images/menu_right.png) top right no-repeat;
background-color: #EDC951;
}

It should work height wise (not tested beyond live editing in Firefox) but for the right image you need to set what is currently transparent to the dark background colour to get the rounding to show.

If it works you just need to then put in the currently selected item CSS and the margin-top of the 2nd level menus becomes 0.

8

Thanks tolra. I’ll give a try