Hola a todos y de antemano gracias a quien tenga la paciencia de intentar resolver esto.
Vamos a ver, tengo un div (#cont00) que a su vez contiene otros cuatro (que son floats), dos a la izquierda (uno encima de otro)y dos a la derecha (uno encima de otro). A su vez, cada uno de estos 4 floated divs contiene dos elementos (que son floats): una imagen y un div con texto (un h3).
Lo que os muestro a continuación IE lo muestra tal y como yo deseo, sin embargo, Firefox y Mozilla lo descuajeringan todo, ya que el padding:4px que tienen cada uno de los cuatro divs que están dentro del principal se muestra de una manera peculiar... bien en todos los lados menos en el derecho. Si pongo padding:4px, lo triplican en el lado derecho a 12px.. si pongo padding:7px, el lado derecho pasa a tener 21px de ancho.. ¿qué estoy haciendo mal?
Os copio la parte de los estilos y del html que creo que basta para entender qué pasa. Normalmente junto selectores que tengan declaraciones iguales, pero para que quede todo mas claro los he separado.
Por si sirve el doctype es <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
PARTE DE LA HOJA DE ESTILOS
html, body {background-color:#ffffff;height:100%;min-height:100%;width:100%;margin:0;padding:0;border:0 ;}
body{color:#333333;font-family:"Trebuchet MS",Helvetica,Geneva,Verdana,Arial,sans-serif}
body, div, h3
{
font-size:x-small;
voice-family: "\"}\"";
voice-family:inherit;
font-size:small
}
html>body, html>body div, html>body h3 {font-size:small}
#cont00{margin:auto;margin-top:25px;width:525px;background:#CCCCCC}
.cont2 {float:left;width:245px;border:1px solid #7F95A5;background-color:#C3D6E5;padding:4px}
* html .cont2 {width:255px;w\idth:245px}
.cont2 img {float:left;width:113px;display:block}
.cont2b {float:right;height:53px;text-align:center;background:#83A2BA;border:1px solid #FFFFFF;width:125px}
* html .cont2b{width:127px;w\idth:125px;height:55px;he\ig ht:53px}
.cont3 {float:right;width:245px;border:1px solid #7F95A5;background:#C3D6E5;padding4px}
* html .cont3 {width:255px;w\idth:245px}
.cont3 img{float:right;width:113px;display:block}
.cont3b {float:left;height:53px;text-align:center;background-color:#83A2BA;border:1px solid #FFFFFF;width:125px}
* html .cont3b{width:127px;w\idth:125px;height:55px;he\ig ht:53px}
#cont00 h3 {margin:0}
#cont00 h3.linkuno{margin-top:9px}
#cont00 h3.linkdos{margin-top:20px}
PARTE DEL HTML
<div id="cont00">
<div class="cont2" style="margin-bottom:4px">
<div class="cont2b">
<h3 class="linkuno"><a href="busqueda/indemp.html">ÍNDICE<br>
DE ACTIVIDADES</a></h3>
</div>
<a href="busqueda/indemp.html"><img src="images/indiceActividades.jpg" alt="Actividades" width="113" height="53" border="0"></a>
</div>
<div class="cont3" style="margin-bottom:4px">
<div class="cont3b">
<h3 class="linkdos"><a href="contratacion/indcon.html">CONTRATOS</a></h3>
</div>
<a href="contratacion/indcon.html"><img src="images/contratos.jpg" alt="Contratos" width="113" height="53" border="0"></a>
</div>
<div class="cont2">
<div class="cont2b">
<h3 class="linkdos"><a href="/general/dirinte/dirinte.html">OFICINAS</a></h3>
</div>
<a href="/general/dirinte/dirinte.html"><img src="images/oficinas.jpg" alt="Oficinas" width="113" height="53" border="0"></a> </div>
<div class="cont3">
<div class="cont3b">
<h3 class="linkuno"><a href="eures/eures.html">RED EUROPEA<br>
DE EMPLEO</a></h3>
</div>
<a href="eures/eures.html"><img src="images/EURES.jpg" alt="EURES" width="113" height="53" border="0"></a> </div>
<br style="clear:both">
</div>