JQuery script problem in Internet Explorer

I made a script which works in all browsers, except for SOME Internet Explorer's. I cannot seem to figure out why some Internet Explorer's work, and others don't. At the office, 4 Internet Explorer 8's @ version 8.0.6001.18702 work perfectly while 4 others Internet Explorer's 8 @ version 8.0.6001.18702 (so completely the same browsers) are not working. We all have Windows XP and all the latest updates.

Please visit http://www.stardekk.be/voorontwerp/verco/ with Firefox, safari, chrome, ... and afterwards with Internet Explorer (7, 8, doesn't matter).

The problem lays within the top of the website. The thumbs should have an overlay, and when hovered; the overlay should go away and a tooltip should come up.

I hope someone can help me since 50% of the Internet Explorer's work, and 50% don't.

开发者_StackOverflow社区Thank you

<script type="text/javascript" language="javascript">
$(window).load(function() {
$("#gallery div img").after('<div class="overlay"></div>');
$(".overlay").css("position", "absolute");
$(".overlay").css("z-index", "30");
$(".overlay").css("background", "url('images/overlay.png')");
$(".overlay").css("top", "0");
$(".overlay").css("left", "0");
$(".overlay").css("width", "241px");
$(".overlay").css("height", "146px");

var userAgent = navigator.userAgent.toLowerCase();

if ($.browser.msie) {
    $('.overlay').hover(function() {
        $(this).stop().fadeTo("fast", 0, function() { $(this).css("background", "transparent") });
    },
    function() {
        $(this).stop().css("background", "url('images/overlay.png')").fadeTo("fast", 0.8);

    });
} else { 
    $('.overlay').hover(function() {
        $(this).stop().fadeTo("fast", 0, function() { $(this).css("background", "transparent") });
    },
    function() {
        $(this).stop().css("background", "url('images/overlay.png')").fadeTo("fast", 1);
    });
}
});

---

Try using the document ready function, or it's shorthand version, instead of the window load event to wrap your code.

 $(function() {
    ...
 });

---

Have you checked that all the identical browsers are running in the same compatibility mode? Using the Developer Tools the browser can be configured to use different rendering engines. The options are...

• IE7
• IE8
• IE8 Compatibility View.

---

New code (with tips)

$(window).load(function() {
$("#gallery div img").after('<div class="overlay"></div>');
$(".overlay").css({"position":"absolute", "z-index": "30", "background": "url('images/overlay.png')", "top": "0", "left": "0", "width": "241px", "height": "146px"});

var trans = $.browser.msie ? 0.8 : 1;

$('.overlay').hover(function() {
    $(this).stop().fadeTo("fast", 0, function() { $(this).css("background", "transparent") });
},
function() {
    $(this).stop().css("background", "url('images/overlay.png')").fadeTo("fast", trans);

});
});