Foros del Web » Creando para Internet » HTML »

Comportamiento de un <div> en IE

Estas en el tema de Comportamiento de un <div> en IE en el foro de HTML en Foros del Web. Buenas de nuevo! A ver, os comento mi problema, estoy haciendo una página en html y aunque al principio había usado frames para poner arriba ...
  #1 (permalink)  
Antiguo 28/12/2006, 11:51
Avatar de jabi  
Fecha de Ingreso: noviembre-2006
Mensajes: 120
Antigüedad: 11 años, 1 mes
Puntos: 1
Comportamiento de un <div> en IE

Buenas de nuevo!

A ver, os comento mi problema, estoy haciendo una página en html y aunque al principio había usado frames para poner arriba del todo un título y después el resto de la página con otro color de fondo, por lo que he leído es mejor no usar frames, asi que me he decidido a usar divs.

He creado 2, uno llamado #cabecera, y otro #cuerpo y les he aplicado diferentes estilos a cada uno de ellos para conseguir visualmente lo mismo que tenía con los frames. El caso es que lo he conseguido, pero sólo lo veo bien con FF, con IE ocurre que el div #cabecera no llega a cubrir todo el ancho del navegador, se ve un trozo azul correspondiente al fondo que le he puesto al body, lo marco en la foto por si no me he explicado bien:



Pero ésto como ya he dicho no sucede en FF, donde no el blanco de fondo del div #cabecera llega a cubrir todo el ancho...

Os pongo los estilos empleados por si alguien me puede echar un cable:

Código:
body{
background-color: #99CCFF;    /*Color azul claro de fondo*/
margin: 0px 0px;
}

#cabecera{
margin: 0px 0px;
padding: 10px 0px;
background-color:white;
font-family: "CurlZ MT";
font-size: 40;
text-align: center;
font-weight: bold;
}

#cuerpo{
margin: 50px 15px;
padding: 0px 0px;
background-color: #99CCFF;
font-family: "Tahoma";
font-size: 16;
text-align: justify;
font-weight: bold;
color: black;
line-height: 140%;
}

/*A partir de aquí aplico estilos a otros elementos*/
p{
margin: 30px 0px;
background-color: yellow;
}

a{
color: blue;
text-decoration: none;
}
a:hover{
color:red;
text-decoration: underline;
}
Y aquí el HTML donde aplico los estilos:

Código:
<div id="cabecera">
Descubre Atenas
</div>

<div id="cuerpo">
Texto de la página...etc etc

<p align=center>
¡Disfruta de tu estancia en el sitio!
</p>

</div>
He probado a poner un valor negativo para margin-right pero aunque lo soluciona con IE aparece la barra de desplazamiento horizontal en FF, con lo que suena a chapuza ^^
__________________
No estoy aquí de vacaciones, creéme.
  #2 (permalink)  
Antiguo 29/12/2006, 18:03
Avatar de jabi  
Fecha de Ingreso: noviembre-2006
Mensajes: 120
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Comportamiento de un <div> en IE

He añadido a #cabecera lo siguiente:

Código:
width:637px;
Calculando a ojo el ancho del frame "derecho", y de esta forma se tapa el trozo azul que había indicado, pero estoy seguro de que hay alguna forma más "elegante" de solucionarlo, que no andar midiendo los píxeles (aunque me he ayudado de la Web Developer Toolbar de FF), además de que al hacer ésto ahora es en FF donde aparece un espacio azul, aunque mínimo, pasaría desapercibido...

De todas formas a ver si alguien sabe de alguna otra forma más correcta, porque ésto no me acaba de convencer... :S

Salu2!
__________________
No estoy aquí de vacaciones, creéme.
  #3 (permalink)  
Antiguo 29/12/2006, 18:21
Avatar de pablinff  
Fecha de Ingreso: diciembre-2005
Ubicación: Argentina
Mensajes: 383
Antigüedad: 12 años
Puntos: 7
Re: Comportamiento de un <div> en IE

probá con width:100%
Saludos!
__________________
I'm gonna start a revolution from my bed...
  #4 (permalink)  
Antiguo 29/12/2006, 18:36
Avatar de jabi  
Fecha de Ingreso: noviembre-2006
Mensajes: 120
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Comportamiento de un <div> en IE

Ya había probado esa opción y lamentablemente en IE sigue haciendo lo mismo :( Es como si dejara justo un espacio para la barra de desplazamiento vertical, ¿será ésto? =/

De cualquier modo gracias por tu interés pablinff
__________________
No estoy aquí de vacaciones, creéme.
  #5 (permalink)  
Antiguo 29/12/2006, 18:42
Avatar de pablinff  
Fecha de Ingreso: diciembre-2005
Ubicación: Argentina
Mensajes: 383
Antigüedad: 12 años
Puntos: 7
Re: Comportamiento de un <div> en IE

mmm... la verdad es que no se a mi tbn me solía pasar esto con IE, ya que programaba para Opera (que respeta los estandares).
Otra solución que puedes hacer es usar comentarios condicionales de IE
Así:
<!--[if IE]>
<style type="text/css">
#cabecera {width:637px;}
</style>
<![endif]-->
Ponés la medida que necesites para IE, y en esl estilo general lo dejás como estaba.
Saludos!
__________________
I'm gonna start a revolution from my bed...
  #6 (permalink)  
Antiguo 29/12/2006, 18:48
Avatar de jabi  
Fecha de Ingreso: noviembre-2006
Mensajes: 120
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Comportamiento de un <div> en IE

Los estilos los tengo definidos en un fichero .css aparte, ¿tendría que poner ahí esos comentarios condicionales? que por cierto, si son comentarios el navegador los ignora, ¿no? ¿o son comentarios especiales? Como ves no estoy muy puesto en HTML y CSS, aunque poco a poco voy aprendiendo... a ver si me puedes aclarar ésto y al menos lo puedo arreglar de esta forma.

Thanks de nuevo!
__________________
No estoy aquí de vacaciones, creéme.
  #7 (permalink)  
Antiguo 29/12/2006, 19:10
Avatar de jabi  
Fecha de Ingreso: noviembre-2006
Mensajes: 120
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Comportamiento de un <div> en IE

Bueno pues parece que ya lo he arreglado, igual es lo que me decías pero no te debí entender bien, al final buscando por ahí he tomado la decisión de crear otro .css igual al primero, pero añadiendo el "width:637px", y luego a la hora de cargar el archivo css en la página principal he cargado primero el "normal" y luego el otro utilizado los comentarios condicionales de IE que me comentabas.

Si realizaba primero la condición no sé que ocurría que todos los valores para margin y demás se sumaban, asi que probé a cargar primero la CSS normal y después la del width, y todo ok :)

Muchas gracias pablinff ;)
__________________
No estoy aquí de vacaciones, creéme.
  #8 (permalink)  
Antiguo 29/12/2006, 19:12
Avatar de pablinff  
Fecha de Ingreso: diciembre-2005
Ubicación: Argentina
Mensajes: 383
Antigüedad: 12 años
Puntos: 7
Re: Comportamiento de un <div> en IE

Cita:
#cuerpo{
margin: 50px 15px;
padding: 0px 0px;
background-color: #99CCFF;
font-family: "Tahoma";
font-size: 16;
text-align: justify;
font-weight: bold;
color: black;
line-height: 140%;
width:637px;
}
Este sería tu estilo en la hoja de estilos.
Bueno vos tenés que Css trabaja de forma jerárquica, entonces primero lee los archivos .Css, depués se fija en las etiquetas <style></style>, y por último se fija en el estilo determinado de algun tag
p.ej: <p style="estilos"></p>.
Entonces si yo defino #cabecera en el archivo.css, y luego defino nuevamente en la página entre los tags <head></head>
de esta forma
Cita:
<style type="text/css">
#cuerpo{
margin: 50px 15px;
padding: 0px 0px;
background-color: #99CCFF;
font-family: "Tahoma";
font-size: 16;
text-align: justify;
font-weight: bold;
color: black;
line-height: 140%;
width:637px;
}
</style>
El que me tomará como estilo será el que definí recién, bueno nosotros vamos a a provechar esto, pero con comentarios condicionales que fueron inventados por Microsoft y que solo funcionan para IE:
Cita:
<!--[if IE]>
<style type="text/css">
#cuerpo{
margin: 50px 15px;
padding: 0px 0px;
background-color: #99CCFF;
font-family: "Tahoma";
font-size: 16;
text-align: justify;
font-weight: bold;
color: black;
line-height: 140%;
width:637px; <--- esta linea la debes modificar para que se adecúe al tamaño de IE
}
</style>
<![endif]-->
Entonces de esta manera si ingresamos a la web desde Opera o FireFox, el estilo #cabecera lo tomará de tu archivo .css, en cambio si ingresamos con IE, el estilo #cabecera, será redefinido por el estilo #cabecera que insertamos entre comentarios condicionales que solo los lee IE.
Cabe aclarar que no se comportan como comentarios normales, sinó que es una forma de Ie de usar condicionales y que las páginas se puedan comportar de una cierta forma dinámica.
Espero haberte ayudado.
Saludos!
__________________
I'm gonna start a revolution from my bed...
  #9 (permalink)  
Antiguo 29/12/2006, 19:30
Avatar de jabi  
Fecha de Ingreso: noviembre-2006
Mensajes: 120
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Comportamiento de un <div> en IE

Realmente con ésto ya me ha quedado clarísimo, he probado ésta última forma y también me ha funcionado =)

Por ahora utilizaré la de 2 archivos css diferentes (cuerpo.css y cuerpo-ie.css) por el hecho de que necesito establecer otros estilos mediante las etiquetas <style></style>, concretamente para imágenes, que se comportarán de forma distinta en cada página... con lo que ya no podría introducir todo el <style> en el comentario condicional de IE.

Lo dicho, me has resuelto el problema, muchas muchas gracias

Saludos!
__________________
No estoy aquí de vacaciones, creéme.
  #10 (permalink)  
Antiguo 30/12/2006, 04:05
Avatar de pablinff  
Fecha de Ingreso: diciembre-2005
Ubicación: Argentina
Mensajes: 383
Antigüedad: 12 años
Puntos: 7
Re: Comportamiento de un <div> en IE

De nada!
Para eso estamos para ayudarnos!
Saludos!
__________________
I'm gonna start a revolution from my bed...
  #11 (permalink)  
Antiguo 31/12/2006, 07:25
Avatar de jabi  
Fecha de Ingreso: noviembre-2006
Mensajes: 120
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Comportamiento de un <div> en IE

Retomo el asunto porque aunque la solución de pablinff me ha servido de mucho, está el problema de las resoluciones, he probado a poner una resolución mayor (1024x768) y entonces vuelven a aparecer los huecos, para que veáis mejor lo que ocurre, he puesto el div #cabecera centrado con <center>, como véis no ocupa el ancho deseado y aparecen "huecos" a ambos lados... (sólo en IE, ya que FF ajusta perfectamente el div al ancho de la ventana):



A ver si alguien encuentra la solución a este quebradero de cabeza xD

Un saludo y gracias!
__________________
No estoy aquí de vacaciones, creéme.

Última edición por jabi; 31/12/2006 a las 09:44
  #12 (permalink)  
Antiguo 31/12/2006, 13:21
Avatar de pablinff  
Fecha de Ingreso: diciembre-2005
Ubicación: Argentina
Mensajes: 383
Antigüedad: 12 años
Puntos: 7
Re: Comportamiento de un <div> en IE

Bueno en este caso deberías de poner el ancho de la cabecera que sea igual al de el fondo, y por otro lado, no uses atributos como "align="center" " y mucho menos estiqetas como <center> puesto que estos no son estandares y además se pueden hacer con css.
Saludos!
Feliz año nuevo!
__________________
I'm gonna start a revolution from my bed...
  #13 (permalink)  
Antiguo 31/12/2006, 13:43
Avatar de jabi  
Fecha de Ingreso: noviembre-2006
Mensajes: 120
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Comportamiento de un <div> en IE

Gracias otra vez pablinff por tu ayuda, pero no sabría cómo indicarle al div #cabecera que tenga una anchura igual a la del fondo (perdón por mi ignorancia jeje)

Sobre lo de la etiqueta <center> en este caso la he colocado para que se viera mejor el problema, gracias a todos los que me ayudáis la verdad es que ya no las uso

Un saludo y FELIZ AÑO NUEVO!
__________________
No estoy aquí de vacaciones, creéme.
  #14 (permalink)  
Antiguo 31/12/2006, 13:52
Avatar de jabi  
Fecha de Ingreso: noviembre-2006
Mensajes: 120
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Comportamiento de un <div> en IE

Con tanta pruebecita yo sólo me he liado, realmente no es tan grande el hueco que muestra IE, en este caso era debido por el fichero .css que hice con width:637px; de tal forma que ahora con la resolución mayor aparecían semejantes espacios x'D

Lo que haré finalmente será quitar este archivo .css y aunque quede un pequeño espacio, será el mismo para todas las resoluciones, y curiosamente el tamaño es el de un scrollbar, ¿se podría desactivar para IE que aparezca el scrollbar vertical? igual así desaparece el dichoso espacio finalmente...

--EDITO--
Efectivamente el espacio aparecía en IE por el scrollbar, lo he desactivado con scroll="no" en el body, y fin del "problema"
__________________
No estoy aquí de vacaciones, creéme.

Última edición por jabi; 01/01/2007 a las 09:28
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 03:38.