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

Are you preparing to launch a new #SharePoint intranet?

Don’t spring it on employees out of the blue. First, talk to as many of them as you can.

Planning is just phase one. For all of our tips, watch our recent webinar!

http://ow.ly/dsQM50GqPI5

It's that time again! Join #Microsoft MVP & Regional Director, @EricOverfield on Thursday, October 28th, at 11:00 AM PST as he walks through #MicrosoftViva’s current state & offerings and what they mean to your #digitalworkspace right now.

http://ow.ly/3QFK50Gnx9f

It's the final countdown! Join @EricOverfield at 11am PST to learn about common pitfalls and paths to success when moving to #SharePointOnline. You'll walk away with practical tips to use in your organization today!

http://ow.ly/fdf150GjyJT

In today's episode of the #PixelMillWebinars, you'll learn from the experience of a global organization’s path to digital teamwork victory and get to see first-hand how to successfully plan a smooth migration for your team.

Join us at 11am PST!

https://pixelmill.com/webinar-9-takeaways-from-a-global-organizations-migration-to-sharepoint-online/

It's the day of the show y'all! Join #Microsoft RD +MVP @EricOverfield at 11am PST as we walk you through a multi-national enterprise software company’s migration journey to #SharePointOnline. Learn about common pitfalls and paths to success.

http://ow.ly/cN9250GjtGk

Subscribe to PixelMill's
E-news

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch