Tema: las imagenes del rollover se desalinean
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 11/01/2011, 11:58
esaenz22
(Desactivado)
  
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 16 años, 7 meses
Puntos: 7
las imagenes del rollover se desalinean
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: 
Ver original
  1. /*--------------------- menu index -----------------------------*/
  2.  
  3. div#menu_index{
  4.     width:800px;
  5.     height:312px;
  6.     position:relative;
  7. }
  8.  
  9. div#menu_index ul{
  10.     margin:0;
  11.     padding:0;
  12.     list-style:none;
  13. }
  14.  
  15. div#menu_index li.menu1{
  16.     float:left;
  17.     width:252px;
  18.     height:312px;
  19.     text-align:center;
  20.     padding-left:10px;  
  21.     margin-right:12px;
  22. }
  23.  
  24. div#menu_index li.menu2{
  25.     float:left;
  26.     width:252px;
  27.     height:312px;
  28.     text-align:center;      
  29.     margin-right:12px;  
  30. }
  31.  
  32. div#menu_index li.menu3{
  33.     float:left;
  34.     width:252px;
  35.     height:312px;
  36.     text-align:center;      
  37. }
  38.  
  39. div#menu_index li a{
  40.     display:block;
  41.     position:relative;
  42. }
  43.  
  44. div#menu_index li a img{
  45.     position:absolute;
  46.     z-index:1;
  47.     left: 0px;
  48. }
  49.  
  50. div#menu_index li a span {
  51.     display:block;
  52.     width:252px;
  53.     height:312px;
  54.     position:absolute;
  55.     z-index:2;
  56. }

imagenes desordenadas.



imagen original.



saludos.