z-index issue with IE7

April 1, 2010 at 4:42 am 1 comment

Hi all, I spent almost a day to figure out how to fix z-index issue with IE7.

HTML

—————–

<div id=”wrapper”>
<div id=”inner”>
<div>1</div>
<div>2</div>
<div>3</div>
</div>

<div id=”menu”></div>

Assume I have a menu with z-index:10 and I want wrapper to sit on top of menu . What I did was I had

#inner{z-index:999;}
Hoping it to work in all browsers, It worked in all except IE7.

reasons : IE7 except us to provide postion:relative, So what I did was added position relative to #inner

Now #inner{z-index:999;position:relative;} Still it didnt worked. IE7 creates its own stack I mean the there is one more div on top of inner div i.e. wrapper

so Wrapper by default adds stack to all its children so even though inner has 999 z-index it wont work.

Solution is to provide z-index to wrapper and position it rather than to inner div

#wrapper{z-index:11;position:relative;}

Entry filed under: css. Tags: .

Floating message | Banner for IE6 users using jquery Insert a character using jquery at some location using substring

1 Comment Add your own

  • 1. Christopher  |  December 5, 2011 at 2:02 am

    I wish all of the browsers would follow the same guidlelines. They really maker coding complicated. Much more complicated than it should be. So many wasted hours. At least double what it should be.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Flickr Photos

The firsts lights

Lago di Braies

Survivor Mode

More Photos

Blog Stats

  • 705,780 hits

%d bloggers like this: