Question

I’m tring to build a thumbnail hover effect. It works in every browser, but the IE… Where did I go wrong?!?

JQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="thumbhover.js"></script>
<script>

$('.sliders li:gt(3)').css('display', 'none');

$(".more").click(function() {
    $('.sliders li:first').insertAfter('.sliders li:last').toggle('clip', 100, function() {
        $('.sliders li:eq(3)').toggle('scale', 100);
    });

});

$(document).ready(function() {
    $('#thumb img').hoverpulse({
        size: 50,  // number of pixels to pulse element (in each direction)
        speed: 400 // speed of the animation 
    });
});
</script>​

HTML:

<div class="clients">
    <ul class="sliders" style="font-size: 11px; list-style: none;">
      <li class="slider">
        <div class="left" style="width: 87px;" id="thumb"><img src=
        "images/whit-images/12.jpg" width="80" height="60" alt="fishing cancun" /></div>

        <div class="left" style="height: 60px; width: 200px; margin-left: 87px;">
          <strong><br />
          15 min. fight 15 lbs Jack Crevalle</strong><br />
          February 22 2012
        </div><br clear="all" />
      </li>

      <li class="slider">
        <div class="left" style="width: 87px;" id="thumb"><img src=
        "images/whit-images/11.jpg" width="80" height="60" alt="fishing cancun" /></div>

        <div class="left" style="height: 60px; width: 190px; margin-left: 87px;">
          <strong>Ben Kirkpatrick with a Baby Tarpon</strong><br />
          February 21 2012
        </div><br clear="all" />
      </li>

      <li class="slider">
        <div class="left" style="width: 87px;" id="thumb"><img src=
        "images/whit-images/10.jpg" width="80" height="60" alt="fishing cancun" /></div>

        <div style="height: 60px; width: 200px; margin-left: 87px;">
          <strong>Ben with a nice size lookdown</strong><br />
          February 21 2012
        </div><br clear="all" />
      </li>

      <li class="slider">
        <div class="left" style="width: 87px;" id="thumb"><img src=
        "images/whit-images/9.jpg" width="80" height="60" alt="fishing cancun" /></div>

        <div class="left" style="height: 60px; width: 200px; margin-left: 87px;">
          <strong>Cancun</strong><br />
          February 2012
        </div><br clear="all" />
      </li>

      <li class="slider">
        <div class="left" style="width: 87px;" id="thumb"><img src=
        "images/whit-images/8.jpg" width="80" height="60" alt="fishing cancun" /></div>

        <div class="left" style="height: 60px; width: 200px; margin-left: 87px;">
          <strong><br />
          Chris Webber</strong><br />
          February 2012
        </div><br clear="all" />
      </li>

      <li class="slider">
        <div class="left" style="width: 87px;" id="thumb"><img src=
        "images/whit-images/7.jpg" width="80" height="60" alt="fishing cancun" /></div>

        <div class="left" style="height: 60px; width: 200px; margin-left: 87px;">
          <strong><br />
          Dwayne Perillo, first bonefish of 2012</strong><br />
          February 18 2012
        </div><br clear="all" />
      </li>

      <li class="slider">
        <div class="left" style="width: 87px;" id="thumb"><img src=
        "images/whit-images/6.jpg" width="80" height="60" alt="fishing cancun" /></div>

        <div class="left" style="height: 60px; width: 200px; margin-left: 87px;">
          <strong><br />
          Sweet catch</strong><br />
        </div>
      </li>
    </ul>
  </div>

CSS:

.slider{
    position: relative;
    height: 65px;
    margin-bottom: 4px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}   

.clients{
    width: 330px;
    margin: 0 auto;
    position: relative;
    height: 320px;
}

Here is the actual website, please no comments about how messy the code is. I am not supposed to touch it! (on the bottom half where the clients part is).

Answer 1

Just took a look in IE9 and it is being forced to render in Quirks mode. Really before trying to work out why IE doesn’t work correctly, if possible, spend the time fixing the rendering engine (getting it to run in Standards mode). There’s a good chance it’ll fix itself.