Hola.
En FF me pasa que si pongo dos divs, llamados "A" y "B", con elementos flotantes en su interior y a "B" le asigno un margen top para que se separe de "A", "A" "imita" dicho margen y también se separa de lo que tenga arriba.
Pongo abajo el código con el problema en cuestión aislado (Sólo se presenta con el margin-top):
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
body{
margin:0px;
padding:0px;}
.contenedor{
background-color:#000066;}
.contenedor_indiferente{
background-color:#CC0033;}
.contenedor_indiferente_left_1{
float:left;}
.contenedor_indiferente_left_2{
float:right;}
.contenedor_flotadores{
background-color:#999999}
.contenedor_flotadores_left{
float:left;}
.contenedor_flotadores_right{
float:left;}
.clear{
clear:both;}
</style>
</head>
<body>
<div class="contenedor">
<div class="contenedor_indiferente">
<div class="contenedor_indiferente_left_1">
Elemento Left 1
</div>
<div class="contenedor_indiferente_left_2">
Elemento Left 2
</div>
<div class="clear"></div>
</div>
<div class="contenedor_flotadores" style="margin-top: 10px;">
<div class="contenedor_flotadores_left">
Flotador Left
</div>
<div class="contenedor_flotadores_right">
Flotador Right
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html> Dado que este problema sólo está presente en FF pueden ayudarse con el FireBug para alterar el margen que puse por defecto. Verán que "A" alterará su margen "fantasma" acorde al cambio que hagan en el margen de "B".
Por cierto, si agregan mas divs "contenedor_flotadores" y cambian su margin top a una mayor cantidad, "A" imitará al mayor.
Código HTML:
<div class="contenedor_flotadores" style="margin-top: 10px;">
<div class="contenedor_flotadores_left">
Flotador Left
</div>
<div class="contenedor_flotadores_right">
Flotador Right
</div>
<div class="clear"></div>
</div>
<div class="contenedor_flotadores" style="margin-top: 15px;">
<div class="contenedor_flotadores_left">
Flotador Left
</div>
<div class="contenedor_flotadores_right">
Flotador Right
</div>
<div class="clear"></div>
</div>
<div class="contenedor_flotadores" style="margin-top: 20px;">
<div class="contenedor_flotadores_left">
Flotador Left
</div>
<div class="contenedor_flotadores_right">
Flotador Right
</div>
<div class="clear"></div>
</div> Hasta ahora vine zafando con absolutes y en muy contadas veces con paddings, pero quisiera conocer la solución / corrección... si es que las hay.
A mi me huele a bug de FF. Alguna idea?
Saludos.