Clearing floats en Firefox
3 seguidores
Hola gentes, tengo un contenedor, llamese contenedor principal, dentro de este tengo otros dos, uno flotado a la derecha y el otro a la izquierda. Pues bien, en IE se ve bien (un bug pero se ve bien), pero en FF y en Opera nasti, el borde inferior corta los floats.
Mirando por ahí he visto varias técnicas unas añadiendo marcado (kk) y otras mediante css como esta:
<code>.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */</code>
¿Utilizáis esta técnica u otras?
Gracias.
Diego
demssite
MM ok gracias borja ya le echo un ojo aver si lo soluciono
orange
Pues a algún un conflicto entre el margin-bottom del contenido con el padding-bottom del contenedor.
demssite
MMMMM creo q me he perdido un poco en este hilo.... jejejej
Y una cuestión más. Una vez solucionado este problema, como decía antes tengo un div que contiene un float., hasta aquí bien, pero a ese div de fondo le pongo una imagen separadora en el pie, es decir como background-image alineaba left bottom y la separo mediante padding. Se ve bien en todos menos en IE7 que me deja un espacio mayor que los demás.
¿A qué puede deberse esto?
Un saludo y ya sabéis muuuchas gracias.
Diego
zigotica
jaja, si ya puede ser ya, quien sabe :)
orange
zigotica
ojo que genera problemas paralelos que tu y yo sabemos en IE6, no? :)
OT: ¿ya sabes cual era el problema?
No tenía nada que ver con esto, se arreglaba si lo quitabas, pero no era esa la causa. Ya sabes, los caminos de Explorer son inexcrutables.
orange
Pero es que esa ñapa sólo la necesita Explorer.
A ver, el método "oficial" para hacer clearing es poner overflow: auto o hidden, punto. Lo de los width, heights, zoom, display... es para darle hasLayout a Explorer y que funcione ahí.
zigotica
orange
Yo utilizo:
<fieldset><blockquote>zoom: 1; display: inline-block;</blockquote></fieldset>
Aunque hay veces que para Explorer 5.0 tengo que aplicar alguna otra cosa porque no lo pilla.
ojo que genera problemas paralelos que tu y yo sabemos en IE6, no? :)
OT: ¿ya sabes cual era el problema?
demssite
Pero si incluyo el <code>zoom: 1</code> el la hoja de estilos principal (ya que es en FF y en Opera donde en este caso me da problemas) no validaría ¿no?
orange
demssite
¿Utilizáis esta técnica u otras?
Cualquier que proporcione hasLayout al elemento. Yo utilizo:
<fieldset>zoom: 1; display: inline-block;</fieldset>
Aunque hay veces que para Explorer 5.0 tengo que aplicar alguna otra cosa porque no lo pilla.
demssite
Finalmente lo he solucionado aplicando <code>overflow: hidden</code> al contenedor para obligarle a calcular la altura.