Grow your CSS skills. Land your dream job.

I have problem of absolute posistions and z-index with IE7

  • # January 9, 2013 at 12:10 pm

    Hello friends,

    IE7 renders some abosulte positioned divs incorrectly in my site… for instance I have an absolute positioned div named “item-content” doesn’t overlap the image .It comes hidden below the image and gets invisible . While it works properly in IE8 .
    Also there is an absolute p div : before bug . It disapears in IE 7.

    #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;
    }

    HTML:

    The title which should overlaps the image, comes behind it

    I hope you give some guide lines to fix this annoying problem …

    # January 9, 2013 at 12:40 pm

    Please create a [Codepen](http://codepen.io/pen) so we can visualise the problem and help you work on a fix more efficiently.

    # January 9, 2013 at 1:33 pm

    HI

    I saw this new member post, so I decide to enter. I am not a developer but Im trying to set my webpage, i am looking for a nice slider and really Anything Slider is amazing.
    So, please anybody can tell me how to set up this slider on my web, its a boonex dolphin web site.

    Thanks a lot
    my email: cjummp@gmail.com

    # January 9, 2013 at 2:45 pm

    IE7 doesn’t really obey the rules when it comes to z-index, I’m afraid. This is a fairly common problem I come across nearly on a daily basis when dealing with older code on the institutional sites. For IE7, you have to give the parent element a higher z-index than the child.

    Here’s a good read on how to help IE recognize what your intentions are: [Squish the Internet Explorer z-index Bug](http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/)

    # January 9, 2013 at 5:44 pm

    Thanks Josh. Already read this article. It’s intersting but it ddin’t fix my case… maay be I didn’t employ the solution correctly!!

    # January 10, 2013 at 1:07 am

    There’s a syntax error in your CSS above. You’re missing a closing `}` for `#content .item-content header {`

    z-index affects siblings:
    `#content .item-content header` and `#content .item img` aren’t siblings therefore your CSS won’t affect them.

    `#content .item-content` should be `z-index: 3` and `#content .item img` `z-index: 0`

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".