Z-Index Issues with IE 7 and jQuery

Recently i was working on a site design that included a top, horizontal navigation, with jQuery based effects applied to elements below the top navigation. In IE8, Firefox and Safari, everything looked great. In IE 7 though, that frustrating IE7 quirks bug reared it’s ugly head once again. The drop down navigation appeared below the jQuery modified elements and whatever changes I made to the z-index didn’t do a thing.
I have used many different solutions to this problem in the past including the following articles:
http://shinokada.blogspot.com/2009/02/z-index-problem-with-ie.html
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
http://stackoverflow.com/questions/1257059/jquery-innerfade-not-appearing-correctly-in-ie-7-and-below
These articles attempt to tweak the z-index of the parent elements to work around IE 7’s known bug, but sometimes this won’t work.
The solution I have found to work best is from the following blog:
http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/
The code block provided in the blog post above works great most of the time, my issue with it is that is will apply it’s z-index reordering all of the time to all browsers. There are not too many people still using such an old browser, so I would rather that newer browsers use the code I created, and only modify the z-index for older browsers. I modified the proposed code fix slightly and am offering it up as a slight alternative.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
        jQuery(document).ready(function() {
            //fix ie 7 and less quirks issue
            if (($.browser.msie) && (parseInt($.browser.version, 10) <= 7)) {
                $(function() {
                    var zIndexNumber = 1000;
                    $('div').each(function() {
                        $(this).css('zIndex', zIndexNumber);
                        zIndexNumber -= 10;
                    });
                });
            }
        });
</script>

The theory of this modification is that we only want to use this fix if the visitor is using a version of IE less than or equal to version 7, so really IE 7 and IE 6.5. You will need jQuery as well of coarse, in case you are trying to fix IE 7- z-index bug for other general layout issues not being caused by the use of jQuery. Plase this code block in the <head> section of your site.

Leave a Comment

Your email address will not be published. Required fields are marked *

Enter Code *

Filed Under

Related

Do you need to build a custom search-driven component for your #digitalworkspace while saving thousands of hours of development time?

Join us on as we lift the hood of #PnP Modern Search v4, show you how it's built, & take you on a live coding adventure.

http://ow.ly/MTnL50EpN5J

#Hybridwork is more than just a buzzword to latch onto; it’s the future for many organizations for the unforeseeable future. So, how can you use #Microsoft365 for #hybridwork? Let's breaks it down…

http://ow.ly/ay2e50EmNhg

It's that time again! Join the #PixelMillWebinars on 4/29 where @EricOverfield lifts the hood of #PnP Modern Search v4, shows how it's built, & takes you on a live coding adventure to customizing your own web part using the power of the existing codebase.

http://ow.ly/EI5h50EmNqj

What? Anchor links now work in #SharePoint site navigation! This fix snuck in and I completely missed it. Use them to create a TOC for long pages or cross link between pages. They work in text or quick links web parts & nav too! https://support.microsoft.com/en-us/office/create-and-use-modern-pages-on-a-sharepoint-site-b3d46deb-27a6-4b1e-87b8-df851e503dec#bkmk_pageanchors

A big thank you to David Leveille and @CrushNetworks for having our President + Co-Founder @EricOverfield on this episode of #TheVirtualWaterCooler!

Subscribe to PixelMill's
E-news

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch