Foros del Web » Creando para Internet » CSS »

problema con imágenes como botones de un menú

Estas en el tema de problema con imágenes como botones de un menú en el foro de CSS en Foros del Web. Hola, tengo un problemilla, tengo un menu , cada sencillito botón es una imagen que al situarse sobre él, cambia a otra imagen (igual pero ...
  #1 (permalink)  
Antiguo 05/05/2005, 07:17
Avatar de codigoflecha  
Fecha de Ingreso: noviembre-2004
Mensajes: 325
Antigüedad: 13 años, 1 mes
Puntos: 3
problema con imágenes como botones de un menú

Hola, tengo un problemilla, tengo un menu , cada sencillito botón es una imagen que al situarse sobre él, cambia a otra imagen (igual pero con distintos colores).
El problema es que en firefox perfecto pero en IE, es como si al poner el ratón sobre el botón se ve el fondo de la capa y luego se visualiza correctamente, ¿que puedo hacer para verlo como en firefox?
he subido una página de la web para que la vean, el que quiera claro, se lo agradecería bastante a quien me pueda ayudar, ya que me pasa con dos webs que tengo prácticamente terminadas.
http://www.javierpastor.net/gestiones.html
Un saludo

Última edición por codigoflecha; 05/05/2005 a las 07:31
  #2 (permalink)  
Antiguo 05/05/2005, 09:27
 
Fecha de Ingreso: mayo-2005
Mensajes: 10
Antigüedad: 12 años, 7 meses
Puntos: 0
Bueno, puede ser que el problema radica en que el browser se demora en cargar la imagen hover, he aplicado esta forma de hacer botones en dos web, en la primera el link estaba referido a un td, no aun li y las imags. cargaban bien, de esta forma:
<css>
#contLeft { width: 159px; margin: 0px; padding:0px; font-size:11px; font-weight:bold;}
html>body #contLeft { width: 159px; margin: 0px; padding:0px;}
#contLeft table { width: 159px; margin: 0px; padding:0px;}
#contLeft table tr { display:block; width: 159px; clear:both; margin: 0px; padding:0px; background-image: url(back_of.gif); background-repeat: repeat-y;}
#contLeft table tr td { display:block; width: 159px; clear:both; background-image: url(back_of.gif); background-repeat: repeat-y; margin: 0px; padding:0px;}
#contLeft table tr td a { display:block; width: 159px; clear:both; background-image: url(back_of.gif); background-repeat: repeat-y; border-bottom: 1px solid #E8E5D8; margin: 0px; padding:0px;}
#contLeft table tr td h1 { font-family: Arial Narrow, Trebuchet MS, Arial; font-size:11px; font-weight:bold; color: #132E5E; margin-left:20px; margin-right:12px; line-height:16px; padding:8px;}
#contLeft table tr td a:hover { display:block; width: 159px; clear:both; background-image: url(back_on.gif); background-repeat: repeat-y; border-bottom: 1px solid #E8E5D8; margin: 0px; padding:0px;}

</css>

Y otra vez lo hice con li, pero en este caso la imag. de hover era el fondo en blanco, por lo que no podría decir si de haber tenido una imag de hover hubiese aparecido el problema de carga; aquí va:

<css>
#left { margin:0; padding:0; width: 146px;}
#left ul { border: 0; margin:0; padding: 0; list-style-type: none; text-align: left; float:left; background: #FFFFFF; width: 146px;}
#left ul li { display:block; float:left; text-align: left; padding:0px; margin-bottom:5px; margin-top:0px; height: 20px;}
#left ul li#one { display: block; background-image: url(back_menu.jpg); background-repeat: no-repeat; width: 146px; height: 20px; padding: 0; margin-bottom: 5px; color: #595959; text-align: left; font-weight: normal; font-size: 11px;}
#left ul li#one a { display: block; background-image: url(back_menu.jpg); background-repeat: no-repeat; width: 146px; height: 20px; padding: 0; color: #595959; text-align: left; font-weight: normal; font-size: 11px;}
#left ul li#one a:hover { display: block; background: #FFFFFF; width: 146px; height: 20px; padding: 0; color: #466BC2; text-align: left; font-weight: normal; font-size: 11px;}
#left a:active {color: #595959;}
body#sectionone #left li#one a { display: block; background-image: url(back_menu.jpg); background-repeat: no-repeat; width: 146px; height: 20px; padding: 0; color: #466BC2; text-align: left; font-weight: normal; font-size: 11px;}

</css>
La diferencia con tu css, es que identifiqué el li, si tienes varios es súper util, porque puedes cambiar las imags. de los botones según gusto, además que una vez lo apliqué para un menú horizontal y funcionó perfecto.


Saludos y espero haber sido de utilidad.
  #3 (permalink)  
Antiguo 06/05/2005, 17:36
Avatar de codigoflecha  
Fecha de Ingreso: noviembre-2004
Mensajes: 325
Antigüedad: 13 años, 1 mes
Puntos: 3
Gracias por tu completa respuesta Lyna, voy a probar la opción del li, a ver si me funciona, ya te comentaré los resultados, de todas formas, he pensado en otra opción que voy a probar, en fin , será cuestión de experimentar a fondo.
Un saludo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:19.