Fondo de menu, en IE... mal.

[AbdelioR]

Buenas, tengo un menú emergente hecho en css. Cuando pasas por encima de cada opción, la imagen de fondo cambia.

Bien, en firefox cambia al instante, pero en IE antes de cambiar, se muestra el color de fondo, negro en mi caso, y queda bastante mal ya que antes de cambiar la imagen se ve el color negro durante medio segundo quizás y no es ese el efecto que busco.

Dejo el código aquí:

Código HTML:

/* menu */
.menusup {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(url/media/images/menu/fondo.gif); position:relative; border-bottom:1px solid #444;}
.menusup li {float:left;}
.menusup li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menusup li a b {float:left; display:block; padding:0 16px 0 8px;color:#aaa;}
.menusup li a:hover {color:#fff; background:#000 url(url/media/images/menu/cambio.gif);text-decoration:none;}
.menusup li a:hover b {color:#fff;background:url(url/media/images/menu/cambio.gif) no-repeat right top;text-decoration:none;}

#menu-categorias{
	/*background:#8F9090 url('url/media/images/menu/menu_categorias.gif') repeat-x;*/
	margin:0;
	margin-top:-2px;
	padding:0;
	list-style:none;
	border:1px solid #181A1C;
}
#menu-categorias a{
	background:#3A3C3D;
	font-weight:bold;
	width:150px;
	text-align:center;
	color:#aaa;
	padding:5px;
	display:block;
	border-bottom:1px solid #aaa;
}
#menu-categorias a:hover{
	background:#C98C2A;
	color:#fff;
	text-decoration:none;
}

El color que aparece imagino que es el ".menusup li a:hover {color:#fff;", pero si lo quito, la imagen de fondo tarda en salir también...

Si alguien ve donde puede estar el error se agradecerá enormemente

Un saludo.

[taar]

Tienes dos alternativas: 1) con js realizar una precarga de esa imagen (ese lapso de medio segundo que aparece en negro es el momento que IE esta cargando la imagen) y 2) realizar la carga en la regla .menusup li a con posiciones negativas para que no aparezca y luego en .menusup li a:hover cambiar las posiciones de esa imagen. Esta ultima tecnica es la que mas se utiliza; en este mismo foro si buscas al respecto encontraras muchas info.

[emiliodeg]

pasa que es una poruqeria ie, ademas el color q ves es el del background no el del color

lo q tienes q hacer es
tomar la imagen normal y la de hover y hacerlas una sola, una encima de la otra
osea vos tenes fondo.gif y cambio.gif, vas a tener q hacer una bg.gif del mismo ancho q las anteriores pero con el alto de la suma de ambas
ej: si ambas imagenes son de 20 de alto por 60 de ancho vas a tener q hacer unad e 40x60, pones arriba la imagen normal y abajo la del hover
entonces luego utilizas
te lo hago generico despus lo acomodas
a {height:25px; width:60px; background: transparent url(bg.gif) no-repeat left top;}
a:hover, a:active {background-position:left bottom;}

esto lo q va a hacer es cuando esta la imagen normalmente esta corrida para arriba pero de la mitad para abajo no se ve, ahora cuando pones el mouse encima el fondo se va a correr para arriba
quedando la visible parte del hover

saludos

[AbdelioR]

Gracias por las respuestas.

He probado ambos métodos, con precarga y con la técnica de la imagen combinada, y en los dos pasa lo mismo, el IE tarda un poco en mostrarla >_<.

Dejo el nuevo código por si sigue habiendo algun error :/.

Precarga:

Código HTML:

<script language="javascript">
<!--

var i;
var imagenes = new Array("crearCuenta02.png","crearCuenta01.png","cambio.gif");
var lista_imagenes = new Array();

function cargarimagenes(){

for(i in imagenes){
lista_imagenes[i] = new Image();
lista_imagenes[i].src = imagenes[i];

}
}

//-->
</script> 

Menú:

Código HTML:

.menusup {padding:0 0 0 32px; margin:0; list-style:none; height:35px; border-bottom:1px solid #444;}
.menusup li {float:left;}
.menusup li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;background: transparent url(url/media/images/menu/fondo_menu.gif) no-repeat left top;}
.menusup li a b {float:left; display:block; padding:0 16px 0 8px;color:#aaa;}
.menusup li a:hover {color:#fff; background-position:left bottom;text-decoration:none;}
.menusup li a:hover b {background-position:left bottom;text-decoration:none;}

[Mikmoro]

¿Podríamos ver el código html del menú donde aplicas la css?

Me gustaría probar algo al ver la configuración de tu css.

Otra cosa: ¿cuánto pesa la imagen de fondo que usas? ¿puedes ponerla también?

Mikel.

[AbdelioR]

Aquí te dejo el código del menú:

Código HTML:

<div>
<ul class="menusup">
<li><a href="web"><b>Inicio</b></a>
</li>
<li id="menu-cat"><a href="#"><b>Categorias</b></a>
</li>
<li><a href="web"><b>Mis themes</b></a>
</li>
<li><a href="web"><b>Enviar theme</b></a>
</li>
<li><a href="web"><b>Búsqueda</b></a>
</li>
<li><a href="web"><b>Foro</b></a>
</li>
<li><a href="web"><b>Contacto</b></a>
</li>
</ul>
	<ul id="menu-categorias">
		<li><a href="web">Abstractos</a></li>
		<li><a href="web">Animales</a></li>
		<li><a href="web">Anime</a></li>
		<li><a href="web">Juegos</a></li>
		<li><a href="web">Música</a></li>
		<li><a href="web">Naturaleza</a></li>
		<li><a href="web">Television</a></li>
		<li><a href="web">3D</a></li>
		<li><a href="web">PCs y consolas</a></li>
		<li style="border-bottom:0px"><a href="web">Otros</a></li>
	</ul>
</div>
<div>
<script type="text/javascript">
	at_attach("menu-cat", "menu-categorias", "hover", "y");
</script>
</div> 

La imagen de fondo que uso cuando paso el mouse por encima pesa 2'89 kb y se reduce a la medida que toque automáticamente, dependiendo de la longitud de la sección del menú. Es esta:





¿Lo dices porque algo te extrañe del código?

Un saludo.

[Mikmoro]

Sí, efectivamente. Me extrañaba que usaras los selectores ".menusup li a b" y ".menusup li a:hover b", lo que significaría que estabas usando esos elementos "b" en tu html.

A este respecto, creo que no deberías usar elementos de presentación html de esa forma, sobre todo teniendo en cuenta que el selector ".menusup li a " ya cuenta con un "font-weight:bold; ", y yo reemplazaría los elementos "b" por "span", tanto en los enlaces como en sus respectivas declaraciones css.

Desde luego para imágenes de ese tamaño no necesitas una precarga por javascript, y tampoco tengo muy claro para qué estás usando este código:

<script type="text/javascript">
at_attach("menu-cat", "menu-categorias", "hover", "y");
</script>

El problema del fondo negro, seguramente se te produce por este selector:

.menusup li a:hover {color:#fff; background:#000 url(cambio.gif);text-decoration:none;}

con lo que le estás diciendo que tu fondo sea negro y que luego ponga la imagen de fondo. Normalmente esto funciona mejor si lo cambias por "transparent", de esta manera:

.menusup li a:hover {color:#fff; background:transparent url(cambio.gif);text-decoration:none;}

Pruéba esos dos cambios y ya contarás.

Mikel.

[AbdelioR]

Hola Mikmoro,

he probado lo de transparent, que ya habia probado antes pero sin poner nada, y el problema es que donde antes mostaba el color, ahora no muestra nada, pero sigue tardando ese segundo en mostrar la imagen de fondo, es decir, se retrasa igual (en IE solo).

El script en JS que dices es el encargado de montar el menú emergente.

[Mikmoro]

Entonces es un problema de tu navegador, procesador o sistema operativo, porque yo no veo ese lapso en absoluto; funciona a la perfección, inmediato. Mira a ver si puedes verlo desde otra máquina.

Mikel.

[Mikmoro]

Bueno, quizá a mi no me falla porque no tengo la imagen inicial de fondo
url/media/images/menu/fondo.gif
Podría ser. ¿Puedes ponerla para que lo pruebe?

Mikel.

P.D.: Por cierto: ¿qué menú emergente? no veo ninguno, por eso me extrañaba.

[AbdelioR]

Aquí te dejo la imagen, si te sigue funcionando bien en IE tendré que probar desde otro pc pero me extrañaria :S



El menú emergente es lo que pone <ul id="menu-categorias">, esa lista es un menú emergente que aparece cuando pasas por encima de "categorias". Es la función "at_attach" la que lo monta.

[Mikmoro]

Lo sigo viendo perfectamente, así que será cosa de tu PC.

Lo del menú emergente, será cosa de algún script que no has mostrado, porque yo lo tengo todo el rato a la vista, y en el html o el css no hay nada que indique que no se deba mostrar. De ahí mi duda.

Mikel.

[AbdelioR]

Estamos hablando de IE 6 o IE 7? puede ser que sea que en IE 7 vaya bien, yo me referia a IE 6, perdón por no especificar.

Si si, el at_attach es una función externa que se encuentra en una libreria, por eso no puse el código.

[Mikmoro]

Sí, si, IE6, lo daba por descontado. Siempre es el problemático

Prueba a desactivar el javascript, a ver si te está afectando.

Mikel.

[AbdelioR]

Pues he probado en otro pc y lo muestra bien, que cosa más rara :/, no tengo un pc lento ni nada por el estilo, me extraña que pase esto.

Gracias por la ayuda mikmoro ^^