Div no se muestra como deberia en IE :/

kaninox · #1 (**permalink**) 25/09/2008, 10:28

Holas gente en esta pagina : http://www.locualo.net/programacion/.../00000024.aspx

ponen un ejemplo del tipico cargando datos, como lo hace gmail, en firefox me va delujo pero en el famoso IE - 7 en mi caso se muestra a lo largo, funcionalmente funciona desaparece al cargar la web pero no logro hacer que se vea como se me ve en firefox, a la derecha sobre la web al desplazarme, este queda arriba y se quita cuando se completa la carga....

solucion?????

edito : he visto que si pongo position : absolute me va pero no se fixa :P
como puedo poner ambas :/

ssclamp · #2 (**permalink**) 27/09/2008, 19:21

Hola kaninox

Lo que ocurre con ie6 es que no interpreta el valor fixed.

Copia y prueba la siguiente página y verás que de esta forma funciona correctamente en ie6, ie7, firefox y opera.

(El contenido del iframe es una página de carga lenta -la portada de un periódico- para poder testar el javascript)

Saludos

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ejemplo</title>
<script language="javascript" type="text/javascript">
//<![CDATA[
function Oculta() {
document.getElementById("cargando").style.display = "none";
}
//]]>
</script>
<style type="text/css">
#cargando {
	position: absolute;
	top: 3px;
	right: 3px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	padding: 4px;
	background-color:#CC0000;
	color:#FFFFFF;
	font-weight:bold;
}
</style>
</head>
<body onload="Oculta()">
<div id="cargando">Cargando...</div>
<!-- esta carga del iframe es para poder testar la precarga-->
<center>
<iframe name="muestra" src="http://www.elpais.com" height="450" width="600" border="0" frameborder="0"></iframe>
</center>
</body>
</html>

ssclamp · #3 (**permalink**) 27/09/2008, 19:46

Hola de nuevo, releyendo tu post no había entendido bien el que la leyenda se quedara fija aunque se hiciera scroll.

Aquí te dejo eso arreglado. Funciona en ie6 (sí también en el 6

), ie7, ff y opera.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ejemplo</title>
<script language="javascript" type="text/javascript">
//<![CDATA[
function Oculta() {
document.getElementById("cargando").style.display = "none";
}
//]]>
</script>

<style>
#cargando{ 
	position:fixed; right:3px; top:3px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	background-color:#CC0000;
	color:#FFFFFF;
	font-weight:bold;
	padding: 3px;
}	
</style>
<!--[if lt IE 7]> 
<style>
#cargando{ 
	position:absolute;
	top:0;
	top: expression((ignorar = 3+document.documentElement.scrollTop+document.body.scrollTop) + 'px' );
}
</style>
<![endif]-->


</head>
<body onload="Oculta()">
<div id="cargando">Cargando...</div>
<!-- esta carga del iframe es para poder testar la precarga-->
<center>
<iframe name="muestra" src="http://www.elpais.com" height="450" width="600" border="0" frameborder="0"></iframe>
</center>
<br />
<!-- este divisor es para poder hacer scroll y probar la fijación de la leyenda de precarga -->
<div style="width: 100%; height: 1000px" align="center">Esta capa es para poder hacer scroll</div>
</body>
</html>

kaninox · #4 (**permalink**) 01/10/2008, 18:27

pues si habia visto esa solucion :/ pero tampoco va bien en IE...
pero les dejo la solucion :D es solo modificar la CSS un poco

Código:

#cargandowait {
padding-left:2px; padding-right:2px; background-color:#CC0000; color:#FFFFFF; font-weight:bold;
left:3px; top:3px; position:fixed; _position:absolute; _top:expression(eval(document.body.scrollTop));
}

ssclamp · #5 (**permalink**) 02/10/2008, 08:09

Hola kaninox

El problema es que tu solución no funciona en ie6 -al hacer scroll el div se desplaza- (el navegador más usado actualmente).

He vuelto a comprobar mi propuesta y FUNCIONA perfectamente en ie6, ie7, ff y opera. No comprendo porqué dices que no te funciona en iexplorer.

Saludos

kaninox · #6 (**permalink**) 02/10/2008, 15:04

mmmm a mi no me anduvo vamos a probarla nuevamente se agradece el interes :D