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

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -