Support » Themes and Templates » 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.