Strange behavior of li backgrounds on hover in Internet Explorer (IE)

Question

So I have a simple flickr image feed on http://cure.org/ just above the footer. The feed is contained in a relatively positioned div, with an ul inside, and li that contain the <a> and <img> inside. The img is absolutely positioned inside the relatively positioned li, and the li has a background to give a photo border effect.

The problem I'm having is that there is a :hover style so that when you mouseover the images, they shift up a few pixels, and in webkit and firefox browsers they also rotate a couple degrees. All is well in Chrome, Safari, and Firefox. But in Internet Exploiter I get this strange deal where if you hover over one image, the backgrounds of all the previous images in the float also shift up, but not the ones after. It's really odd, and I can't quite see why it is happening, or how to resolve.

Any tips? You can use the link above to view the live page, or see excerpts from the code below:

the markup...

<div id="mediaFeedImgs">

<ul>

    <li class="mediaImg">
        <a href="#" title="Makau Nzisa"><img src="http://farm5.static.flickr.com/4060/4385817766_d0e0f076a6_s.jpg" alt="Makau Nzisa" width="75" height="75" /></a>
    </li>

    <li class="mediaImg">
        <a href="#" title="passion2010IMG_2456"><img src="http://farm5.static.flickr.com/4011/4266257860_909860cab5_s.jpg" alt="passion2010IMG_2456" width="75" height="75" /></a>
    </li>

    <li class="mediaImg">
        <a href="#" title="IMG_1616"><img src="http://farm3.static.flickr.com/2636/4113313926_0f11062dd5_s.jpg" alt="IMG_1616" width="75" height="75" /></a>
    </li>

    <li class="mediaImg">
        <a href="#" title="Mbinya Nzive"><img src="http://farm5.static.flickr.com/4013/4387741405_ce7889e71b_s.jpg" alt="Mbinya Nzive" width="75" height="75" /></a>
    </li>

    <li class="mediaImg">
        <a href="#" title="James Kariuki"><img src="http://farm5.static.flickr.com/4036/4385054803_cee8954f02_s.jpg" alt="James Kariuki" width="75" height="75" /></a>
    </li>

    <li class="mediaImg">
        <a href="#" title="phpValev8"><img src="http://farm5.static.flickr.com/4004/4648263242_f664121517_s.jpg" alt="phpValev8" width="75" height="75" /></a>
    </li>

    <li class="mediaImg">
        <a href="#" title="Zenebu_0015"><img src="http://farm5.static.flickr.com/4021/4440138241_b81e7bc517_s.jpg" alt="Zenebu_0015" width="75" height="75" /></a>
    </li>

    <li class="mediaImg">
        <a href="#" title="Oslin_8589"><img src="http://farm5.static.flickr.com/4058/4425042835_42945a39fa_s.jpg" alt="Oslin_8589" width="75" height="75" /></a>
    </li>

    <li class="mediaImg">
        <a href="#" title="Jose_7722"><img src="http://farm3.static.flickr.com/2693/4422684429_d497172e91_s.jpg" alt="Jose_7722" width="75" height="75" /></a>
    </li>

</ul>

the CSS...

#mediaFeedImgs {
  position:absolute;
  top:60px;
  left:10px;
}

#mediaFeedImgs li {
  float:left;
  margin-right:16px;
}

.mediaImg {
  display:block;
  width:89px;
  height:90px;
  background:url(/img/media/photo-bg-75px.png) no-repeat left top;
  position:relative;
  z-index:1;
}

.mediaImg:hover {
  margin-top:-3px;
  padding-bottom:3px;
  height: 87px;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
}

.mediaImg img {
  position:absolute;
  top:5px;
  left:7px;
}

Answer 1

I suspect it is because you are adding padding to do the shift. I tested by having it set to position: relative and then on hover change it to top: -3px and it seemed to solve your issue.