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

Anyone who has 'attended' a physical meeting by 'conferencing in' in knows the frustrations & limitations that come from not being in the room. You're the voice in the ceiling & not equally represented in the conversation.

This is no longer acceptable.

http://ow.ly/EmFK50Fqqhu

Today, we find ourselves facing the “hybrid work paradox.”

Employees are keen to retain flexibility. At the same time, human-to-human collaboration remains important.

To marry the best of both, hone your strategy, spaces, & tech to suit employee needs.

http://ow.ly/JtVO50Fn8qX

It's the day of the show, y'all!

Join the #PixelMillWebinars this morning at 11am PST for a live panel discussion about what the #digitalworkspace looks like for a #hybrid team, & how #Microsoft365 can empower your users no matter where they're working.

http://ow.ly/q81i50FhITy

IT'S WEBINAR WEEK!

Join the #PixelMillWebinars this Thursday as we welcome key players from @OrchestrySoft, @KieferConsult, and @AP_Mortgage to discuss the hybrid work paradox and how #Microsoft365 can empower your users no matter where they're working.

http://ow.ly/2uc550FfqO6

We've all been itching to get "back to normal," but what does that mean? Are we missing out on valuable lessons learned by trying to return to something that perhaps wasn't working before?

Join us next week for a live panel discussion on the new normal.

http://ow.ly/CfsU50FdQXv

Subscribe to PixelMill's
E-news

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch