Защо не работи кода на IE

[ivo75]

Не мога да си обясня защо кода не работи на IE, а и не дава никаква грешка. Това е една галерия, която си работи доста добре на останалите браузъри, но на ИЕ нищо не се показва. Ето кода

<!DOCTYPE html>
<html>
<head>
	<title>Галерия</title>
	
</head>
<body>

<style type="text/css">
div#gallery-wrapper {
    width: 600px;
    height: auto;
	text-align: center;
}

div#main-container {
margin-bottom:25px;
    text-align: center;
    width: 600px;
    height: 400px;
}
img#main-image {
    vertical-align: middle;
    max-height: 420px;
    max-width: 600px;
}

img.thumb {
margin-top:10px;
margin-right:5px;
    vertical-align: middle;
    max-width: 100px;
    max-height: 100px;
    cursor: pointer;
	text-align: center;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
  var imgArray = new Array("sn/02_b.jpg",
                           "sn/03_b.jpg",
                           "sn/04_b.jpg",
						   "sn/1276.jpg",
						   "sn/1278.jpg",
						   "sn/1280.jpg",
						   "sn/1282.jpg");

  for (var i = 0; i < imgArray.length; i++) {
    $('div#thumbs').append('<img class="thumb" src="' + imgArray[i] + '" />');
  }

  $('img.thumb').click(function() {
    var sourceURL = $(this).attr('src');
    $('img#main-image').fadeTo('normal', 0, function() {
      $('img#main-image').attr('src', sourceURL);
    });
    $('img#main-image').delay(100).fadeTo('normal', 1);
  });
});
</script>

<div id="gallery-wrapper">
    <div id="main-container">
        <img id="main-image" src="sn/logo.jpg"/>
    </div>
    <div id="thumbs"></div>
</div>

</body>
</html>

Освен това само в IE се кешира сайта и това не мога да си го обясня.

 

[ivo75]

Оправих се трябвало е да бъде

<!DOCTYPE html> 
<html> 
<head> 
   <title>Галерия</title> 
    
</head> 
<body> 

<style type="text/css"> 
#gallery-wrapper { 
    width: 600px; 
    height: auto; 
   text-align: center; 
} 

#main-container { 
margin-bottom:25px; 
    text-align: center; 
    width: 600px; 
    height: 400px; 
} 
#main-image { 
    vertical-align: middle; 
    max-height: 420px; 
    max-width: 600px; 
} 

img.thumb { 
margin-top:10px; 
margin-right:5px; 
    vertical-align: middle; 
    max-width: 100px; 
    max-height: 100px; 
    cursor: pointer; 
   text-align: center; 
} 
</style> 

<script type="text/javascript"> 
$(document).ready(function() { 
  var imgArray = new Array("sn/02_b.jpg", 
                           "sn/03_b.jpg", 
                           "sn/04_b.jpg", 
                     "sn/1276.jpg", 
                     "sn/1278.jpg", 
                     "sn/1280.jpg", 
                     "sn/1282.jpg"); 

  for (var i = 0; i < imgArray.length; i++) { 
    $('#thumbs').append('<img class="thumb" src="' + imgArray[i] + '" />'); 
  } 

  $('img.thumb').click(function() { 
    var sourceURL = $(this).attr('src'); 
    $('#main-image').fadeTo('normal', 0, function() { 
      $('#main-image').attr('src', sourceURL); 
    }); 
    $('#main-image').delay(100).fadeTo('normal', 1); 
  }); 
}); 
</script> 

<div id="gallery-wrapper"> 
    <div id="main-container"> 
        <img id="main-image" src="sn/logo.jpg"/> 
    </div> 
    <div id="thumbs"></div> 
</div> 

</body> 
</html>