Odd glitch causes content to move when hovering over an image

Question

I have a problem with my site in Internet Explorer 7/8/9. Here's how I reproduce it:

1. Go to http://pieterdedecker.be/.
2. Hover over the fourth icon under "Programming: software and sites".
3. Slowly move the mouse towards the thumbnail with the candles.
4. When the mouseover is triggered, the image moves down a couple of pixels.

Here's the odd thing: when I remove this CSS rule from the stylesheet, the site works fine:

ul.grid > li > a > img:hover {
    border: 2px solid #007FFF;
}

What's happening here?

Update: here's a video that demonstrates the issue. http://www.screentoaster.com/watch/stUE5QREZKRFtXRFtfWFNQVV9c

Answer 1

I'm honestly not seeing it, so I can't give you a 100% accurate answer, but are you sure it's not the border causing that slight shift?

Answer 2

Pieter, Have you tried defining the style for the "ul.grid > li > a > img"? I have seen this happen if you don't define all of the states of the link. My guess is that it is border related?