Who can fix this? Drop menu works in Safari and IE8 but not in Firefox 3.6 and IE7

Here’s the menu in question

The drop menu works as I want in Safari 5 and IE 8. However, there is a problem in Firefox 3.6 and IE7 (not bothered about IE6 at this point!).

In Firefox 3.6, when I hover over the drop menu it sends the next links to the right

I have the same problem in IE7 but the menu also appears behind the main content

Can anyone figure out why? I’ve done the usual stuff like inspect the elements in Firebug but can’t see what’s causing the issues.

Any pointers appreciated. This has been driving me nuts for hours!

Hi,
The problem seems to be that you are changing the a.nav2 to a float on :hover.

You have all other anchors set as blocks inside the floated list items here:


[COLOR=Blue]line 275[/COLOR]
[B].sf-menu li [/B]{ z-index: 999; text-transform: uppercase; [COLOR=Blue]float:left;[/COLOR] position:relative; text-indent: 20px; }
[COLOR=Blue]line 276[/COLOR]
[B].sf-menu a [/B]{ [COLOR=Blue]display:block;[/COLOR] position:relative; }

But in the a.nav2 rules you set the anchor as a block and then change it to a float on hover.

Scroll to the right -


[COLOR=Blue]line 239[/COLOR]
[B]ul li a.nav2[/B] {[COLOR=Red] /*display: block;*/[/COLOR] z-index: 1; padding: 0px; margin-left: 0px; margin-bottom: 25px; margin-right: 0; margin-top: 0px; background-repeat: no-repeat; width: 186px; height: 35px; background: 0 0; overflow:hidden; }
ul li a.nav2On { padding: 0px; z-index: 1; margin-left: 0; margin-bottom: 25px; margin-right: 0; margin-top: 0px; width: 186px; height: 35px; background: 0;  overflow:hidden; }
ul li.sfHover a.nav2,[B]ul li a.nav2:hover[/B] { padding-left: 0px; padding-bottom: 0px; padding-right: 0px; padding-top: 15px; [COLOR=Red]/*display: block; float: left;*/ [/COLOR]position: relative; z-index: 1; margin-left: 0px; margin-bottom: 0px; margin-right: 0px; margin-top: -15px; background-repeat: no-repeat; width: 186px; height: 25px; background:url(images/dropTopBg.png) 0 0px; }

If you will just remove those blocks/floats completely from a.nav2 and let line 276 keep them as display:block then it works for me in FF.

Looks like it’s time for you to learn shorthand CSS too. :wink:

The other IE7 problem is a z-index bug, you have several other elements after the nav that are positioned. IE6/7 incorrectly apply z-index: 0 to all positioned elements.

You need to manually set the z-index on the ULs’ parent for IE7


[B]#navigation[/B] {
    padding-top: 15px;
    padding-right: 10px;
    padding-left: 10px;
    background-repeat: no-repeat;
    background-image: url(images/navbarNormal.jpg);
    color: #656262;
    float: left;
    height: 29px;
   [COLOR=Blue] position: relative; [B]z-index:99;[/B][/COLOR]
    width: 960px;
    margin: 0 auto;
    }

Rayzur, you are a legend. That’s sorted it right out!

Yes, you are right about the shorthand :wink:

I’m admittedly a little lazy with writing CSS as I tend to write it all long-hand in Coda as it helps with dedugging (although obviously not in this instance :wink: ) and then convert it with a compressor when it’s all working and about to go live.

Anyway. thanks again. Sent you a PM so I can buy you a beer to say thanks.

Cheers - Ben