Foros del Web » Creando para Internet » CSS »

problemas div ie6

Estas en el tema de problemas div ie6 en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 30/01/2009, 10:57
 
Fecha de Ingreso: enero-2009
Mensajes: 2
Antigüedad: 8 años, 10 meses
Puntos: 0
problemas div ie6

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
  #2 (permalink)  
Antiguo 30/01/2009, 11:52
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: problemas div ie6

Saludos!!

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

__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #3 (permalink)  
Antiguo 01/02/2009, 12:40
 
Fecha de Ingreso: enero-2009
Mensajes: 2
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: problemas div ie6

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: 923 12 51 50
</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
  #4 (permalink)  
Antiguo 01/02/2009, 16:54
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
Respuesta: problemas div ie6

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).
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 12/05/2009, 17:31
 
Fecha de Ingreso: septiembre-2006
Ubicación: Bogotá
Mensajes: 9
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: problemas div ie6

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
  #6 (permalink)  
Antiguo 13/05/2009, 00:53
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
Respuesta: problemas div ie6

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?
  #7 (permalink)  
Antiguo 25/06/2009, 13:16
 
Fecha de Ingreso: junio-2009
Mensajes: 2
Antigüedad: 8 años, 5 meses
Puntos: 0
problemas div ie6

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>
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 16:54.