Nav Styling in IE8 - hover issue

Hi all,

I’m just finishing off a WordPress site and it’s all gone pretty well but need to do a quick fix on the top navigation for IE8. As a mac user, I’m having trouble identifying and fixing it. I’m downloading Parallels at the moment but could do with any advice in the meantime.

The site is - Welcome to the Birmingham Heart Rhythm Group

The client is saying that in IE8, onmouseover of a top level nav item (e.g. about your heart) which has a sub menu, you see the sub menu but when you move the mouse down to select a sub menu item it disappears. So he can see the sub menu but not click on it - not good!

If anyone could check it out for me &/or suggest a css fix, it would be greatly appreciated.

Pete

Hi,

The problem in IE8 is this image which is lying over the nav. You can increase the z-index of the na so that the drop down works but then the image goes under the nav and you want it on top.

The only solution I could see would be to re draw that image at a shorter width. Currently you have it at 372px wide but most of that is whites pace. If you crop it to about 140px it will still look the same and no longer interrupt that drop down section.

Thanks Paul,

Thanks for the advice, just tried that. In fact the image also includes the logo text in white but i’ve chopped it in half and applied the logo text to the header background image but still no joy.

The nav is z-indexed 777 whilst the logo is 666 so that shouldn’t be a problem. I think it is due to to the height of the nav elements not behaving in IE8 but I’m still downloading a couple of things to test properly with!

Hi,

It’s working for me in IE8 now with the smaller image.

Adjusting the z-index as you have it now would have no effect because the top level ul isn’t positioned and would have no effect unless you added position:relative.

You could also try this nonsense fix for ie8 and give it an image that doesn’t exist (or make a 1px x 1px transparent gif) and do this.


.topnav{position:relative;background:url(fake.gif) no-repeat -1px -1px}

That should also work - at least it does locally.

Well, managed to do a dirty 'lil workaround found thru Partial Click Bug - CSS Bugs - hasLayout.net by Zoffix Znet

and it seems to workout ok! Still testing tho.

Pete