Foros del Web - Ver Mensaje Individual - superposición de elementos utilizando clear:left; en explorer

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