css - Why is the logo hiding in IE7? -
i finishing small website , noticed in ie7 logo hiding behind image on home page: http://reapvalue.com/
here 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 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 , preservation, april montgomery, llc." ></a></h1> <h1><a href="/"><img id="logo-small" src="/photos/logo-small.png" alt="reap - renewable energy , 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 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 z-index 5000 still hides behind image. in getting logo front appreciated.
thanks.
i can't explain why, z-index in ie7 , ie8 acts weird. if you're using z-index, , want work in older ie browsers, need make sure parent element has heigher z-index element.
for example, give #header
z-index: 6000
; , it'll fixed.
i hope can give better explanation why works, know aswell myself.
edit: i've googled abit , found interesting post:
http://www.brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
Comments
Post a Comment