jQuery - Compatibility Problem with Internet Explorer 7 and general buggy behaviour.

Question

Hi, I have already asked some questions about this topic, I have made some modifications that users here suggested but I still can't resolve the problem. I've little known of JavaScript, I just modified a code from another page.

I have this code that dynamically slides up a Div over an image when mouse over it. You can check it out in this test page: cine.uuuq.com

-In Firefox works perfectly.

-In Chrome I get some buggy behavior. The div slides up when mouse over near the bottom of the div.

-In Internet Explorer 7 everything runs really slow (buggy) and the div is not well positioned.

The jQuery:

jQuery.fn.masque = function(classSelector) {
$(this).hover(function(){
$(this).find(classSelector).stop().animate({height:'90px',opacity: '1'},400);
},function () {
$(this).find(classSelector).stop().animate({height:'0',opacity: '0'}, 300);
});
};
$(document).ready(function(){$('.thumb').masque('.masque');});

The HTML:

<div class="thumb bg25">
    <a href="#"><img src="img/poster2.jpg" alt="Movie Title" /></a>
    <div class="masque">
            <h3 class="movietitle"><a href="#" >Movie Title</a></h3>
            <p class="movieinfo">2008</p>
            <p class="movieinfo">Drama, History, Comedy, Short</p>
    </div>
</div>

The CSS:

.thumb {float:left; margin:0 14px 14px 0; width:126px; height:186px; padding:10px; position:relative;}

.masque {position:absolute; background:#212326; width:118px; bottom:10px; height:0; padding:4px; display:none;}

Maybe someone can help me fix those compatibility problems! Thanks!

Answer 1

If I take the code you quoted in the question and put it into a test page it works fine for me in IE7, although the test page you linked to is certainly pushing something to the right in IE7.

I'd recommend taking the code from your question and rebuilding the effect of the test site line by line until you break it. That should be a pretty fair indication of where things go wrong :)