CODEWITHSUNDEEP
cssinternet-explorer-7
forrest
forrest

Reputation: 10982

Why is the logo hiding in IE7?

I am just finishing a small website and noticed in IE7 that the logo is hiding behind an image on the home page: http://reapvalue.com/

Here is the html:

<div id="wrap">
  <div id="header">
    <ul id="main-nav">
  <li><a  href="/about/">About</a></li>
  <li><a   href="/what-we-do/">What We Do</a></li>
  <li class="last"><a   href="/contact/">Contact</a></li>
</ul>

<h1><a href="/"><img id="logo" src="/photos/logo.png" alt="REAP - Renewable Energy and Preservation, April Montgomery, LLC." ></a></h1>
<h1><a href="/"><img id="logo-small" src="/photos/logo-small.png" alt="REAP - Renewable Energy and Preservation, April Montgomery, LLC." ></a></h1>
  </div><!-- end #header -->
  <div id="tagline">
        <span class="green">renewable energy</span> <span class="magenta">and preservation</span>
  </div>

  <div id="main" class="clearfix">

         <div id="Stage" class="EDGE-909290339"></div>

            <img  id="lead-image" src="photos/hickory.jpg" alt="hickory, nc preserveration district">

Here is the CSS:

#header         { width: 960px; height: 53px; margin: 0 auto; position: relative; }
body#inside #header { height: 56px; }
img#logo        { position: absolute; top: 0; left: 0; z-index: 5000; }

Despite setting the z-index to 5000 it still hides behind the image. Any help in getting the logo to the front will be greatly appreciated.

Thanks.

Upvotes: 0

Views: 42

Answers (1)

Jrn
Jrn

Reputation: 1235

I can't really explain why, but z-index in IE7 and IE8 acts weird. If you're using z-index, and want it to work in older IE browsers, you need to make sure your parent element has an heigher z-index then your element.

For example, give your #header a z-index: 6000; and it'll be fixed.

I hope someone can give you an better explanation as to why this works, as I would like to know aswell myself.

EDIT: I've googled abit and found this interesting post:

http://www.brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

Upvotes: 1

Related Questions