problemas div ie6

[robertobersan]

Buenas tardes.

Tengo un problemilla con Internet Explorer 6 y los div.

En el diseño de la pagina tengo 5 div uno para la cabecera y otro para el pie ambos fijos y otros tres horizontales, el del lado derecho y el del lado izquierdo fijos y el centro auto ajustable al espacio que tengo entre los dos de los laterales, estos de los laterales ya he conseguido que quede bien.

El problema es que cuando pongo un color al fondo del div central no coge el espacio total que tengo entre los dos divs. También cuando pongo un texto con pocas palabras como “buenos dias” solo se pinta el espacio que comprende las letras.

En breve, me gustaría que el div central tuviese un fondo de un color y no lo consigo. Espero que me podáis ayudar.

P.D.- Sin embargo en firefox y en ie7 pongo el fondo y a la hora de visualizarlo si que me toma los valores que le pongo.

Muchas gracias

[Calizman]

Saludos!!

Realmente no entiendo mucho tu problema... por lo que mejor pones tu codigo y ya con esa base te ayudamos...

[robertobersan]

codigo css

body{margin:0}/* for ie mac*/
/* commented backslash hack v2 \*/
html, body{height:100%;padding:0}
* html, * html body{
overflow:hidden;
padding:50px 0;
margin:-50px 0;
padd\ing:0;
ma\rgin:0;
}
* html #outer {
overflow:auto;
height:99.9%;
voice-family: "\"}\""; voice-family:inherit;
}
* html #contain-all{
position:absolute;
overflow-y:scroll;
width:100%;
height:100%;
z-index:1;
}
/* end hack */

#top-bar{
position:absolute;/* ie6 will treat this as fixed because of a bug where overflow:auto is set on a parent */
top:0px;
left:0px;
height:133px;
width:100%;
margin:0;
padding:0;
z-index:999;
overflow:hidden;
}
#topbar-inner{
height:133px;
background-color:#FFFFFF;
}
#footer-inner {
height:20px;
background-color:#7C1D20;
}
/* mac hide - reduce page to allow the scrollbar to remain visible \*/
* html #topbar-inner,* html #footer-inner {margin-right:17px;}
/* end hide*/

#footer{
position:absolute;
bottom:0;
width:100%;
height:20px;
z-index:999;
}
.spacer {height:20px}/* same height as footer/header to preserve space*/
p{margin-top:0}
html>body #top-bar,html>body #footer{position:fixed}/* for moz/opera and others*/




/*formato cabecero*/
.subheader1{
position:relative;
width:100%;
}

.logo{
position:absolute;
top:0px; left:0px;
width:400px;
}
.imagenlogo{
/*margin-right:180px;*/
top:-20px;
height:57px;
margin-left:100px;
background-image:url(../images/imgSuperior.jpg); background-position:right; background-repeat:no-repeat;
}
.solapa{
background-image:url(../images/imgSolapa.gif); background-position:left; background-repeat:no-repeat;
height:20px;
background-color:#7C1D20;
}
.subheader2{
position:absolute;
top:77px;
width:100%; height:56px;
}

.imagewrapper{
height:53px;
background-image: url("../images/header/image000.jpg"); background-position:left; background-repeat:repeat-x;
}
.lineacabeza{
background-color:#7C1D20;
height:3px;
width:100%;
}

/*div parte izquierda*/
#izquierda{
position:absolute;
top:133px;
float:left;
margin-left:10px;
margin-right:10px;
background-color:#EBEBEB;
padding-top:20px;
padding-bottom:20px;
width:190px;
display:inline;
}
.leftmenu ul{
list-style-type:none;
padding-left:10px;
padding-right:10px;

}.leftmenu ul li{
font-size:small;
font-family: "Arial Narrow";
font-weight:bold;
line-height:18px;
border-bottom: 1px solid #888888;
margin-top:4px;
padding-bottom:2px;
}

.leftmenu ul li a {
color:#878785;
text-decoration:none;
}

.icoBarra{
vertical-align:bottom;
margin-bottom:3px;
margin-right:7px;
}

/*div parte central*/
#centro{
position:absolute;
top:133px;
left:200px;
background:#CC9900;
right:200px;
width:auto;
zoom: 1;

}
.textSeccion{
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
text-align:justify;
color: #555555;
padding: 15px 0px 0px 5px;
}

.textSeccion a{
font-family: Arial, Helvetica, sans-serif;
color:#FF0000;
text-decoration:none;
}



/*div parte derecha*/
#derecha{
position:absolute;
top:133px;
right:0px;
background:#FFFFFF;
width:175px;
display:inline;
}


/* formato pie */
.textopie{
text-align:center;
color: #CCCCCC;
font-family: Helvetica, Arial; font-size: 0.71em;
}

a.textopie{
color: #FFFFF;
font-family: Helvetica, Arial; font-size: 1em;
text-decoration:underline
}





codigo html



<!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&iacute;tulo</title>
<link media="screen" href="css/estilo.css" type="text/css" rel="stylesheet"/>
</head>

<body>
<div id="outer">
<div id="contain-all">
<div class="spacer"></div>
<div id="izquierda">
<div class="leftmenu">
<ul>
<li><a href="pag/infoupsa.html"><img src="images/icoBarraGris.gif" alt="" class="icoBarra"/>aaaaa</a></li>
<li><a href="pag/infoescu.html"><img src="images/icoBarraGris.gif" alt="" class="icoBarra"/>bbb </a></li>
<li><a href="pag/secretaria.html"><img src="images/icoBarraGris.gif" alt="" class="icoBarra"/>cccc</a></li>
<li><a href="pag/titulaciones.html"><img src="images/icoBarraGris.gif" alt="" class="icoBarra"/>dddd</a></li>
<li><a href="pag/cceducacion.html"><img src="images/icoBarraGris.gif" alt="" class="icoBarra"/>eeee</a></li>
<li><a href="pag/instalaciones.html"><img src="images/icoBarraGris.gif" alt="" class="icoBarra"/>fffff</a></li>
<li><a href="pag/mapa.html"><img src="images/icoBarraGris.gif" alt="" class="icoBarra"/>ggggg</a></li>
</ul>

</div>

</div>

<div id="centro" class="textSeccion">

<div align="center">
hola buenos dias
</p>
</div>
</div>

<div id="derecha">
<div>
<iframe src="http://www.google.com/calendar/embed?showTitle=0&showTabs=0&showCalendars=0&showN av=0&showTz=0&src=eulvluisvives%40gmail.com&showCa lendars=0&ctz=Europe/Madrid" style="border: 0" width="175" height="200" frameborder="0" scrolling="no"></iframe>
</div>
<div id="listaeventos">
<iframe src="http://www.google.com/calendar/embed?showTitle=0&showTabs=0&showDate=0&showNav=0& showPrint=0&showCalendars=0&showTz=0&mode=AGENDA&s rc=eulvluisvives%40gmail.com&showCalendars=0&ctz=E urope/Madrid" style="border: 0" width="175" height="250" frameborder="0" scrolling="no"></iframe>
</div>

</div>
<div class="spacer"></div>
</div>
</div>
<div id="top-bar">
<div id="topbar-inner">
<div class="subheader1">
<div class="logo">
<img src="images/logoUpsa.gif" alt="Universidad Pontificia de Salamanca"/>
</div>
<div class="imagenlogo"></div>

<div class="solapa"></div>

</div><!-- Fin subheader1-->
<div class="subheader2">



<div class="imagewrapper"></div>
<div class="lineacabeza"></div>
</div><!-- Fin subheader2-->
</div>
</div>
<div id="footer">
<div id="footer-inner">
<div id="pie" class="textopie">
Escuela Universitaria de Magisterio Luis Vives.C/ Henry Collet nº 52 70. 37007 Salamanca. Teléfono: 923 12 50 27. Fax: [phone]
</div>
</div>
</div>
</body>
</html>

********************************
********************************


aqui te dejo el codigo del css y el codigo del html

lo que me pasa es el div id="center" quiero que en internet explorer 6 todo el espacio que tengo enter el div id="izquierda" y el div id="derecha" tenga el fondo que pongo y cubra todo el espacio entre los dos divs. Porque ademas el texto que he puesto esta justificado y en firefox se justifica pero en el ie6 me lo alinea a la izquierda.
muchas gracias

[Mikmoro]

IE6 no sabe dimensionar las cajas con posición absoluta con arreglo a las coordenadas como tú lo estás haciendo:

left:200px;
position:absolute;
right:200px;

No es una buena manera de conseguir lo que quieres usando la posición absoluta en todos los bloques, de hecho es casi la peor manera.
Yo te recomiendo que busques páginas con "layuots" parecidas a la que estás queriendo crear e imites la manera de hacerlo (con float en lugar de posiciones absolutas).

[danielqsl]

No me funciona la aparicion del Scroll en IE 6.0

tengo un DIV, y el siguiente estilo:

#contenido {
position: absolute;
width: 255px;
top: 30px;
bottom: 0px;
overflow: auto;
list-style: none;
margin: 0;
padding: 5px;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
color:#797979;
}

No me funciona para internet explorer 6.0, el Scroll, por favor ayudenme
Me pueden ayudar es urgente

[Mikmoro]

Para que te funcione el scroll deberás tener asignado un tamaño de alto (height).
Pero... ¿por qué usas este hilo para hacer una consulta que no tiene nada que ver con el original?

[mvega]

Tengo problemas similares con un div absolute con coordinadas definidas. La razón por la cual lo tengo así es porque ese div lo estoy utilizando como background para simular un modal dialog.

CSS

#main-content {
padding: 15px 10px;
margin-bottom: 5px;
height: 100%;
}


#slideshow_bg {
position: absolute;
top: 0px;
left: 0px;
min-height: 100%;
width: 770px;
background: #333;
opacity: 0.5;
filter: alpha(opacity=50); /* IE's opacity*/
}

* html #slideshow_bg {
height: 100%;
}

todos los "padres" de main-content tiene a su vez definido height: 100%

HTML

<div id="main-content">
<h1>Gallery</h1>
<div id="slideshow_bg">testing</div>
<div jsId="imageItemStore" dojoType="dojo.data.ItemFileReadStore" url="images.json"></div>
<div id="gallery" dojoType="dojox.image.Gallery"></div>
</div>