Tengo dudas sobre la utilización de etiquetas html para formateo por pantalla y las css
Hola experto,
necesito que me eches una mano a un problema que tengo desde hace tiempo y la verdad me tiene bastante frustrado ya
que no encuentro una lógica y no hay nada peor en esto de programación web que
no encontrarla. Te explico, es una tontería el problema pero algo raro de comprender,
intentare explicarlo lo mejor posible;
Como se sabe
La etiqueta <p>etiqueta p</p> crea un espacio en blanco superior (top)
Y otro inferior (bottom) .Por ejemplo, supongamos que tenemos una etiqueta
<div> sin ningún estilo, bueno solo con un color de fondo para que veas
el efecto y dentro de ella un párrafo<p>, pues si tu abres el navegador
ie 8 o 9 o firefox ultimas versiones, ese div ocupara de alto exactamente lo
que ocupa el párrafo, ni un poco más. Si tu ahora a ese div le das por ejemplo
un position absoluto, o overflow,float, o incluso border 1 y vuelves a probar
esto con esos mismos navegadores ahora el div contenedor ocupara el alto de los
contenidos + esos espacios en blanco, con algunas propiedades css siempre el
div contenedor se abre respetando esos espacio en blanco, si por ejemplo haces
esto mismo con Explorer 7 nunca deja los espacios en blanco,pongas lo que le
pongas.La verdad que he probado de todo y leído y no veo una lógica a esto, por
favor seria de gran ayuda una explicación ya que a veces cuando estoy
maquetando me encuentro con estas cosas y no las entiendo.
Te dejo aquí unos ejemplos para que veas lo
que quiero dar a entender mejor, he leído que el estándar dice que los
elementos de párrafo siempre dejaran un espacio en blanco posterior y anterior.
Pero según que casos como te puse no los hace.
Ejemplos
<!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>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Documento
sin título</title>
</head>
<body>
<div style="background-color:#90F; width:
960px;">
<p>En "La boda de mi mejor
amiga" conoceremos a Annie, cuya vida está hecha un asco. Cuando se entera de
que su mejor amiga, Lilian, va a casarse, se empeña en ser su primera dama de
honor. Sólo tiene una oportunidad para que todo salga bien, y decide
demostrarle a Lilian y a las otras damas de honor hasta dónde es capaz de
llegar por amor. (SIN NINGUN ATRIBUTO)</p>
</div>
<div style="background-color:#00C; width:
960px; position: absolute; left: -32px; top: 340px;">
<p>En "La boda de mi mejor
amiga" conoceremos a Annie, cuya vida está hecha un asco. Cuando se entera
de que su mejor amiga, Lilian, va a casarse, se empeña en ser su primera dama
de honor. Sólo tiene una oportunidad para que todo salga bien, y decide
demostrarle a Lilian y a las otras damas de honor hasta dónde es capaz de
llegar por amor.(CON POSITION ABSOLUTE)</p>
</div>
<div style="background-color:#CF0; width:
960px; overflow: hidden;">
<p>En "La boda de mi mejor
amiga" conoceremos a Annie, cuya vida está hecha un asco. Cuando se entera
de que su mejor amiga, Lilian, va a casarse, se empeña en ser su primera dama
de honor. Sólo tiene una oportunidad para que todo salga bien, y decide
demostrarle a Lilian y a las otras damas de honor hasta dónde es capaz de
llegar por amor.(CON OVERFLOW)</p>
</div>
</body>
</html>:
necesito que me eches una mano a un problema que tengo desde hace tiempo y la verdad me tiene bastante frustrado ya
que no encuentro una lógica y no hay nada peor en esto de programación web que
no encontrarla. Te explico, es una tontería el problema pero algo raro de comprender,
intentare explicarlo lo mejor posible;
Como se sabe
La etiqueta <p>etiqueta p</p> crea un espacio en blanco superior (top)
Y otro inferior (bottom) .Por ejemplo, supongamos que tenemos una etiqueta
<div> sin ningún estilo, bueno solo con un color de fondo para que veas
el efecto y dentro de ella un párrafo<p>, pues si tu abres el navegador
ie 8 o 9 o firefox ultimas versiones, ese div ocupara de alto exactamente lo
que ocupa el párrafo, ni un poco más. Si tu ahora a ese div le das por ejemplo
un position absoluto, o overflow,float, o incluso border 1 y vuelves a probar
esto con esos mismos navegadores ahora el div contenedor ocupara el alto de los
contenidos + esos espacios en blanco, con algunas propiedades css siempre el
div contenedor se abre respetando esos espacio en blanco, si por ejemplo haces
esto mismo con Explorer 7 nunca deja los espacios en blanco,pongas lo que le
pongas.La verdad que he probado de todo y leído y no veo una lógica a esto, por
favor seria de gran ayuda una explicación ya que a veces cuando estoy
maquetando me encuentro con estas cosas y no las entiendo.
Te dejo aquí unos ejemplos para que veas lo
que quiero dar a entender mejor, he leído que el estándar dice que los
elementos de párrafo siempre dejaran un espacio en blanco posterior y anterior.
Pero según que casos como te puse no los hace.
Ejemplos
<!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>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Documento
sin título</title>
</head>
<body>
<div style="background-color:#90F; width:
960px;">
<p>En "La boda de mi mejor
amiga" conoceremos a Annie, cuya vida está hecha un asco. Cuando se entera de
que su mejor amiga, Lilian, va a casarse, se empeña en ser su primera dama de
honor. Sólo tiene una oportunidad para que todo salga bien, y decide
demostrarle a Lilian y a las otras damas de honor hasta dónde es capaz de
llegar por amor. (SIN NINGUN ATRIBUTO)</p>
</div>
<div style="background-color:#00C; width:
960px; position: absolute; left: -32px; top: 340px;">
<p>En "La boda de mi mejor
amiga" conoceremos a Annie, cuya vida está hecha un asco. Cuando se entera
de que su mejor amiga, Lilian, va a casarse, se empeña en ser su primera dama
de honor. Sólo tiene una oportunidad para que todo salga bien, y decide
demostrarle a Lilian y a las otras damas de honor hasta dónde es capaz de
llegar por amor.(CON POSITION ABSOLUTE)</p>
</div>
<div style="background-color:#CF0; width:
960px; overflow: hidden;">
<p>En "La boda de mi mejor
amiga" conoceremos a Annie, cuya vida está hecha un asco. Cuando se entera
de que su mejor amiga, Lilian, va a casarse, se empeña en ser su primera dama
de honor. Sólo tiene una oportunidad para que todo salga bien, y decide
demostrarle a Lilian y a las otras damas de honor hasta dónde es capaz de
llegar por amor.(CON OVERFLOW)</p>
</div>
</body>
</html>:
1 respuesta
Respuesta de Victor Portero
La cosa es que cada navegador interpreta un poco como le da la gana elñ CSS, por ejemplo si tu le pones un "border" a una tabla, I" lo interpretara diferente a Firefox, sobre todo en las anteriores versiones (IE6 y 7)
Por eso hay que intentar maquetar de una manera que esas cosas se noten lo menos posible.
En el caso que me has pasado, sobre todo te ocurre por el "position"
¿En realidad que es lo que quieres conseguir?
¿Entenderlo o hacerlo bien para todas las webs?
Por eso hay que intentar maquetar de una manera que esas cosas se noten lo menos posible.
En el caso que me has pasado, sobre todo te ocurre por el "position"
¿En realidad que es lo que quieres conseguir?
¿Entenderlo o hacerlo bien para todas las webs?
Hola de nuevo, lo que quiero es entenderlo, porque la verdad no entiendo si cada etiqueta <p> pone un espacio en blanco por encima y por debajo, porque cuando esta etiqueta está metida en un div, si ese div no tiene ni position, float, overflow e incluso si le pones border 1px ese heigth no se adapta al contenido respetando esos espacios. En el momento que le pones algunas de estas propiedades crece y se adapta, ¿tu pones que cada navegador interpreta como quiere?, si eso lo sé, lo que me parece raro es que es todas las versiones recientes de los nuevos navegadores hace exactamente lo mismo. Menos en ie 6 y 7 que nunca crece pongas lo que le pongas.Lo que quiero sabes es porque crece en los navegadores recientes según que propiedad tenga ese di contenedor. No debería respetar siempre esos espacios en blanco.
Cuando me pones que quiero conseguir, en hacerlo no hay problema porque le doy por ejemplo un marge top 10px y en todos se verán igual. Lo que me confunde es eso, respeta esos espacio según lo que le pongas.
Cuando me pones que quiero conseguir, en hacerlo no hay problema porque le doy por ejemplo un marge top 10px y en todos se verán igual. Lo que me confunde es eso, respeta esos espacio según lo que le pongas.
Una cosa es que existan estándares, y otra muy distinta que los navegadores los respeten. IE6 y 7 no respetan casi ningún estándar (IE7 aun, pero 6 no respeta nada).
Ahora tienes que adaptarse (los nuevos) porque en ello radica su competitividad, pero antes como IE era el más usado, digamos que podía hacer lo que el quisiera.
Yo lo que suelo hacer es: un CSS compartido para todos, y luego busco código que me ayude a arreglar la maquetación en IE7.
Sobre IE6 yo ni siquiera miro como queda, solo me preocupo de IE7 para delante y los demás navegadores en su ultima y anteultima version.
Ahora tienes que adaptarse (los nuevos) porque en ello radica su competitividad, pero antes como IE era el más usado, digamos que podía hacer lo que el quisiera.
Yo lo que suelo hacer es: un CSS compartido para todos, y luego busco código que me ayude a arreglar la maquetación en IE7.
Sobre IE6 yo ni siquiera miro como queda, solo me preocupo de IE7 para delante y los demás navegadores en su ultima y anteultima version.
