las imagenes del rollover se desalinean

[esaenz22]

buenos dias. habia implementado un efecto rollover en jquery y css. se trata de que cuando le paso el mouse la imagen cambia.

me mostro bien en ie8, firefox, google chrome y safari. pero en ie7 la cosa cambia. las imagenes que por defecto las muestro en el index se desplazan de un lado para otro. solo cuando le paso el mouse a la imagen, alli funciona bien.

aqui les dejo mi codigo css y la imagen como me muestra en ie7.

Código CSS:

/*--------------------- menu index -----------------------------*/
 
div#menu_index{
    width:800px;
    height:312px;
    position:relative;
}
 
div#menu_index ul{
    margin:0;
    padding:0;
    list-style:none;
}
 
div#menu_index li.menu1{
    float:left;
    width:252px;
    height:312px;
    text-align:center;
    padding-left:10px;  
    margin-right:12px;
}
 
div#menu_index li.menu2{
    float:left;
    width:252px;
    height:312px;
    text-align:center;      
    margin-right:12px;  
}
 
div#menu_index li.menu3{
    float:left;
    width:252px;
    height:312px;
    text-align:center;      
}
 
div#menu_index li a{
    display:block;
    position:relative;
}
 
div#menu_index li a img{
    position:absolute;
    z-index:1;
    left: 0px;
}
 
div#menu_index li a span {
    display:block;
    width:252px;
    height:312px;
    position:absolute;
    z-index:2;
}
 

imagenes desordenadas.



imagen original.



saludos.

[PrendekZ]

¿Podrías dejar el link + código html?

;)

[esaenz22]

ah de veras. se me olvido. un lapsus.

Código HTML:

<div id="menu_index">
  <ul>
    <li class="menu1"> <a href="we_have_arrived.html" title="We have arrived"> <img src="images/bot_1_a.gif" border="0" /> <span><img src="images/bot_1.gif" border="0" /></span> </a> </li>
    <li class="menu2"><a href="accsesories.html" title="Our pieces"> <img src="images/bot_2_a.gif" border="0" /> <span><img src="images/bot_2.gif" border="0" /></span> </a> </li>
    <li class="menu3"><a href="contact_us.html" title="Contact us"> <img src="images/bot_3_a.gif" border="0" /> <span><img src="images/bot_3.gif" border="0" /></span> </a> </li>
  </ul>
</div>
 

saludos.

[esaenz22]

alguna ayuda por favor ?.

saludos.