CSS menu breaks in IE 7 and 8

HTML & CSS
1

Hi there,

I’m new to Sitepoint. I have a question about a horizontal CSS menu I am creating (it uses the Superfish jquery plugin too).

<snip />

In Firefox, Safari, and Chrome, it parses beautifully. However, in IE 7 and 8, there seems to be a massive problem (and it looks like it has something to do with the submenus). Unfortunately, as I was developing the menu, I was only checking it in browsers like Firefox, Safari, and Chrome. During the development process, I wasn’t making sure it was parsing correctly in IE 7 and 8. So I am unaware at which point it “broke” in IE. Since I am not an IE bug expert, I am completely stumped.

Do you guys have any recommendations as to how to fix this? I’ve noticed that this forum is full of skilled and professional people, so I thought I’d ask here before I shoot myself. :lol:

Oh, IE…

2

Hi, I’m viewing in IE7/FF. What exactly seems to be the problem? Can you screenshot it?

3

Hmm… wait. This is really weird. It actually works in IE8. I could almost swear that, just yesterday, as I checked it in IE8, it totally died.

Weird. Ok… there’s still one problem in IE7 though. The submenus don’t “drop down” when you hover over the tabs. Any ideas as to why?

4

I have to go to work but perhaps it’s a sticky bug
li:hover{visibility:visible;}

If not then sorry, gotta run :slight_smile:

If that isn’t it … then don’t do display:none/block and visibility:hidden/visibie

Just hide it with a huge negative left margin and set it to 0 on hover (also set left:0)

5

Hi,

IE7 is giving a javascript error and it seems you have one too many commas.


<script type="text/javascript"> 
 
    $(document).ready(function(){
        $('ul#navlinks').superfish({ 
            hoverClass:  'hover',
            delay:       550,
            animation:   {opacity:'show',height:'show'},
            speed:       'fast',
            disableHI:   true,
            [B]autoArrows:  false[/B]
        });
    }); 
</script>

There should be no comma after the false on the last item as shown above.

That should allow IE7 to start working.:slight_smile:

You don’t seem to have added the pngfix correctly for IE6 either and the drop down isn’t working in IE6 but you never mentioned if you were supporting IE6 anyway.

6

Thanks guys. It did happen to be an error with the Javascript. In PHP, the extra comma in an array doesn’t make a difference. Didn’t know it did in Javascript.

IE 7 and 8 are good to go. I am dropping support for IE 6.

Also @Paul, I am aware of the pngfix issue. :slight_smile:

Thanks again, all! This place rocks!