Even though IE9 was announced and it’s really going to make our lives easier… for now we still have to worry about sneaky IE7.

Even though IE9 was announced and it’s really going to make our lives easier… for now we still have to worry about sneaky IE7.

In today’s case i encountered an unfortunate error with a navigation element that was positioned absolutely (drop-down menu) and unfortunately went
behind the main graphic on my website even though it had a high z-index.

The Problem: IE7 has a problem rendering z-indexes correctly (of course) and in a few rare scenarios you may run into this problem. Off the
top of my head the two main scenarios are a SuckerFish (drop down) menu made with pure CSS that goes over certain content on your page, and a lightbox
that somehow doesn’t play nice with the elements underneath it.

The Solutions: There are a couple of solutions, let me try to explain both.

1. Make sure the parent of your absolutely positioned element has a higher z-index! Here is a graphic to help you visualize it.
2. Or use this jQuery (did not work for me but a lot of people seem to get it to work for them!

   $(function() {
   	var zIndexNumber = 1000;
   	$('div').each(function() {
   		$(this).css('zIndex', zIndexNumber);
   		zIndexNumber -= 10;
   	});
   });
   

Related posts:

1. Internet Explorer 6, and why it relates to your life (if it does at all)
2. Quick and Easy Sprites
3. The 6 don’ts of Web Development
4. Web Forms: Semantic Mark Up in our Forms [part 2]
5. Centering a Div Vertically and Horizontally via pure CSS or with JS

Did you absolutely LOVE this article... share it!