Problema con div display: block en IE7

Ozone · #1 (**permalink**) 13/09/2010, 17:24

Hola a todos,
estuve preparando este code, pero voy a IE y veo que el id header no me toma el display: block entonces solo muestra el fondo de color negro en una parte por el <br />

HTML:

Código HTML:

<div id='header'><h1>Título</h1> <p>Linea de texto | <Linea de texto 2 <br />Linea de texto 3</p></div>
<div id='contenido'>Contenido de la página</div>

CSS:

Código:

#header{
padding: 10px;
display: block;
overflow:hidden;
background: #000;
}
#header h1 {
float: left;
}
#header p {
float: right;
}

En Firefox y Chrome lo veo bien, pero en IE7 no... ¿Cómo podría solucionarlo?
Nunca me había pasado eso...

Saludos!

maycolalvarez · #2 (**permalink**) 13/09/2010, 18:05

corrige la sintaxis:

<div id='header'><h1>Título</h1> <p>Linea de texto | <Linea de texto 2 <br />Linea de texto 3</p></div>

Ozone · #3 (**permalink**) 14/09/2010, 13:13

No, disculpa fue un error de tipeo aquí en el foro, ese caracter no está en mi HTML...

catpaw · #4 (**permalink**) 14/09/2010, 14:22

A mi me pasa igual :(

Willy_N · #5 (**permalink**) 14/09/2010, 14:41

Dale un width al h1.

catpaw · #6 (**permalink**) 14/09/2010, 17:59

Willy_N ya probe como dices y no funca aunq ajuste el tamaño del h1 sigue mostrando uno debajo de otro no los despliega en linea

inturias · #7 (**permalink**) 14/09/2010, 18:11

Perdón, pero.. porque no usas otra alternativa. como:

Con display:

Código CSS:

Ver original#header{
padding: 10px;
display: inline-block;
background: #000;
}
#header h1 {
float: left;
}
#header p {
float: right;
}

u otra, con float y width:

Código CSS:

Ver original#header{
padding: 10px;
float:left;
width:100&#37;;
background: #000;
}
#header h1 {
float: left;
}
#header p {
float: right;

Solución creo que no es... pero sirve como alternativas.

Saludos.

catpaw · #8 (**permalink**) 16/09/2010, 17:57

ya encontre la solucion al problema con ie7 y el display block-inline, solo hay que agregar 2 lineas al codigo css:

.clase_ejemplo{
display: inline-block;
zoom: 1; /* IE7 (hasLayout)*/
*display: inline; /* IE7 */
}

y con esas dos lineas magicamente el ie7 detecta la propiedad...

Para mas informacion, por si les interesa les dejo estos 2 articulos:

http://www.anieto2k.com/2009/02/22/d...s-navegadores/
http://flipc.blogspot.com/2009/02/da...ine-block.html

matius · #9 (**permalink**) 16/09/2010, 19:47

O puedes probar de la forma clásica y cruteril:

Código HTML:

<html>
<head>
<title></title>
<style type="text/css">

#header{
color: #FFFFFF;
padding: 10px;
display: block;
overflow:hidden;
background: #000;
}
#header h1 {
float: left;
}
#header p {
float: right;
}

</style>

</head>

<body><div id='header'><h1>Título</h1> <p>Linea de texto | Linea de texto 2 <br />Linea de texto 3</p><div style="clear: both;"></div></div>

</body>
</html>

Esto funciona hasta IE5