WordPress.org

Ready to get started?Download WordPress

Forums

how to fix abolute position and z-index issue with IE7 ? (14 posts)

  1. Morocco English
    Member
    Posted 1 year ago #

    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

  2. vishnuduttdebut
    Member
    Posted 1 year ago #

    Can you send the URL ?

  3. Andrew
    Forum Moderator
    Posted 1 year ago #

    You ought to ask CSS-specific queries in CSS-specific forums like http://CSSCreator.com

  4. vishnuduttdebut
    Member
    Posted 1 year ago #

    ok Andrew Nevins.
    But how can I assume that what is the problem.

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    Sorry, I was talking to the original poster.

  6. vishnuduttdebut
    Member
    Posted 1 year ago #

    It's Ok.

  7. Morocco English
    Member
    Posted 1 year ago #

    This is the url Vishnuduttdebut :
    http://www.nadorpixel.com/english

  8. danny_getextra
    Member
    Posted 1 year ago #

    -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';

  9. Morocco English
    Member
    Posted 1 year ago #

    should I add this code to the image :

    #content .item img{
    position: relative;
    height: 200px;
    width:187px;
    z-index: 0;
    text-align: center;
    -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';
    		}

    ?

  10. Morocco English
    Member
    Posted 1 year ago #

    This is a realy annoying problem ...
    many people still use IE7 ...

    The text keeps hidding behind the post images!!!

    and an abolute div background disappearing

    how to fix this??

    is there a method to make any viewer's browser to behave like ie8 ??

  11. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Try googling IE7 absolute positing -- there are many discussions of the problem. Or go to CSScreator.com -- they have lots of good CSS-specific information.

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

  13. Morocco English
    Member
    Posted 1 year ago #

    I ve spent several days and nights searching in the very depth of google

    tried many codes meta tags and decotyoes

    still the problem not fixed !!

  14. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Then perhaps you should consider hiring someone:

    http://jobs.wordpress.net/

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.