Ktash 1851

I'm having an issue overlaying a link with z-indexes over an area. It works in every browser but IE (7-9 is what I'm supporting and none work). The specific issue is that a link overlaid on top of another element using absolute positioning and z-indexes does not allow clicking of the link. This bug, in the grand scheme of the site, is small, and not a huge issue, but something I'd like to fix. I've linked to my staging site, but I'm not sure how much longer I'll be keeping that site up. If I change over to the real URL, I post a link to that, but I've also posted sample code below.. I've moved to the live site here.

So, here's the code I'm looking at:

HTML

<div class="entry">
    <span class="video_img">
        <img width="1920" height="1080" src="image.jpg" class="attachment-full" alt="..." /> </span>
    <div class="description">
        <h3>Title</h3>
        <p>...  Description ...</p>

    </div>
    <div class="linkto"><a href="/videos/#128"></a></div>
    <div class="clearer"></div>
</div>

Relevant CSS

.featured_video .entry .description {
    position: absolute;
   bottom: 0px;
    left: 0px;
    right: 206px;
    z-index: 29;
   background-color: #FFFFFF;
    background-color: rgba(255,255,255,0.5);
    border-top: 1px solid #333333;
}
.featured_video .linkto a {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    z-index: 31;
    right: 207px;
}
.featured_video .entry .video_img {
    min-width: 960px;
    min-height: 620px;
    width: auto;
    height: auto;
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
}
.featured_video .entry .video_img img {
    margin: 0px;
    padding: 0px;
    display: block;
    min-width: 960px;
    min-height: 620px;
    width: auto;
    height: auto;
    position: relative;
    z-index: 28;
}
.featured_video .entry {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 30;
    margin: 0px;
    width: 100%;
    height: 100%;
}

1 answer

Anton 20
0
points
This was chosen as the best answer

IE + z-index is always a challange. Check out this article and comments if you feel like trying to squish the bugs.

I would recommend wrapping the link around video_img and description instead.

Answered over 8 years ago by Anton
  • Thanks for the link. I've actually known about the stack reset issue, but since it doesn't work in IE 8 or 9 as well (which are supposed to have correct implementations) I don't think that's what I'm looking at. And as far as wrapping the link around everything, I have a problem with that because it would then be an inline element with block level tags inside. And since I'm pulling this from a wordpress site, there is no way to guarantee otherwise. Ktash over 8 years ago
  • It's ok to wrap links around block-level elements :) See http://html5doctor.com/block-level-links-in-html-5/ Anton about 8 years ago
  • I love what they're doing with HTML5. Thanks for the info, I did not hear about this change to the spec :) Ktash about 8 years ago