how to fix abolute position and z-index issue with IE7 ?
-
IE7 renders some abosulte positioned divs incorrectly … for instance the absolute positioned div “item-content” doesn’t overlap the image .It comes below the image and gets invisible . While it works properly in IE8 .
This is the code :
#content .item { position: relative; background: url(library/images/no-image.jpg) no-repeat center center #fff; height: 250px; margin-bottom: 2%; overflow: hidden; box-shadow: 0 0 5px #dedede; border: 1px solid #fff; } #content .item-content { width: 100%; position: absolute; bottom: 0; word-wrap: break-word; } #content .item-content header { position: relative; width: 100%; z-index: 3; #content .item-content h2{ background: url(library/images/trans.png); } #content .item img{ position: relative; height: 200px; width:187px; z-index: 0; text-align: center; } <div class="item"> <div class="item-content"> <header> <h2 class="entry-title"> The title which should overlaps the image, comes behind it </h2> </header> </div> <img src="thumb.jpg"> This image displayed over the item-content in ie7 </div>
how can I fix this with IE7…
thanks
Viewing 13 replies - 1 through 13 (of 13 total)
Viewing 13 replies - 1 through 13 (of 13 total)
- The topic ‘how to fix abolute position and z-index issue with IE7 ?’ is closed to new replies.