Problemas de muestra de imágenes en varios navegadores

[tistklehoff]

Hola chavales.

Aquí estoy otra vez para comentaros una cosa que, de momento, me está pareciendo cosa de magia:

Veréis. Tengo una aplicación a la que quiero 'paralizar' para evitar que se pulsen más botones mientras se está ejecutando una consulta a un servicio externo (no lleva ajax ni nada de eso).

Para ello, tengo un div oculto (display: none). Para hacer un intento de 'efecto windows', dentro de ese div tengo otros dos, uno semitransparente que ocupa toda la pantalla y otro sobre éste, opaco, con un mensaje y una imágen de carga.

Pues bien, aquí viene la cuestión.

Resulta que el efecto de la capa gris semitransparente hay veces que no se ve. Esto me ocurre con más frecuencia en IE-6, a pesar de que he incluído el parámetro filter en la css. En IE 7 y 8 parece funcionar bien.

Más cosas. La imágen de carga es una de esas de ajax-loader. Un .gif animado bastante ligero, pero en windows no se mueve nada de nada y en Safari 3 Win directamente, muchas veces no se carga la imágen.
Sin embargo, en firefox no hay problema. He visto que hay algún tipo de problema para la carga de imágenes en safari, incluso varios mensajes en este foro, pero no consigo encontrar la respuesta a lo que me pasa.

Por favor, alguno podríais indicarme la forma correcta para la transparencia cross-browser, si tengo que poner más cosas aparte del opacity y el filter? (He visto algo para IE 7 y 8, algo como -ms-filter, pero no me coge la regla css si la pongo y sin ella me está funcionando para esos dos navegadores).

Para no ensuciar mucho, os indico sólo el código de este div que empieza oculto y se desoculta con un javascript:

Código:

		<div style="display: none; cursor: progress; z-index: 97; position: fixed; top: 0pt; left: 0pt; width: 100%; height: 100%;" id="cargando">
		
			<div class="translucido"> </div>
		
			<div class="aviso" style="z-index: 99; position: absolute; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; left: 200px; top: 200px;">
				CARGANDO...<br/><br/>Debido al volumen de la información a tratar esta opción puede tardar unos minutos.<br/><br/>Por favor, espere.
			</div>
		
		</div>

y la parte de la css:

Código:

.aviso{
	background: #FFFFE1 url(../images/info_icon.gif) no-repeat 10px center;
	padding: 10px 10px 10px 65px;
	width: 50%;
	margin: 0 auto;
}

#cargando .aviso {
	background-image: url(../images/ajax-loader.gif);
}

La imágen que no se ve es ajax-loader, y sólo en el caso de este div, en los div que tengo de aviso en otros puntos de la web, con su imágen original (info_icon, no hay ningún problema y se muestra todo correctamente.


Por si sirve de algo, el código que muestra todo es el siguiente:

Código:

<a href="servicio" onclick="javascript:document.getElementById('cargando').style.display='block';">
servicio</a>

Espero podais ayudarme, tengo a mi jefe pegado a mi desde ayer...
;)


Un saludo a todos y muchas gracias.