Grow your CSS skills. Land your dream job.

css caption slider in IE9 issues

  • # October 23, 2012 at 10:58 pm

    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

    # October 24, 2012 at 7:47 am

    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.

    # October 24, 2012 at 7:54 am

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

    # April 17, 2013 at 11:42 am

    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

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

You must be logged in to reply to this topic.

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