I've been looking at a bug in IE7 where mousing over link inside of a div causes a "wiggle."  Needless to say, this wiggle is highly irritating, especially when the div and the link has its margin and padding explicitly set to "0."  The problem is compounded because you can not use any of the traditional developer tools in IE to find out what's happening.  The solution is actually rather simple, but first, some code:

<div id="myLinkWrapper">
  <a id='myLink" runat="server" href="http://www.flexadmiral.com">
    <asp:Image runat="server" source="~/someDir/someImage" alt="My Image" />
  </a>
</div>

Now what I found is that this doesn't "always" happen, but when it does... it's esoteric... and annoying. For apparently no reason what-so-ever, mousing over the link caused the image (and all of the items under the div) to shift slightly (upwards in my case). Mouse out caused the image to return to its original position. Now, to make matters worse, I noticed a small amount of white space around my image which made the design look sloppy. I noticed the white space in IE6 and IE7, but only IE7 was doing the little wiggle dance. Since it didn't actually "break" anything, i decided to focus on it after some of my more critical issues were completed.

So there was this little control, annoying me for days, when I finally was able to take some time to look at it. I tried all the obvious stuff first... setting the margins to 0, padding to 0, playing around with the padding of the image, the link, the div... playing with the styles for the div directly above the control... nothing seemed to work. IE7 was mocking me and the IE8 Developer Toolbar was useless to help me find a solution because the issue was only occuring on mouseover.

I thought that perhaps some A;hover style was causing the link to change state (even though there was no text in the link), I thought that maybe there was a hover style applied somewhere to the image... perhaps some javascript function... something... somewhere?? Nope. Everything was perfectly correct everywhere else. Just this one place... just this one(two actually) link.

So I decided to try to set a height on the link itself, just to see if somehow that corrected the problem. JACKPOT! The solution was so simple, and yet took so much time because there were very few posts on Google and most of them involved javascript solutions which just seemed like absolute overkill for a simple link. After realizing the problem, I realized that it wasn't the div at all that was resizing / wiggling, but the anchor itself. So I made a slight modification to my code to the following:

<div id="myLinkWrapper">
  <a id='myLink" runat="server" style="height: 30px" href="http://www.flexadmiral.com">
    <asp:Image runat="server" source="~/someDir/someImage" alt="My Image" />
  </a>
</div>

Days of irritation solved by an explicit height on the anchor itself. I tested in FireFox, and all post-IE5 flavors. not only did this fix the wiggle, it also fixed the additional white space around the image itself. I'm ready for a beer.