Foros del Web » Creando para Internet » CSS »

Problema con div display: block en IE7

Estas en el tema de Problema con div display: block en IE7 en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/09/2010, 17:24
 
Fecha de Ingreso: febrero-2009
Mensajes: 202
Antigüedad: 15 años, 1 mes
Puntos: 3
Problema con div display: block en IE7

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!
  #2 (permalink)  
Antiguo 13/09/2010, 18:05
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 15 años, 8 meses
Puntos: 1532
Respuesta: Problema con div display: block en IE7

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>
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 14/09/2010, 13:13
 
Fecha de Ingreso: febrero-2009
Mensajes: 202
Antigüedad: 15 años, 1 mes
Puntos: 3
Respuesta: Problema con div display: block en IE7

No, disculpa fue un error de tipeo aquí en el foro, ese caracter no está en mi HTML...
  #4 (permalink)  
Antiguo 14/09/2010, 14:22
Avatar de catpaw  
Fecha de Ingreso: mayo-2010
Ubicación: xalapa
Mensajes: 856
Antigüedad: 13 años, 10 meses
Puntos: 23
Respuesta: Problema con div display: block en IE7

A mi me pasa igual :(
  #5 (permalink)  
Antiguo 14/09/2010, 14:41
Avatar de Willy_N  
Fecha de Ingreso: diciembre-2009
Ubicación: Cádiz
Mensajes: 334
Antigüedad: 14 años, 3 meses
Puntos: 18
Respuesta: Problema con div display: block en IE7

Dale un width al h1.
  #6 (permalink)  
Antiguo 14/09/2010, 17:59
Avatar de catpaw  
Fecha de Ingreso: mayo-2010
Ubicación: xalapa
Mensajes: 856
Antigüedad: 13 años, 10 meses
Puntos: 23
Respuesta: Problema con div display: block en IE7

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
  #7 (permalink)  
Antiguo 14/09/2010, 18:11
 
Fecha de Ingreso: julio-2007
Ubicación: Bolivia, Cochabamba
Mensajes: 104
Antigüedad: 16 años, 8 meses
Puntos: 5
Respuesta: Problema con div display: block en IE7

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

Con display:
Código CSS:
Ver original
  1. #header{
  2. padding: 10px;
  3. display: inline-block;
  4. background: #000;
  5. }
  6. #header h1 {
  7. float: left;
  8. }
  9. #header p {
  10. float: right;
  11. }

u otra, con float y width:
Código CSS:
Ver original
  1. #header{
  2. padding: 10px;
  3. float:left;
  4. width:100&#37;;
  5. background: #000;
  6. }
  7. #header h1 {
  8. float: left;
  9. }
  10. #header p {
  11. float: right;

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

Saludos.
__________________
Jorge A. Inturias C.
Tutoriales | Recursos | Ejemplos | www.disenopaginasweb.com
  #8 (permalink)  
Antiguo 16/09/2010, 17:57
Avatar de catpaw  
Fecha de Ingreso: mayo-2010
Ubicación: xalapa
Mensajes: 856
Antigüedad: 13 años, 10 meses
Puntos: 23
Respuesta: Problema con div display: block en IE7

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
  #9 (permalink)  
Antiguo 16/09/2010, 19:47
Avatar de matius  
Fecha de Ingreso: julio-2005
Ubicación: Mexico, D.F.
Mensajes: 554
Antigüedad: 18 años, 8 meses
Puntos: 2
Respuesta: Problema con div display: block en IE7

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

Etiquetas: display
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 11:16.