Forums

nadorpixel

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:

  <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>

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

AndyHowells

Please create a Codepen so we can visualise the problem and help you work on a fix more efficiently.

chausito

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

JoshBlackwood

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

nadorpixel

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!!

jamy_za

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

treehouse : what would you like to learn today?

Forums

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