#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Posts
    16
    Rep Power
    0

    Talking HELP!!! problems CSS &jquery caption slider in IE


    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 section of my HTML code:

    Code:
    <ul> 
    <div class="featurebox holder"> 
    <li><imgsrc="http://i1207.photobucket.com/albums/bb466/audetwebdesign/jsFiddle%20Demos/Puffins.jpg" alt="events" /></li> <div class="cover featuretext"> 
    <h3 class="date">Day 24th Month</h3> 
    <p>Lorem ipsum dolor sit amet, consectetur asipisicing elit, sed do eiusmod tempor incididunt...<a href="http://webpage.net/events/" target="_BLANK">Read More></a></p> 
    </div> 
    </div> 
    </ul>​
    Here is the CSS:

    Code:
    .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; 
    }​
    And finally the JQuery:

    Code:
    $(document).ready(function(){ 
    //Caption Sliding (Partially Hidden to Visible) $('.featurebox.holder').hover(function(){ $(".cover", this).stop().animate({top:'32px'},{queue:false,duration:160}); }, function() { 
    $(".cover", this).stop().animate({top:'100px'},{queue:false,duration:160}); }); });
    Any help would be much appreciated. Thanks guys.
    Last edited by RossBryan; October 23rd, 2012 at 10:07 PM. Reason: Initial information was incorrect as the code works in all IE versions apart from IE9
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    It seems to work fine for me in FF16, IE9, and IE8.

    You've got a CSS error:
    41 .holder .featuretext Value Error : top only 0 can be a length. You must put a unit after your number : 220
    Are you aware that all of the text is not always shown with the way it's been implemented?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo