Image is not rendering in IE

The following code sample am using, Images are not displyed in any of IE version.

HTML Code:

<div class="container" style="text-align:center;">
 <ul class="thumb">
  <li style="height:220px; padding: 0 40px 0 0;  overflow:visible; 
     开发者_运维知识库    position: relative;">
   <img width="246px" height="208px" src="images/about4.jpg" 
         alt="Biomimetic and Biological Materials"/>
  </li>
 </ul>
</div>

jQuery:

<script type="text/javascript"> 
$(document).ready(function(){

//Larger thumbnail preview 

$("ul.thumb li").hover(function() {
    $(this).css({'z-index' : '10'});
    $(this).find('img').addClass("hover").stop()
        .animate({
            marginTop: '-110px', 
            marginLeft: '-110px', 
            top: '50%', 
            left: '50%', 
            width: '600px', 
            height: '400px', 
            padding: '20px' 
        }, 200);

    } , function() {
    $(this).css({'z-index' : '0'});
    $(this).find('img').removeClass("hover").stop()
        .animate({
            marginTop: '0', 
            marginLeft: '0',
            top: '0', 
            left: '0', 
            width: '246px', 
            height: '208px', 
            padding: '5px'
        }, 400);
});

//Swap Image on Click
    $("ul.thumb li a").click(function() {

        var mainImage = $(this).attr("href"); //Find Image Name
        $("#main_view img").attr({ src: mainImage });
        return false;       
    });
 });
 </script> 

Am I doing anything wrong? thanks :)

It's working.. also in IE..

http://www.jsfiddle.net/antiflu/GWyAg/

What exactly is your problem?

Try putting the 'swap image on click' click handler inside the $(document).ready(function() {, to ensure that it is bound once the DOM is ready for JavaScript processing.

Look at your layout and referenced code You are searching for:

$("ul.thumb li a")

but under "ul.thumb li" you have only "img" tag, not "a".

May be the problem is in it.