position - capas: problema con IE6

chiquirf · #1 (**permalink**) 07/11/2008, 11:59

Hola a todos, tengo un problema para posicionar unas capas en el IE6 (en el IE7, Firefox, Safari, Opera y hasta el Chrone se ve bien).

Explico mi problema:

Estoy haciendo mi web con capas, de la siguiente manera: ver esquema...

El problema lo tengo con la posición de la capa #2 dentro de la capa "panel-contenido"

el código HTML del panel-contenido es este:

Código PHP:

  <div id="panel-contenido"> 
 
        <div id="cont-left">&nbsp;</div> 
     
        <div id="cont-center"> 
            <div id="contenido"> 
                      <p>Aquí va el contenido...!!!</p> 
                </div> 
        </div> 
     
        <div id="cont-right">&nbsp;</div> 
         
</div>

Los estilos son estos:

Código PHP:

  #panel-contenido{ 
    position:relative; 
    width:800px; 
    min-height:310px; 
    border:0px solid #ff0000; 
    text-align:center; 
    margin:0px; 
    padding:0px; 
} 
 
        #cont-left { 
            position:absolute; 
            top:0px; 
            left:0px; 
            width:10px; 
            height:310px; 
            background: url(../img/bg-cont-left.png) no-repeat 0px 0px; 
            margin:0px; 
            padding:0px; 
        } 
        #cont-center { 
            position:relative; 
            top:0px; 
            left:10px; 
            width:780px; 
            background: url(../img/bg-cont-center.png) repeat-x 0px 0px #fff; 
            margin:0px; 
            padding:0px; 
        }     
        #cont-right { 
            position:absolute; 
            top:0px; 
            left:790px; 
            width:10px; 
            height:310px; 
            background: url(../img/bg-cont-right.png) no-repeat 0px 0px; 
            margin:0px; 
            padding:0px; 
        }

El problema es que en IE6 la capa central (#2) se desplaza 10px respecto al lado derecho de la capa izquierda (#1) y no respecto a la esquina sup-izq del panel-contenido (como creo que debe ser)

Es decir, que en vez de que esté a 10px del lateral izquierdo del panel-contenido, está a 20px.

No puedo poner la capa #2 (central) con position:absolute, por que el "panel-fin" se sube a 310px (min-height) de la esquina sup-izq del panel-central en IE7 y Firefox 3, y a 0px en IE6 (¿en IE6 no funciona el min-height verdad??)

Bueno, espero que alguien me haya entendido lo que he querido decir y me pueda echar una mano, jajajaja

Saludos

Carlos

Mikmoro · #2 (**permalink**) 07/11/2008, 12:21

¿Y por qué no lo haces así?:

Cita:

Soy enemigo de usar las posiciones absolutas cuando no parecen necesarias.

Si de esta forma hace lo que quieres, ese código css se podría economizar.

willyfc · #3 (**permalink**) 07/11/2008, 12:23

hola chikirf : :

mira, modifique un poco tu codigo, a ver si te sirve:

Código:

<style type="text/css">
#panel-contenido{width:800px;min-height:310px;text-align:center;margin:0px;padding:0px;} 
#cont-left {float:left;width:10px;height:310px; background: url(../img/bg-cont-left.png) no-repeat 0px 0px;} 
#cont-center {float:left;width:780px; height:auto; display:table; background: url(../img/bg-cont-center.png) repeat-x 0px 0px #fff;}
#cont-right { float:left;width:10px; height:310px;  background: url(../img/bg-cont-right.png) no-repeat 0px 0px; }  
</style>

y el html:

Código HTML:

<div id="panel-contenido"> 

        <div id="cont-left">a</div> 
     
        <div id="cont-center"> 
             <div id="contenido">
                      <p>Aquí va el contenido...!!!</p>
                      <p>&nbsp;</p>
                      <p>&nbsp;</p>
                      <p>&nbsp;</p>
                      <p>&nbsp;</p>
                      <p>&nbsp;</p>
                      <p>&nbsp;</p>
                      <p>&nbsp;</p>
                      <p>&nbsp;</p>
             </div>
        </div> 
     
        <div id="cont-right">a</div> 
         
</div>

con respecto al min_heigth el ie6 no lo respeta pero Mikmoro dió una solución para eso puedes ver http://www.araudi.net

tambien puedes ver esto.

espero te sirva.

chiquirf · #4 (**permalink**) 07/11/2008, 12:39

luego de escribir este post, leí el siguiente post: http://www.forosdelweb.com/f53/estab...6/#post2652770
y vi algo que no había probado: poner margin: 0 auto; con esto hice que se viera igual en los 3 navegadores (IE6, IE7y Firefox) luego puse el left:0px a la capa #2 y perfecto...

gracias por sus respuestas, ahora lo pruebo cuando termine de leer esto, que encontré también en el foro

Gracias y Saludos

Carlos

kseso? · #5 (**permalink**) 07/11/2008, 12:54

Hola Cro, digo Chiquirf.
Un placer encontrarte por este rincón, y más poder echarte una mano.
Un saludo.

chiquirf · #6 (**permalink**) 07/11/2008, 13:08

no me digas nada de c r o j a s f, que montaron la de dios por ese post, jajajaja

Nos vemos...

kseso? · #7 (**permalink**) 07/11/2008, 13:13

Pero pasamos un buen rato

hasta que se cerró

Carlos, ahora en serio, me alegra "verte" de nuevo.

Un saludo
P.D.: este foro si lo indexa google, así que mejor edita y borra toda referencia al "usuario que no debe ser nombrado"

chiquirf · #8 (**permalink**) 07/11/2008, 13:26

editado esta