Ver Mensaje Individual
  #6 (permalink)  
Antiguo 09/02/2007, 04:00
Avatar de Mikmoro
Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Re: superposición de elementos utilizando clear:left; en explorer

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.