Today I ran into this dreaded issue. I had coded a simple custom jquery drop down menu, I got it working in Firefox, tested it on Safari... good to go, chrome... no problem. Then the dreaded IE test. Epic fail! My page content was covering the drop down elements and no matter how high I set the z-index on the menu...IE still overlapped the menu with page content.
Thinking I was doing something wrong.. I began downloading and implementing other jquery drop down plugins into my website with default values. All failed. Finally after tons more google searching I came across an article that saved my day.
http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/
The answer was so simple and made so much sense that its almost embarrassing to have not thought of it. Here is an example of the code I was working on.
//A BUNCH OF STUFF THAT OVERLAPPED OVER THE MENU
My css code had elements positioned in a mixture of ways but I never set the z-index on the parent divs. So what was happening was not only was the menu being overlapped, but the #top div was layered underneath the #content div.
So I set the #top higher than the #content and the #menu even higher than both.
Example:
//content is lowest
#content{
z-index:1
}
//outer container for the menu
#top{
z-index:2
}
#menu{
z-index:3
}
#menu ul{
z-index:4
}
//I could keep going, but I think you get the picture
This took care of that issue. Thanks webdemar.
Comments