Foros del Web » Creando para Internet » CSS »

Problemas con DIVs en IE6

Estas en el tema de Problemas con DIVs en IE6 en el foro de CSS en Foros del Web. Buenos días, tengo una página html donde el contenido esta dentro de un div con estilos: DIV#content { HEIGHT: 100%; PADDING-BOTTOM: 100px; LEFT: 0px; PADDING-TOP: ...
  #1 (permalink)  
Antiguo 11/04/2008, 02:16
Avatar de JrPHP  
Fecha de Ingreso: diciembre-2007
Mensajes: 24
Antigüedad: 10 años
Puntos: 0
Problemas con DIVs en IE6

Buenos días,
tengo una página html donde el contenido esta dentro de un div con estilos:

DIV#content {

HEIGHT: 100%;
PADDING-BOTTOM: 100px;
LEFT: 0px;
PADDING-TOP: 14px;
BORDER:0px solid red;
WIDTH: 765px;
MARGIN: 0px auto;
MIN-HEIGHT: 100%;
}

Con Firefox e IE7 si se visualiza bien, la altura de la capa se adapta al contenido por el HEIGHT: 100%, pero cuando lo visualizo con el IE6, esa capa coge un tamaño X y no lo hace, no se adapta. También es que no controlo mucho las CSS... ¿Qué debo hacer?.

Gracias,
Un saludo.
  #2 (permalink)  
Antiguo 11/04/2008, 02:24
Avatar de PedroRodas  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz
Mensajes: 393
Antigüedad: 12 años
Puntos: 0
Re: Problemas con DIVs en IE6

No he probado tu codigo, pero asi por encima te digo que IE no soporta la propiedad min-height. Aqui tienes un ejemplo de min-height y su alternativa:

min-height equivalente para Internet Explorer:
div {
min-height:300px;
overflow: hidden;
height: expression(this.scrollHeight < 301? "300px" : "auto" );
}

Espero que te sirva, saludos
  #3 (permalink)  
Antiguo 11/04/2008, 02:49
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Problemas con DIVs en IE6

Hola, PedroRodas.

No sé cuál será el problema de JrPHP, pero habitualmente IE6 no necesita un min-height porque al contrario de la norma, cuando tienen algo dentro que le hace crecer simplemente crece, de manera que con marcar un height, ese alto es el mínimo, pero nunca el máximo.


JrPHP: si muestras el código completo quizá se pueda intentar averiguar qué ocurre.

Mikel.
  #4 (permalink)  
Antiguo 11/04/2008, 06:11
 
Fecha de Ingreso: marzo-2008
Mensajes: 80
Antigüedad: 9 años, 8 meses
Puntos: 0
Re: Problemas con DIVs en IE6

Creo que tu problema és el mimso que tengo yo,o parecido:

http://www.forosdelweb.com/f53/maldito-explorer-574869/

ver problema 2.

Aún sin solución...
  #5 (permalink)  
Antiguo 03/05/2008, 05:00
Avatar de JrPHP  
Fecha de Ingreso: diciembre-2007
Mensajes: 24
Antigüedad: 10 años
Puntos: 0
Re: Problemas con DIVs en IE6

Aquí está colgada la página: http://

Como podéis ver, la capa de abajo se monta sobre el scroll del navegador y el height no lo hace correctamente...
¿Qué debo hacer para que esto no ocurra y 100% height se cumpla adaptandose al contenido?

Última edición por JrPHP; 03/05/2008 a las 10:16
  #6 (permalink)  
Antiguo 03/05/2008, 05:08
Avatar de JrPHP  
Fecha de Ingreso: diciembre-2007
Mensajes: 24
Antigüedad: 10 años
Puntos: 0
Re: Problemas con DIVs en IE6

Cita:
Iniciado por Mikmoro Ver Mensaje
Hola, PedroRodas.

No sé cuál será el problema de JrPHP, pero habitualmente IE6 no necesita un min-height porque al contrario de la norma, cuando tienen algo dentro que le hace crecer simplemente crece, de manera que con marcar un height, ese alto es el mínimo, pero nunca el máximo.


JrPHP: si muestras el código completo quizá se pueda intentar averiguar qué ocurre.

Mikel.
El código fuente es:

HTML
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xml:lang="es" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1">
<link media="screen,print" href="css/style.css" type="text/css" rel="stylesheet">
<link media="handheld" href="css/style.css" type="text/css" rel="stylesheet">
<!--[if IE 6]>
<link rel="stylesheet" href="css/ie6.css" type="text/css">
<![endif]-->
<style type="text/css">@import url("css/style.css");</style>
</head>
<body>
<div class="content" id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eu tortor vel neque congue congue. Mauris quis erat. Vestibulum dictum ligula vel purus. Vivamus eget purus. Quisque nulla. Proin nonummy elit nec erat. Suspendisse molestie, orci sed molestie congue, erat pede consectetuer tellus, non ultricies turpis purus eget lorem. Fusce ut libero. Donec gravida euismod elit. Sed rhoncus. Vivamus nibh magna, scelerisque id, tempus in, auctor non, ipsum. Vivamus vitae metus id elit consectetuer vestibulum. Etiam augue. Ut velit urna, porta a, commodo vitae, blandit vitae, odio. Ut mi arcu, placerat eu, imperdiet non, molestie quis, elit. Phasellus ligula ipsum, venenatis sit amet, feugiat eget, blandit aliquam, risus. Donec mollis.<br><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eu tortor vel neque congue congue. Mauris quis erat. Vestibulum dictum ligula vel purus. Vivamus eget purus. Quisque nulla. Proin nonummy elit nec erat. Suspendisse molestie, orci sed molestie congue, erat pede consectetuer tellus, non ultricies turpis purus eget lorem. Fusce ut libero. Donec gravida euismod elit. Sed rhoncus. Vivamus nibh magna, scelerisque id, tempus in, auctor non, ipsum. Vivamus vitae metus id elit consectetuer vestibulum. Etiam augue. Ut velit urna, porta a, commodo vitae, blandit vitae, odio. Ut mi arcu, placerat eu, imperdiet non, molestie quis, elit. Phasellus ligula ipsum, venenatis sit amet, feugiat eget, blandit aliquam, risus. Donec mollis.<br><br>
</div>
<div class="footerwrap" id="footerwrap">
<div class="footer" id="footer">      
<div id="caja">
</div>	
</div>
</div>
</body>
</html>
CSS IE6
Código:
html { overflow: hidden; }
body { overflow: auto; height: 100%; }
html, body { height: 100%;}
div#content { height:100%; }
CSS STYLE
Código:
body, html
{
	color: #ffffff;
	background: #FF0000;
	text-align: justify;
	FONT-FAMILY: verdana;		
	font-size: 12px;
	margin: 0px;
	padding: 0px;	
}
body{ 
overflow : -moz-scrollbars-vertical;  
}
DIV#content {
	MIN-HEIGHT: 100%;
	HEIGHT: 100%;
	padding-bottom: 140px;
	left: 0px; 
	PADDING-TOP: 18px;
	border:0px solid red;
	width: 785px;
	MARGIN: 0px auto; 
}
DIV#footerwrap {
	LEFT: 0px; 
	WIDTH: 100%; 
	BOTTOM: 0px; 
	POSITION: absolute; 
	HEIGHT: 125px;
}
BODY > DIV#footerwrap {
	POSITION: fixed;
}
DIV#footer { 
	HEIGHT: 125px;
	width: 100%;
	BOTTOM: 0px;
}
#caja {
	position:absolute;
	LEFT: 0px;
	WIDTH: 100%; 
	BOTTOM: 0px; 
	HEIGHT: 115px;
	background: #0000FF;
	border:0px solid red;
}
  #7 (permalink)  
Antiguo 07/05/2008, 07:12
Avatar de JrPHP  
Fecha de Ingreso: diciembre-2007
Mensajes: 24
Antigüedad: 10 años
Puntos: 0
Re: Problemas con DIVs en IE6

¿Nadie conoce una solución? ...

Gracias.
  #8 (permalink)  
Antiguo 07/05/2008, 08:19
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Problemas con DIVs en IE6

No estoy muy seguro de por qué tienes las cosas hechas de esa manera, pero con lo que tienes ahora mismo de código, si eliminas los selectores especiales para IE, que no os necesitas, y pones este código en tu css, se ve exactamente igual en FF, IE6 e IE7:

Cita:
body, html {
color: #ffffff;
background: #FF0000;
text-align: justify;
FONT-FAMILY: verdana;
font-size: 12px;
margin: 0px;
padding: 0px;
}
body{
overflow : -moz-scrollbars-vertical;
}
div#content {
MIN-HEIGHT: 100%;
padding-bottom: 140px;
left: 0px;
PADDING-TOP: 18px;
border:0px solid red;
width: 785px;
MARGIN: 0px auto;
}
div#footerwrap {
LEFT: 0px;
WIDTH: 100%;
BOTTOM: 0px;
POSITION: absolute;
HEIGHT: 125px;
}
BODY > div#footerwrap {
POSITION: fixed;
}
div#footer {
HEIGHT: 125px;
width: 100%;
BOTTOM: 0px;
}
#caja {
position:absolute;
LEFT: 0px;
WIDTH: 100%;
BOTTOM: 0px;
HEIGHT: 115px;
background: #0000FF;
border:0px solid red;
}
Dos cosas más:

1.- No necesitas poner a cada etiqueta el id y la clase iguales; con uno de los dos basta (en tu caso sólo con los id, por cómo lo has puesto en la css)

2.- Tienes una cosa un poco rara: primero llamas a la hoja de estilo, luego llamas a las de IE6 y luego llamas con un import nuevamente a la hoja de estilo. Esto último te sobra.

Es decir: para que se vea igual lo que tienes ahora te bastaría con

Cita:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xml:lang="es" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1">
<link media="screen,print" href="css/style.css" type="text/css" rel="stylesheet">
<link media="handheld" href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eu tortor vel neque congue congue. Mauris quis erat. Vestibulum dictum ligula vel purus. Vivamus eget purus. Quisque nulla. Proin nonummy elit nec erat. Suspendisse molestie, orci sed molestie congue, erat pede consectetuer tellus, non ultricies turpis purus eget lorem. Fusce ut libero. Donec gravida euismod elit. Sed rhoncus. Vivamus nibh magna, scelerisque id, tempus in, auctor non, ipsum. Vivamus vitae metus id elit consectetuer vestibulum. Etiam augue. Ut velit urna, porta a, commodo vitae, blandit vitae, odio. Ut mi arcu, placerat eu, imperdiet non, molestie quis, elit. Phasellus ligula ipsum, venenatis sit amet, feugiat eget, blandit aliquam, risus. Donec mollis.<br><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eu tortor vel neque congue congue. Mauris quis erat. Vestibulum dictum ligula vel purus. Vivamus eget purus. Quisque nulla. Proin nonummy elit nec erat. Suspendisse molestie, orci sed molestie congue, erat pede consectetuer tellus, non ultricies turpis purus eget lorem. Fusce ut libero. Donec gravida euismod elit. Sed rhoncus. Vivamus nibh magna, scelerisque id, tempus in, auctor non, ipsum. Vivamus vitae metus id elit consectetuer vestibulum. Etiam augue. Ut velit urna, porta a, commodo vitae, blandit vitae, odio. Ut mi arcu, placerat eu, imperdiet non, molestie quis, elit. Phasellus ligula ipsum, venenatis sit amet, feugiat eget, blandit aliquam, risus. Donec mollis.<br><br>
</div>
<div id="footerwrap">
<div id="footer">
<div id="caja">
</div>
</div>
</div>
</body>
</html>
Mikel.
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 07:48.