Problemas con DIVs en IE6

JrPHP · #1 (**permalink**) 11/04/2008, 01:16

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.

PedroRodas · #2 (**permalink**) 11/04/2008, 01:24

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

Mikmoro · #3 (**permalink**) 11/04/2008, 01:49

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.

Bram · #4 (**permalink**) 11/04/2008, 05:11

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...

JrPHP · #5 (**permalink**) 03/05/2008, 04:00

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?

JrPHP · #6 (**permalink**) 03/05/2008, 04:08

Cita:

Iniciado por Mikmoro

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;
}

JrPHP · #7 (**permalink**) 07/05/2008, 06:12

¿Nadie conoce una solución? ...

Gracias.

Mikmoro · #8 (**permalink**) 07/05/2008, 07:19

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.