enavu webdevmania tutsvalley psdestination
visit the enavu network
11 Comments Article Title Overlay

Fixing the IE7 z-index issue (internet explorer 7 z-index)

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 [...]

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

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. image
  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;
    	});
    });
    
DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

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. What will 2011 mean for Web Development

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

Comments

  • Thanks! I was pulling my hair out until I read this…

  • Really nice Thank you so much

  • Excellent! Thank you very much! you’re a life saver (sort to speak:).

  • Thanks so much

  • Thank you

    working.

  • Finally! Somebody who explained this bug like a normal human being, THANK YOU! Every other site that tries to explain this bug makes no damn sense at all. Once again thanks very much!

  • Thank you! Been searching for an explanation on this all morning.

  • 3 days later and this article has already saved my butt three times. Thanks again!

  • Thank you! Helped me to fix a drop down navigation problem. 5 stars!

  • Wow, you really saved me with that jQuery fix. Thanks a bunch!

  • Tx a lot for this. IE sucks so much..

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting