Deslocamento de DIV quando o :hover é ativado no IE

Olá, sou nova aqui, mas já conheço e pesquiso há algum tempo neste forum .

Estou desenvolvendo um menu com imagens, em vez de uma lista, e estou com um problema de deslocamento de div no IE.

No Chrome e no Firefox, está funcionando como desejo.

Mas no IE quando passo o mouse na imagem, ela aumenta, mas desloca as divs que estão abaixo dela.

Segue o código que desenvolvi:

#menupromocoes{
 text-align: left;
 background-image: url(imagens/fmp1.png);
 background-repeat: no-repeat;
 width: 170px;
 height: 500px;
 float: left;
 margin: 10px 0 0 10px;
 display: inline-block;
 padding-left: 15px;
}

#menupro1{
 background-image: url(imagens/fmp2.png);
 background-repeat: no-repeat;
 margin: 20 5 5 5px;
 width: 120px;
 height:90px;
 padding: 5px;
 position:relative;
}

#menupro1 a { display: block;} #menupro1 img{width:109px;height:89px; border:0;} #menupro1 a:hover img{width: 137px;height:119px;z-index: 100;position:absolute;margin: -15 0 0 -10px;}

Abaixo o código do menu na página:

<div id="menupromocoes">
 <div id="menupro1"><a href=""><img src="imagens/teste.jpg"></a></div>
 <div id="menupro1"><a href=""><img src="imagens/teste.jpg"></a></div>
 <div id="menupro1"><a href=""><img src="imagens/teste.jpg"></a></div>
 <div id="menupro1"><a href=""><img src="imagens/teste.jpg"></a></div>
 </div>

Se alguém puder me ajudar.