I'm hoping somebody can bail me out. I have a z-index issue in IE7 and I've tried DOZENS of fixes I've found online but nothing seems to work!
Here's the page - www.siphon-marketing.com/unifirst
The jquery snippets I found didn't work at all. I DID find a simple thing that got me close - adding div {z-index:10;}. By adding this, my drop-down menu DID appear over my slider HOWEVER I couldn't navigate the dropdowns...kept disappearing when I moved my mouse!
I've tried this as well but same thing, submenus disappear when navigating through:
I'm not entirely sure about this, but I believe IE7 has an old bug that causes Z-indexes to not work properly. Can't recall the full case situation in which it happens, but I recall that even though an element might have a higher Z-index, it would still be overlapped by another element with lower Z-index that would come later in the DOM.
I'm sure there's a proper solution, but if you really tried everything (as in EVERYTHING!), then you might want to try moving the header lower in the DOM and position it absolute. I used to do this way back, when it also really mattered for SEO (having content as high up in the DOM as possible).
Hello all!
I'm hoping somebody can bail me out. I have a z-index issue in IE7 and I've tried DOZENS of fixes I've found online but nothing seems to work!
Here's the page - www.siphon-marketing.com/unifirst
The jquery snippets I found didn't work at all. I DID find a simple thing that got me close - adding div {z-index:10;}. By adding this, my drop-down menu DID appear over my slider HOWEVER I couldn't navigate the dropdowns...kept disappearing when I moved my mouse!
I've tried this as well but same thing, submenus disappear when navigating through:
$(function() { var zIndexNumber = 1000; $('div').each(function() { $(this).css('zIndex', zIndexNumber); zIndexNumber -= 10; }); });
I'm at my wit's end
Len
I'm not entirely sure about this, but I believe IE7 has an old bug that causes Z-indexes to not work properly. Can't recall the full case situation in which it happens, but I recall that even though an element might have a higher Z-index, it would still be overlapped by another element with lower Z-index that would come later in the DOM.
I'm sure there's a proper solution, but if you really tried everything (as in EVERYTHING!), then you might want to try moving the header lower in the DOM and position it absolute. I used to do this way back, when it also really mattered for SEO (having content as high up in the DOM as possible).
Kinda like this, to give you an idea:
Would only use this as a very last resort though. If @Jamy_za's solution doesn't work.
Thanks jamy_za!
VERY simple solution, however, I get the same issue as my other attempts...can't navigate the dropdown so I'm thinking I have OTHER IE7 issues!
Anybody have an idea? I may need to make another post as this would be a separate problem :(
That's quite gross, I know, but I think it will solve the IE7 issue.
Weird...no idea WHY it works but it did!!!!
Thanks so much!