CSS Popup Issue in IE

[jtwilcox]

Hello everyone,

I’ve create a CSS popup box for a group of video thumbnails. When the user hovers over a thumbnail, an orange “text balloon” appear above it with additional information about the video. It works fine in mozilla, webkit, etc. but GUESS WHAT? not so much in IE7 or IE8.

Here is a screenshot example from Chrome.

Here is the HTML example for one of the thumbnails (simplified considerably from the WordPress html/php it’s actually built in):

John Doe

Manager

Collaboration

And here is the CSS that goes along with it:

article.video-entry, article.video-entry:hover { width: 160px; height: 95px; float: left; position: relative; overflow: visible; z-index: 5; opacity:1; filter:alpha(opacity=100); }

article.video-entry {

-webkit-transition: all .3s ease-in-out;

-moz-transition: all .3s ease-in-out;

-o-transition: all .3s ease-in-out;

-ms-transition: all .3s ease-in-out;

transition: all .3s ease-in-out;

transition-duration: .3s;

transition-property: opacity;

}

.videorow { margin-bottom: 15px; display: block;

-webkit-box-shadow: 0 0 7px #7696a2;

-moz-box-shadow: 0 0 7px #7696a2;

box-shadow: 0 0 7px #7696a2;

}



article.unselected { opacity:0.4; filter:alpha(opacity=40); }



article.video-entry a { position: absolute; top: 0; left: 0; }



article.video-entry a { display: block; width: 156px; height: 91px; z-index: 7; border: 2px solid transparent; }

/* CSS3 Transitions */

article.video-entry a {

-webkit-transition: all .3s ease-in-out;

-moz-transition: all .3s ease-in-out;

-o-transition: all .3s ease-in-out;

-ms-transition: all .3s ease-in-out;

transition: all .3s ease-in-out;

transition-duration: .3s;

transition-property: opacity;

}

article.video-entry a:hover, article.selected a { border: 2px solid #f19938; }



article.video-entry > .graythumb img { position: absolute; top: 0; left: 0; width: 160px; height: 95px; filter: alpha(opacity=100); opacity: 1; }

/* CSS3 Transitions */

article.video-entry > .graythumb img {

-webkit-transition: all .3s ease-in-out;

-moz-transition: all .3s ease-in-out;

-o-transition: all .3s ease-in-out;

-ms-transition: all .3s ease-in-out;

transition: all .3s ease-in-out;

}

article.video-entry:hover > .graythumb img, article.selected > .graythumb img { opacity: 0; filter: alpha(opacity=0); }



article.video-entry > div.videopopup { position: absolute; width: 180px; height: 87px; background: url(../images/video_popup.png) no-repeat top left; z-index: 8; bottom: 64px; left: -23px; padding: 18px; opacity: 0; visibility: hidden; filter: alpha(opacity=0); }

/* CSS3 Transitions */

article.video-entry > div.videopopup {

-webkit-transition: all .3s ease-in-out;

-moz-transition: all .3s ease-in-out;

-o-transition: all .3s ease-in-out;

-ms-transition: all .3s ease-in-out;

transition: all .3s ease-in-out;

}

div.videopopup span { display: block; }

div.videopopup .title { margin: 3px 0 10px; }

article.video-entry:hover > div.videopopup { opacity: 1; bottom: 74px; visibility: visible; opacity:1; filter: alpha(opacity=100); z-index: 4000!important; }

As you can see, there’s a good bit going on here. In IE, the main problem is that the “videopopup” text balloon doesn’t fully appear. I can only see as much of it as fits within the dimensions of its containing box (article.video-entry). I’m wondering if it could be as simple as a z-index and/or overflow issue. Whatever it is, hopefully it’s just a dumb oversight or mistake on my part.

Thanks in advance!

[jtwilcox]

Here’s a screenshot of what is looks like in IE8.

I’m not so worried about the weird handling of the transparent PNG yet, for now I just want the thing to appear. Thanks.

[jtwilcox]

I realize probably nobody enjoys debugging for IE… but *bump*

[jtwilcox]

Okay, I figured this out. I ended up rewriting how the whole thing functioned. Got rid of the containing article and just had everything contained within the a tag. Now it’s good. Here’s the final HTML:

John Doe

Manager

Collaboration

And here is the CSS:

a.video-entry { width: 160px; height: 95px; float: left; position: relative; z-index: 24; outline: none; display: block; text-decoration: none; }

a.video-entry { /*CSS3 Transitions*/

-webkit-transition: all .3s ease-in-out;

-moz-transition: all .3s ease-in-out;

-o-transition: all .3s ease-in-out;

-ms-transition: all .3s ease-in-out;

transition: all .3s ease-in-out;

transition-duration: .3s;

transition-property: opacity;

}

a.video-entry:hover { background:; z-index: 25; }



a.video-entry span.inner_border { border: 2px solid #f19938; display: block; opacity:0; filter:alpha(opacity=0); width: 156px; height: 91px; position: absolute; top: 0; left: 0; background:; }

a.video-entry span.inner_border {/*CSS3 Transitions*/

-webkit-transition: all .3s ease-in-out;

-moz-transition: all .3s ease-in-out;

-o-transition: all .3s ease-in-out;

-ms-transition: all .3s ease-in-out;

transition: all .3s ease-in-out;

transition-duration: .3s;

transition-property: opacity;

}

a.video-entry:hover span.inner_border { opacity:1; filter:alpha(opacity=100); }



a.video-entry > img.attachment-post-thumbnail { opacity:1; filter:alpha(opacity=100); }

a.video-entry > img.attachment-post-thumbnail { /*CSS3 Transitions*/

-webkit-transition: all .3s ease-in-out;

-moz-transition: all .3s ease-in-out;

-o-transition: all .3s ease-in-out;

-ms-transition: all .3s ease-in-out;

transition: all .3s ease-in-out;

transition-duration: .3s;

transition-property: opacity;

}

a.video-entry:hover > img.attachment-post-thumbnail { opacity:0; filter:alpha(opacity=0); }



a.video-entry .videopopup { opacity:0; filter:alpha(opacity=0); bottom: 64px; visibility: hidden; position: absolute; left: -23px; display: block; width: 180px; height: 87px; background: url(../images/video_popup.png) no-repeat top left; padding: 18px; z-index: 26; }

a.video-entry .videopopup { /*CSS3 Transitions*/

-webkit-transition: all .3s ease-in-out;

-moz-transition: all .3s ease-in-out;

-o-transition: all .3s ease-in-out;

-ms-transition: all .3s ease-in-out;

transition: all .3s ease-in-out;



}

a.video-entry:hover > .videopopup { opacity:1; filter:alpha(opacity=100); bottom: 74px; left: -23px; visibility: visible; z-index: 30; }

.videopopup span { display: block; position: relative; }

.videopopup .title { margin: 6px 0; }

I had some trouble using CSS opacity in IE because the background image for my videopopup was a semi-transparent PNG. In IE it was rendering with the semi-transparent part as solid black. I used the pngbehavior.htc ( http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html ) and it was fixed.

Whew!

[Author]

Posts