Why is IE8 rendering superfish menu wrong?

Question

I am useing the superfish jquery plugin

If you view the superfish menu here: clicky

the drop-downs show correctly (above the main content) in Chrome, Firefox, Safari, IE6, IE7

But for some reason they fall behind the main content in IE8.

I already set the z-index for the superfish menu which IE7 wasnt working right until I did so, but it didn't fix IE8.

Am I missing something?

Answer 1

It works fine in IE8 when I remove the

overflow: hidden

in ie.css: #header_container #nav_container.

Why this works in IE7, I don't understand, though - it would mean 7 ignores the hidden.

Answer 2

You need to make sure your menu sizes are all matching, IE: the UL width needs to be all the same, mine is 14 so i made all the menus be 14 and that fixed the issue in ie.

Answer 3

The superfish FAQ points you to this blog page which fixes the problem by putting z-indexes onto the relative divs you are using e.g. #header and #content.