Superfish Submenu Not Showing In IE 7-9

HTML & CSS
1

I’m using Joomla Superfish and having difficulty getting the submenu items to appear in IE V.7-9. No problem with Safari, FF, and Chrome. They work beautifully.

I thought that this was a layering issue and have tried to issue z-indexes on the surrounding container of the navbar and the container below the navbar–but alas, did not work. I then tried an experiment: I removed the banner image (the one sitting behind the menu), tested, and the submenus still do not appear in IE 7-9 only! Queer.

Would someone mind taking a look?

Thank you!

2

Hi,

It seems to be the IE filter causing problems yet again. It seems that these filters are causing more problems these days now that everyone is starting to use them again.

Either remove the filter or remove the absolute positiong as none of the filters work properly on positioned elements.


.moduletablemainmenu {
    /*position: absolute;*/
    zoom:1.0;
    top: 0px;
    width: 964px;
    margin: 0px auto;
    background: rgba(0,0,0,.5);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
    line-height: normal;
    text-align: center;
    z-index: 1000;
}

However, I don’t think that gradient filter will do what you want. You would be better off using transparent background images for IE7+ and just let IE6 haver solid colours.

You also need to remove the xml declaration as it will trip quirks mode in IE6.

Remove this as its optional anyway.


<?xml version="1.0" encoding="utf-8"?>
3

Thanks for the input!

I wound up creating a transparent background. Seems like much less work than monkeying around with filters that are suppose to work, but don’t.

I really hope CSS3 will be more supported by IE soon, or MS should drop IE7.

Thank you, again!