Problema visualización imagen

arijape · 4 Abr 2009, 02:17 · Solicitar retirada

Hola, quiero insertar una imagen, un gif animado en mi página, y veo que se visualiza de forma diferente en firefox y en IE. En firefox la imagen se mueve detrás del texto y me gusta así, pero en IE el texto se desplaza hacia abajo y la imagen queda por arriba.
¿Cómo solucionar esta diferencia para que se vea en IE la imagen también bajo el texto, como en el firefox?

Esta es la dirección para verla, la he subido con el FTP:
http://librosdelared.atwebpages.com

Los códigos html y css son estos:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Prueba2</title>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head>
<body>

<div id="global">

<div id="cabecera">
<div id="cabecera1">Contacto</div>
<div id="cabecera2">k</div>
<div id="cabecera3">
<div id="imgcabecera3">[contenido no disponible]
</div>
</div>

<h4>Esta es una página de prueba para ver la imagen animada detrás del texto en el firefox y encima en el IE.
Esta es una página de prueba para ver la imagen animada detrás del texto en el firefox y encima en el IE.
</h4>
<h4>¿Por qué ocurre esto?</h4></p>

</div>

</div>

</body>
</html>

* {text-indent:0px ;margin:0px ; padding:0px ; border:0px;list-style:none}
body {background-color: #FFF8DC ;text-align: center}
#global {width:800px ; margin: 0px auto}
#cabecera {background-color: white;float:left;widht:800px; height:250px; overflow : hidden}
#cabecera1 {background-color: red;float:left;width:260px; height:55px;margin-top:5px; margin-left:4px}
#cabecera2 {background-color: yellow;float:left ;width:260px; height:55px; margin-top:5px; margin-left:4px}
#cabecera3 {background-color: orange;float:left;width:260px ; height:80px; margin-top:5px; margin-left:4px}
#imgcabecera3 {float:left ; padding-top:40px;}
h4 {color:orange ;font-family: verdana; font-weight: bold ; text-decoration: none ; text-align: left}

Raulyure · 4 Abr 2009, 02:30 · Solicitar retirada

arijape escribió:Hola, quiero insertar una imagen, un gif animado en mi página, y veo que se visualiza de forma diferente en firefox y en IE. En firefox la imagen se mueve detrás del texto y me gusta así, pero en IE el texto se desplaza hacia abajo y la imagen queda por arriba.
¿Cómo solucionar esta diferencia para que se vea en IE la imagen también bajo el texto, como en el firefox?

Esta es la dirección para verla, la he subido con el FTP:
http://librosdelared.atwebpages.com

Los códigos html y css son estos:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Prueba2</title>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head>
<body>

<div id="global">

<div id="cabecera">
<div id="cabecera1">Contacto</div>
<div id="cabecera2">k</div>
<div id="cabecera3">
<div id="imgcabecera3">[contenido no disponible]
</div>
</div>

<h4>Esta es una página de prueba para ver la imagen animada detrás del texto en el firefox y encima en el IE.
Esta es una página de prueba para ver la imagen animada detrás del texto en el firefox y encima en el IE.
</h4>
<h4>¿Por qué ocurre esto?</h4></p>

</div>

</div>

</body>
</html>

* {text-indent:0px ;margin:0px ; padding:0px ; border:0px;list-style:none}
body {background-color: #FFF8DC ;text-align: center}
#global {width:800px ; margin: 0px auto}
#cabecera {background-color: white;float:left;widht:800px; height:250px; overflow : hidden}
#cabecera1 {background-color: red;float:left;width:260px; height:55px;margin-top:5px; margin-left:4px}
#cabecera2 {background-color: yellow;float:left ;width:260px; height:55px; margin-top:5px; margin-left:4px}
#cabecera3 {background-color: orange;float:left;width:260px ; height:80px; margin-top:5px; margin-left:4px}
#imgcabecera3 {float:left ; padding-top:40px;}
h4 {color:orange ;font-family: verdana; font-weight: bold ; text-decoration: none ; text-align: left}

Hola:

Así rápidamente veo que su capa cabecera usted le ha puesto una altura de 250px pero después a otras capas que van dentro (me imagino) les ha puesto una altura de 260px, creo que debe revisar un poco esas cosas..
En una caja que mide de alto 250 no funciona bien poner otras cajas que midan de alto 260

Saludos

arijape · 4 Abr 2009, 02:39 · Solicitar retirada

Creo que lo ha leido mal. La altura de las capas que van dentro tienen 55px y 80px, lo de los 260 es el ancho, que cabe bien en el ancho de la capa cabecera que es de 800px.
Saludos.

Raulyure · 4 Abr 2009, 02:58 · Solicitar retirada

arijape escribió:Creo que lo ha leido mal. La altura de las capas que van dentro tienen 55px y 80px, lo de los 260 es el ancho, que cabe bien en el ancho de la capa cabecera que es de 800px.
Saludos.

Hola:

Tiene toda la razón, me he confundido con la lectura. Le pido disculpas
veré con más detenimiento cual puede ser el problema, (debe ya ser la hora, es que veo una cama que me llama)

Saludos

arijape · 4 Abr 2009, 18:36 · Solicitar retirada

No hay de qué. Yo también me equivoco muchas veces. En realidad todos lo hacemos. Es normal. Lo importante es respetarse mutuamente y aprender de los errores.
Saludos :D

Raulyure · 14 Abr 2009, 05:36 · Solicitar retirada

arijape escribió:No hay de qué. Yo también me equivoco muchas veces. En realidad todos lo hacemos. Es normal. Lo importante es respetarse mutuamente y aprender de los errores.
Saludos :D

Hola:

No se si ya arregló el problema, pero

Realmente no me ubico muy bien de lo que desea
Por ejemplo usted tiene creada una capa cabecera3 y dentro de esa capa cabecera3 usted tiene creada otra capa que es la que tiene la imagen gif, por tanto cuando usted ponga la imagen gif dentro de esa capa cabecera3 esta (la imagen) le quedará dentro, claro que si a la imagen usted le pone (o a la capa imgcabecera3) un padding 40 , la imagen (junto con esa capa imgcabecera3) se pondrá a 40 píxeles hacia abajo de la parte superior de esa capa cabecera3, y eso hará que la imagen se desplace hacia abajo y se salga de la capa cabecera3 y si se sale hacia abajo, por lógica desplazará a cualquier cosa que se encuentre por el camino.

Si en vez de ponerle un padding de 40, le pone un padding de 10, la imagen se mantiene dentro de la capa imgcabecera3 porque la capa se mantiene dentro de la otra capa (cabecera3).

Todo eso es porque usted ha puesto la capa que lleva la imagen , dentro de la capa cabecera3.

No estoy muy seguro si a entendido bien mi explicación

Ya nos dirá

Saludos