css caption slider in IE9 issues

[RossB]

Hi I’m attempting to achieve a hover overlay effect, listing objects elements using a basic div ul li a img, and I simply want a black overlay with some white text caption to slide in, when hovering over a specific image.

So far I’ve got the JQuery and CSS caption sliders functionality to behave correctly in modern browsers and even IE8 along with previous versions, but I can’t seem to get the caption integrated to function correctly for IE9. The text caption overlay partially shows (as intended), but does not slide up on a hover event.

Heres a JSFiddle example of how it works correctly in the modern browsers:

http://jsfiddle.net/RossB/THS2J/

Can Anybody please shed some light on on any tricks i’m missing?

Here is the CSS i’m applying:

.featurebox h3{
color:#ffffff;
margin-top:0px;
margin-bottom:0px;
padding-left:5px;
font:11pt;
font-weight: bold;
}

.featurebox{
color:#ffffff;
width: 185px;
height: 118px;
float:left;
/*border: solid 2px #8399AF;*/
overflow: hidden;
position: relative;
}

/*caption para text*/
.featurebox p{
margin-top:0px;
padding-left: 5px;
padding-right:5px;
}

/*caption slider */
.featuretext{
top:99px;
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=80)”;
}

.holder .featuretext {
top: 220;
left: 0;
}

.featurebox p a {
float: right;
color:#FFFF00;
}​

Any help would be much appreciated. Thanks

[JoniGiuro]

I’m not sure I understood the problem but I got it to behave the same way on chrome and IE9 by declaring a font size in .featurebox p

.featurebox p{
margin-top:0px;
padding-left: 5px;
padding-right:5px;
font-size:12px;
}

here’s the fiddle: http://jsfiddle.net/THS2J/5/

This kind of problems is why I usually import a reset.css ( http://meyerweb.com/eric/tools/css/reset/ )
Hope this helps.

[smithclarke3]

I’m getting something strange with IE9. I can view the demo page here on this site and the Slider works fine, but when I download the app and put the demo page up on my site the slider doesn’t work in IE9, I just see the first image and nothing follows that.
[Website App Developers](http://www.softechebs.com/ “Website App Developers”)
[Social Media Application Development](http://www.softechebs.com/social-media-development/ “Social Media Application Development”)

[gixxx]

Hey Joni thanks! you’re right with the idea of declaring a font size in .featurebox p, I’ve tried it and it works!

http://www.freshtechweb.com/10-online-resources-for-designers-for-free.html

[Author]

Posts