IE9 img hover add's margin to bottom

I'm having a very strange problem and have no clue on how to solve it. The webpage on where the problem occurs has a div which has several clickable images horizontal in it. When hovering the clickable images () a border of 15 pixels changes color, when leaving the hovered state the border color changes again to the original color. The weird issue is that when I hover any image in the div or leave the hover state, the margin under the div keeps enlarging, which is ofcourse unacceptable. This problem only occurs in IE9. Chrome and Firefox work fine. I haven't tested on previous IE versions. I think the problem might be in the following CSS statements:

#content_links #fotos #foto{
    text-align: center;
    width: 488px;
    overflow-y: hidden;
    white-space: nowrap;
    margin-left: 22px;
    margin-bottom: 70px;
}

#content_links #fotos #foto a{
    text-decoration: none;
}

#content_links #fotos #foto img{
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 6px;
    border: 3px solid silve开发者_如何学Pythonr;
    border-bottom-width: 15px;
}

#content_links #fotos #foto a:hover img{
    border: 3px black solid;
    border-bottom-width: 15px;
}

Any clues on solving this problem? Thanks in advance,

Thomas

Have you declared a doctype for your html? I have noticed strange things with IE and borders without one. I am not sure this applies to IE 9.

See here on css and compatability with internet explorer.