superposición de elementos utilizando clear:left; en explorer

capagris · #1 (**permalink**) 08/02/2007, 05:02

muy buenas.

dentro del conjunto de una página que estoy diseñando tengo tres elementos (un texto, una imagen y una linea vertical).

Yo quiero que se muestren de la siguiente manera:

"texto

imagen (debajo de texto), linea vertical (acontinuación de imagen)"

El tema es, para que no se ponga la imagen acontinuación del texto y se muestre debajo, en la capa de la imagen he puesto clear: left;

pues bien el problema surge, que en firefox se ve de perlas, pero en explorer 6 y 7 se superpone la linea vertical a la imagen y se pega al texto....

Adjunto código:

CSS

Código:

#txt_cat{
    position: relative;
    float: left;    
    background-color: #f2f2f2;
    color: #666666;
    font-size: 12px;
    padding: 0 10px 0 4px;
    margin: 10px 0 0 0px;    
    
}

#img_cab{
    position: relative;
    float: left;
    margin: 10px 0 0 10px;
    clear: left;
}

#lin_vert{
    position: relative;
    float: left;
    background-color: #f2f2f2;
    height: 250px;
    width: 3px;
    overflow: hidden;
    margin: 0px 0 0px 0px;
    
}

HTML

Código:

<div id="txt_cat">Composición modular</div>                
                <div id="img_cab"> <img src="image/img.jpg" /></div>
                <div id="lin_vert"></div>

gracias

Mikmoro · #2 (**permalink**) 08/02/2007, 08:19

Posiblemente lo tengas puesto así por otras razones que no apuntas, pero por el conjunto en sí, has puesto innecesariamente un float left al texto. Es lo que te obliga a poner el clear: left, y lo que hace que IE lo interprete mal. Si quitarlo te afectaría a otras partes, encierra tu conjunto en una caja para que mantenga la uniformidad, y si quieres flótala para la relación con el resto de elementos de la página.

Es mi opinión.

Mikel.

capagris · #3 (**permalink**) 08/02/2007, 11:34

Gracias Mikmoro pero no puedo quitar float:left; si no se me va arriba del todo, a la izquierda y ya no fluye en el contenido.

Mikmoro · #4 (**permalink**) 08/02/2007, 12:41

Bueno, como ya decía, he intentado buscar una solución en función del código que has puesto, no de su relación con el resto de elementos.
Ni me imagino qué es lo que te ocurre, por eso siempre lo mejor es poner el conjunto del código completo para ver cómo interactúan las cosas, si no, es buscar soluciones a lo tonto. Creo que primero se debe conocer por qué sucede una cosa, y después cómo solucionarla en el caso concreto.

Mikel.

capagris · #5 (**permalink**) 09/02/2007, 02:21

pues aqui teneis el churro de código.

HTML

Código:

<body>
    <div id="contenedor">
        <div id="txt_titulo">Titulo</div>
            <div id="linea_gris"></div>
            <div id="linea_fina"></div>
            
                <div id="txt_cat">Composición modular</div>        
                <div id="img_cab"> <img src="../image/img_cabecera.jpg" /></div>
                <div id="lin_vert"></div>
                <div id="img_servicios"><img src="../image/servicios_1.jpg" /></div>
                <div id="linea_fina"></div>
                
                <div id="linea_naran"></div>
                <div id="txt_algunos">Algunos de nuestros productos</div>
                <div id="linea_naran"></div>
                
                <div id="grupo">
                    <div id="img_1">
                      <img src="../image/03_p.jpg" />
                      <div id="txt_nomprod">nombre</div>
                    <div id="txt_info">más información...</div>
                    <div id="linea_pie"></div>                
                    </div>    
                    
                    <div id="img_2"><img src="../mage/05_p.jpg" />
                    <div id="txt_nomprod">nombre</div>
                    <div id="txt_info">más información...</div>
                    <div id="linea_pie"></div>                
                    </div>    
                    
                    <div id="img_3"><img src="../image/15_p.jpg" />
                    <div id="txt_nomprod">nombre</div>
                    <div id="txt_info">más información...</div>
                    <div id="linea_pie"></div>                
                    </div>    
                    
                    <div id="img_4"><img src="../image/102_p.jpg" />
                    <div id="txt_nomprod">nombre</div>
                    <div id="txt_info">más información...</div>
                    <div id="linea_pie"></div>                
                    </div>    
                    
                    <div id="img_5"><img src="../image/106_p.jpg" />
                    <div id="txt_nomprod">nombre</div>
                    <div id="txt_info">más información...</div>
                    <div id="linea_pie"></div>                
                    </div>    
                    
                    <div id="img_6"><img src="../image/107_p.jpg" />
                    <div id="txt_nomprod">nombre</div>
                    <div id="txt_info">más información...</div>
                    <div id="linea_pie"></div>                
                    </div>    
                    
                    <div id="img_7"><img src="../image/111_p.jpg" />
                    <div id="txt_nomprod">nombre</div>
                    <div id="txt_info">más información...</div>
                    <div id="linea_pie"></div>                
                    </div>
                    
                    <div id="img_8"><img src="../image/web2_p.jpg" />
                    <div id="txt_nomprod">nombre</div>
                    <div id="txt_info">más información...</div>
                    <div id="linea_pie"></div>                
                    </div>
                    
                    <div id="img_9"><img src="../image/web8_p.jpg" />
                    <div id="txt_nomprod">nombre</div>
                    <div id="txt_info">más información...</div>
                    <div id="linea_pie"></div>                
                    </div>
                </div>
            <div id="linea_gris"></div>
    </div>
</body>

CSS

Código:

body {
    background: White;
    text-align: left;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
}


#contenedor {
    position: relative;
    margin: 20px auto;
    width: 638px;
}

#txt_titulo{
    position: relative;
    float: left;
    font-size: 18px;
    font-weight: bold;
    color: #666666;
     
}

#linea_gris{
    position: relative;
    float: left;
    background-color: #666666;
    overflow: hidden;
    height: 6px;
    width: 638px;
    margin: 2px auto;
}

#linea_fina{
    position: relative;
    float: left;
    background-color: #f2f2f2;
    overflow: hidden;
    height: 1px;
    width: 638px;
    margin: 6px auto;
}

#txt_cat{
    position: relative;
    float: left;
    background-color: #f2f2f2;
    color: #666666;
    font-size: 12px;
    padding: 0 10px 0 4px;
    margin: 10px 0 0 0px;    
    overflow: hidden;
}

#img_cab{
    position: relative;
    float: left;
    margin: 22px 0 0 4px;
    
}

#lin_vert{
    position: relative;
    float: left;
    background-color: #f2f2f2;
    height: 250px;
    width: 3px;
    overflow: hidden;
    margin: 0px 0 0px 5px;
    
}
#img_servicios{
    position: relative;
    float: right;
    margin: 3px auto;
}
#linea_naran{
    position: relative;
    float: left;
    background-color: #fbbe54;
    height: 1px;
    width: 200px;
    overflow: hidden;
    margin: 12px 0 2px 0px;
}

#txt_algunos{
    position: relative;
    float: left;
    color: #FBBE54;
    margin: 5px 6px 0 6px;
    font-size: 14px;
    font-weight: bold;
    clear: left;
}



/* productos*/
#grupo{
    position: relative;
    
    clear: left;
}

#img_1{
    position: relative;
    float: left;
    width:176px;
    margin: 25px 0 18px 0px;
    
}

#img_2{
    position: relative;
    float: left;
    width:176px;
    margin: 25px 0 18px 54px;
}

#img_3{
    position: relative;
    float: right;
    width:176px;
    margin: 25px 0 18px 5px;
}

#img_4{
    position: relative;
    float: left;
    width:176px;
    margin: 25px 0 18px 0px;
}

#img_5{
    position: relative;
    float: left;
    width:176px;
    margin: 25px 0 18px 54px;
}

#img_6{
    position: relative;
    float: right;
    width:176px;
    margin: 25px 0 18px 26px;
}

#img_7{
    position: relative;
    float: left;
    width:176px;
    margin: 25px 0 18px 0px;
}

#img_8{
    position: relative;
    float: left;
    width:176px;
    margin: 25px 0 18px 54px;
}

#img_9{
    position: relative;
    float: right;
    width:176px;
    margin: 25px 0 18px 26px;
}

/* fin productos*/

#txt_nomprod{
    position: relative;
    float: left;
    margin: 3px auto;
}

#txt_info{
    position: relative;
    float: left;
    background-color: #87d300;
    color: White;
    font-size: 9px;
    margin: 8px auto;
    padding: 0 2px 0 2px;
    clear: left;
}

#linea_pie{
    position: relative;
    float: left;
    background-color: #f2f2f2;
    width: 176px;
    height: 1px;
    overflow: hidden;
    clear:left;
}

Mikmoro · #6 (**permalink**) 09/02/2007, 04:00

Bueno, pues tal y como te decía en el primer mensaje, yo lo que haría es encerrar el conjunto de "texto-foto-lineavertical" en una caja, para colocar dentro de ella los tres elementos como quiera y luego colocarla a ella en relación al resto de la página.

Aquí te devuelvo mi "churro" de propuesta de cómo yo lo solucionaría. Se ve prácticamente igual en FF que en IE 6. A ver si te sirve de algo.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>web</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style>
body { background: White;
text-align: left;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
}
#contenedor {
position: relative;
margin: 20px auto;
width: 638px;
}
#txt_titulo{
position: relative;
float: left;
font-size: 18px;
font-weight: bold;
color: #666666;
}
#linea_gris{
position: relative;
float: left;
background-color: #666666;
overflow: hidden;
height: 6px;
width: 638px;
margin: 2px auto;
}
#linea_fina{
position: relative;
float: left;
background-color: #f2f2f2;
overflow: hidden;
height: 1px;
width: 638px;
margin: 6px auto;
}
#txt_cat{
position: relative;
background-color: #f2f2f2;
color: #666666;
font-size: 12px;
padding: 0 10px 0 4px;
margin: 10px 0 0 0px; overflow: hidden;
display: inline;
}
#img_cab{
position: relative;
float: left;
margin: 0px 0 0 4px;
}
#lin_vert{
position: relative;
background-color: #f2f2f2;
height: 250px;
width: 3px;
overflow: hidden;
margin: 0px 0 0px 25px;
}
#img_servicios{
position: relative;
float: right;
margin: 3px auto;
}
#linea_naran{
position: relative;
float: left;
background-color: #fbbe54;
height: 1px;
width: 200px;
overflow: hidden;
margin: 12px 0 2px 0px;
}
#txt_algunos{
position: relative;
float: left;
color: #FBBE54;
margin: 5px 6px 0 6px;
font-size: 14px;
font-weight: bold;
clear: left;
}
/* productos*/
#grupo{
position: relative;
clear: left;
}
#img_1{
position: relative;
float: left;
width:176px;
margin: 25px 0 18px 0px;
}
#img_2{
position: relative;
float: left;
width:176px;
margin: 25px 0 18px 54px;
}
#img_3{
position: relative;
float: right;
width:176px;
margin: 25px 0 18px 5px;
}
#img_4{
position: relative;
float: left;
width:176px;
margin: 25px 0 18px 0px;
}
#img_5{
position: relative;
float: left;
width:176px;
margin: 25px 0 18px 54px;
}
#img_6{
position: relative;
float: right;
width:176px;
margin: 25px 0 18px 26px;
}
#img_7{
position: relative;
float: left;
width:176px;
margin: 25px 0 18px 0px;
}
#img_8{
position: relative;
float: left;
width:176px;
margin: 25px 0 18px 54px;
}
#img_9{
position: relative;
float: right;
width:176px;
margin: 25px 0 18px 26px;
}
/* fin productos*/
#txt_nomprod{
position: relative;
float: left;
margin: 3px auto;
}
#txt_info{
position: relative;
float: left;
background-color: #87d300;
color: White;
font-size: 9px;
margin: 8px auto;
padding: 0 2px 0 2px;
clear: left;
}
#linea_pie{
position: relative;
float: left;
background-color: #f2f2f2;
width: 176px;
height: 1px;
overflow: hidden;
clear:left;
}
#conjunto {
clear: both;
float: left;}
  </style>
</head>
<body>
<div id="contenedor">
<div id="txt_titulo">Titulo</div>
<div id="linea_gris"></div>
<div id="linea_fina"></div>
<div id="img_servicios"><img
 src="../image/servicios_1.jpg"></div>
<div id="conjunto">
<div id="txt_cat">Composici&oacute;n modular</div>
<div id="img_cab"><img src="../image/img_cabecera.jpg"></div>
<div id="lin_vert"></div>
</div>
<div id="linea_fina"></div>
<div id="linea_naran"></div>
<div id="txt_algunos">Algunos de nuestros productos</div>
<div id="linea_naran"></div>
<div id="grupo">
<div id="img_1"><img src="../image/03_p.jpg">
<div id="txt_nomprod">nombre</div>
<div id="txt_info">m&aacute;s informaci&oacute;n...</div>
<div id="linea_pie"></div>
</div>
<div id="img_2"><img src="../mage/05_p.jpg">
<div id="txt_nomprod">nombre</div>
<div id="txt_info">m&aacute;s informaci&oacute;n...</div>
<div id="linea_pie"></div>
</div>
<div id="img_3"><img src="../image/15_p.jpg">
<div id="txt_nomprod">nombre</div>
<div id="txt_info">m&aacute;s informaci&oacute;n...</div>
<div id="linea_pie"></div>
</div>
<div id="img_4"><img src="../image/102_p.jpg">
<div id="txt_nomprod">nombre</div>
<div id="txt_info">m&aacute;s informaci&oacute;n...</div>
<div id="linea_pie"></div>
</div>
<div id="img_5"><img src="../image/106_p.jpg">
<div id="txt_nomprod">nombre</div>
<div id="txt_info">m&aacute;s informaci&oacute;n...</div>
<div id="linea_pie"></div>
</div>
<div id="img_6"><img src="../image/107_p.jpg">
<div id="txt_nomprod">nombre</div>
<div id="txt_info">m&aacute;s informaci&oacute;n...</div>
<div id="linea_pie"></div>
</div>
<div id="img_7"><img src="../image/111_p.jpg">
<div id="txt_nomprod">nombre</div>
<div id="txt_info">m&aacute;s informaci&oacute;n...</div>
<div id="linea_pie"></div>
</div>
<div id="img_8"><img src="../image/web2_p.jpg">
<div id="txt_nomprod">nombre</div>
<div id="txt_info">m&aacute;s informaci&oacute;n...</div>
<div id="linea_pie"></div>
</div>
<div id="img_9"><img src="../image/web8_p.jpg">
<div id="txt_nomprod">nombre</div>
<div id="txt_info">m&aacute;s informaci&oacute;n...</div>
<div id="linea_pie"></div>
</div>
</div>
<div id="linea_gris"></div>
</div>
</body>
</html>

Mikel.