Ik ben met een slidemenu/box bezig en werkt in elke browser behalve IE8, wie zal mij kunnen helpen met dit probleem. Als je met de muis over het menu gaat laat hij op volgorde foto 1, 2, 3, 4, 5, 6 zien maar in IE8 laat hij foto 3, 5 zien.

http://tinyurl.com/6r755pd

Javascript

PHP Code:

var MenuSlider = {
 initt: function() { 
  $("li.diensten").mouseover(function() {
 
   var background = $(this).parent().find(".hover");
 
   $(background).stop().animate({
    top: $(this).position()['top']
   }, {
    duration: 300
   });
 
   MenuSlider.Fotos($(this));
 
  });
 },
 
 Fotos: function(obj) {
 
  var margin = $(obj).parent().parent().find(".fotos").width();
  margin = margin * ($(obj).prevAll().size() - 1);
  margin = margin * -1;
 
  $(obj).parent().parent().find(".fotoslider").stop().animate({
   marginLeft: margin + "px"
  }, {
   duration: 300
  });
 }
}
$(document).ready(function() {
 MenuSlider.initt();
}); 


CSS

PHP Code:

.menu_slider                     { margin: 10px 0px 10px 0px; width: 924px; }
.menu_slider h3                  { width: 200px; height: 25px; line-height: 25px; padding: 0px 10px 0px 10px; font-size: 13px; color: #1D3565; background-color: #EEEEEE; }
.menu_slider ul.links            { float: left; margin: 0px 0px 10px 0px; padding: 0px 0px 3px 0px; width: 220px; position: relative; background-color: #EEEEEE; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; behavior: url('PIE.htc') }
.menu_slider ul.links .hover     {
 height: 20px;
 line-height: 20px;
 padding: 3px 3px 3px 3px;
 margin: 3px 10px 3px 10px;
 overflow: hidden;
 background: url(../images/menubut.png) no-repeat;
 color: #ffffff;
 position: absolute;
 width: 194px;
 border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; behavior: url('PIE.htc');
 left: 0;
}
.menu_slider ul.links li.diensten {
 height: 20px;
 line-height: 20px;
 display: block;
 padding: 3px 3px 3px 3px;
 margin: 3px 10px 3px 10px;
 width: 194px;
 color: #000000;
 background: #FFFFFF;
 
 cursor: pointer;
    overflow: hidden;
 
 border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; behavior: url('PIE.htc');
}
.menu_slider ul.links li.diensten a {
 position: relative;
}
.menu_slider .fotos                     { float: right; width: 694px; height: 205px; margin: -25px 0px 10px 0px; overflow: hidden; background-color: #000000; position: relative; }
.menu_slider .fotos .fotoslider         { width: 4164px;}
.menu_slider .fotos .fotoslider .foto   { float: left; width: 694px; height: 205px; }
.menu_slider .fotos .fotoslider .foto a { color: #FFFFFF; }