Estoy cambiando el diseño de una web hecha en tablas a capas e intentado usar los css lo mejor posible, el caso es que tengo un problema en Exlorer 6, aún no lo he probado en el 7 pero supongo que también fallará que no me da en Firefox.
Una de las secciones de esta web esta diseñada de la siguiente manera:
Código :
<div class="portada3">
<div class="titularlinks4">
LINKS
</div>
<div class="floatl">
<a href="http://spain.aprilia.com" target="_blank" onmouseover="MM_swapImage('Web de Aprilia','','imagenes/links/aprilia2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="imagenes/links/aprilia1.jpg" alt="Web de Aprilia" name="Web de Aprilia" width="210" height="59" border="0" id="Web de Aprilia" /></a> </div>
<div class="floatl">
<a href="www.kawasaki.es" target="_blank" onmouseover="MM_swapImage('Web de Kawasaki','','imagenes/links/kawa2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="imagenes/links/kawa1.jpg" alt="Web de Kawasaki" name="Web de Kawasaki" width="210" height="59" border="0" id="Web de Kawasaki" /></a> </div>
<div class="floatl">
<a href="http://www.bmw-motorrad.es" target="_blank" onmouseover="MM_swapImage('Web de Bmw','','imagenes/links/bmw2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="imagenes/links/bmw1.jpg" alt="Web de Bmw" name="Web de Bmw" width="210" height="59" border="0" id="Web de Bmw" /></a> </div>
<div class="floatl">
<a href="http://www.ktm.es" target="_blank" onmouseover="MM_swapImage('Web de Ktm','','imagenes/links/ktm2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="imagenes/links/ktm1.jpg" alt="Web de Ktm" name="Web de Ktm" width="210" height="59" border="0" id="Web de Ktm" /></a> </div>
</div>
Es decir dentro de una capa que engloba todo, tengo una capa que ocupa todo el ancho con el titulo de la sección "links" y justo debajo tengo varias capas que contienen imágenes de sustitución flotadas a la izquierda. Estos son los estilos que uso en esa parte:
Código :
.portada3{
float:left;
margin-top: 4px;
margin-bottom: 4px;
width: 420px;
border-bottom:#000000 1px solid;
border-left:#000000 1px solid;
border-right:#000000 1px solid;
background-color:#000000;
text-align:center;
}
.titularlinks4{
background-color:#000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
height: 20px;
vertical-align: middle;
padding-top:2px;
width: 421px;
margin:0px;
}
.float1{
float:left;
height:59px;
margin:0px;
padding:0px;
}Si se os ocurre cual es la razón por la que los divs que llevan la clase "float1" en vez me medir 59px como le indico y como me enseña IE Developer Toolbar miden en realidad 63px de altura os lo agradecería mucho, he probado a poner le menos de 59px de altura y tampoco se nota nada y si le pongo más tamaño sólo se nota a partir 64px.
