jQuery rollover not working in IE

JavaScript
1

Hi guys,

I’m working on a page that incorporates a dribbble style rollover effect on a div/image. When the mouse enters the div area a hidden overlay div will fade in. This seems to work fine across every browser except for IE(8). I am completely at a loss as it seems to work fine in a seperate html file I created to test it. I have also ran the page with break points on the jquery that tells the overlay div to fade in and it is getting to this line.

Can anyone tell me where I am going wrong please.

The page can be accessed here: http://www2.hull.ac.uk/files/clearing%20pages/clearing.htm

The code in question is located within the ‘What our students say’ area and is as follows:

HTML


 <div class="videoItem">
                              <img src="images/rollover-image.png" alt="" />
                              <div class="rollOver">
                               <a class="fancyText" href="#inline1" title="Eleanor Hardie, 20, Leicestershire">
                                 <h3>Eleanor Hardie</h3>
                                 <p>Eleanor is studing BSc Environmental Sciences at the Scarborough Campus...[read more]</p>
                              </a>
                           </div>

CSS



div.videoItem {
    float:left;
    margin:20px 10px 0 0;
    width:210px;
    border:1px solid #eeeeee;
    height: 210px;
    position:relative;
}

div.videoItem img {
    position: absolute;
    top:0;
    left: 0;
}

div.videoItem a {
    display:block;
    text-decoration: none;
    height:100%;
}

div.videoItem h3 {
    font:italic normal 1.5em Georgia, "times new Roman", serif;
    line-height: 150%;
    color:orange;
}

div.videoItem h3, div.videoItem p {
    padding:0 10px;
}

div.videoItem div.rollOver {
    height:95%;
    width:100%;
    background:#1a1a1a;
    padding-top: 5%;
    color:#eeeeee;
}

jQuery


$(document).ready(function(){
            setUp();
         });

         function setUp() {
            $(".rollOver").hide();

            $(".videoItem img").mouseenter(function(e) {
               $(".rollOver").fadeTo(300, .95);
            });

            $(".rollOver").mouseleave(function(e){
               $(".rollOver").fadeOut();
            });
         }

Thanks

2

Pretty much as soon as I hit post I tried adding some positioning to the .rollOver class (absolute, top, left). This now works across browsers.