CSS Creator trouble with z-index in IE7

Posted: Wed, 2008-07-23 12:30

Hello all!

I am currently working on a web site (http://www.epgui.com/scriptnetics/company) that has a navigation menu at the top.

Of course with the z-index set to 999 (or some very high number), everything works as expected in standards compliant browsers. Thumbs up

Problem is, in IE7 the navigation menu appears below the page content, which is, to say the least, quite inconvenient! Sticking out tongue

I suspect the problem is related to absolute positioning of some elements, as the same issue is reproduced on a few other pages as well.

If anyone can help, that would be very much appreciated!

Thank you,
Guillaume Pelletier

Edit:
I need to use the absolute positioning for the specific type of layout I do (notice how everything stretches on window resize), and with the type of template that results it may be hard to keep track of the style...

This is how it looks (I'm sorry for the mess Sticking out tongue ) :

Markup :

<!-- This is the navigation menu -->

<div class="navigation">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="solutions">Solutions</a>
            <div class="dropdown">
                <ul>
                    <li><a href="solutions/emr">...</a></li>
                    <li><a href="solutions/eprescribing">...</a></li>
                    <li><a href="solutions/handwriting">...</a></li>
                    <li><a href="solutions/webdev">...</a></li>
                </ul>
            </div>
        </li>
        <li><a href="products">Products</a>
            <div class="dropdown">
                <ul>
                    <li><a href="products/medscribbler">...</a></li>
                    <li><a href="products/rxscribbler">...</a></li>
                    <li><a href="products/dictionaries">...</a></li>
                    <li><a href="products/umpcgames">...</a></li>
                </ul>
            </div>
        </li>
        <li><a href="store">Store</a>
            <div class="dropdown">
                <ul>
                    <li><a href="store">...</a></li>
                    <li><a href="store">...</a></li>
                    <li><a href="store">...</a></li>
                </ul>
            </div>
        </li>
        <li><a href="news">News</a>
            <div class="dropdown">
                <ul>
                    <li><a href="news">...</a></li>
                    <li><a href="news">...</a></li>
                    <li><a href="news">...</a></li>
                </ul>
                <a href="news" class="more">More ...</a>
            </div>
        </li>
    </ul>
</div>

<!-- This is the page content -->

<div id="companySplash">
    <img src="image.png" alt="" /><!--

     *   This comment here fixes a bug in IE (of course...)

    --><div id="staff">
        <ul>
            <li><a href="company#abc">...</a></li>
            <li><a href="company#abc">...</a></li>
            <li><a href="company#abc">...</a></li>
            <li><a href="company#abc">...</a></li>
            <li><a href="company#abc">...</a></li>
            <li><a href="company#abc">...</a></li>
            <li><a href="company#abc">...</a></li>
        </ul>
    </div>
    ...
</div>

Style :

// The navigation menu which is triggered on hover

#header .navigation ul li div.dropdown {
  display: none;
  margin-left: -1px;
  padding-top: 5px;
  position: absolute;
  z-index: 999;
}

// The splash screen which appears over the menu in IE7

#content #companySplash {
  margin-bottom: 1%;
  position: relative;
  width: 100%;
  z-index: 0;
}

#content #companySplash > img {
  position: relative;
  width: 100%;
  z-index: 0;
}

#content #companySplash #staff {
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 25%;
}

Update:

even writing the following was to no avail...

#content * {
  position: relative;
  z-index: 0;
}

Update:

The following works fine for the menu (the menu appears like it should).

#content {
  position: relative;
  z-index: -1;
}

However, everything is behind the <body>, so that the content links are not clickable, no hover effects, no selectable text, etc.

The above fix may not be the solution I am looking for, but it certainly does show something... I'm just not sure what!

Update:
Fixed! Smiling Thanks anyway, seems like I was on the rigth track!

html {
  position: relative;
  z-index: -1;
}
#header {
  position: relative;
  z-index: 1;
}
#content {
  position: relative;
  z-index: 0;
}

Conclusion
IE is such a pain in the ass, was all of this really necessary? Seriously... Puzzled

If anyone knows of a better solution, please let me know! Again, thank you.

Ed Seedhouse

Guru

Posts: 2519
Joined: 2005-12-14
Location: Victoria British Columbia

IE goes into quirks mode if

Posted: Wed, 2008-07-23 18:05

IE goes into quirks mode if there is any text at all before the doctype declaration. You have the XML declaration:

<?xml version="1.0" encoding="utf-8"?>

before the doctype line so of course every version of IE is going to act like IE 5 and do CSS all wrong. The line is completely unnecessary so lose it.

Is there some reason you have for wanting to drive older folks with weakish eyes away from your site?

I could change my plea to guilty,
but I don't think it would stick.

David Laakso

Enthusiast

Posts: 267
Joined: 2008-07-18
Location: US

Umm, an xml declaration

Posted: Wed, 2008-07-23 23:29

<?xml version="1.0" encoding="utf-8"?> above the doctype does not put every version of IE in quirksmode; therefore, it is literally impossible that every version of IE is going to act like IE/5 and do the CSS all wrong when included.