rev087 • 8th Mar 2008 • code • css, hack, layout
Um problema muito comum em layouts usando a propriedade
float é quando o “container” não se estica para acomodar as floats. Há muitas maneiras de se resolver isso, mas a maioria inclui código adicional no html, geralmente uma
div com
clear:both ao fim do container. Mas todos nós sabemos que bagunçar o html com tags inúteis deixa a tia Semântica muito chateada.
Assim, a minha solução preferida, bolada por Tony Aslett (fundador do site
csscreator.com) consiste em adicionar um conteúdo “virtual” ao final do container usando no seletor a pseudo-classe
:after, e aplicar o
clear:both nele, mais algumas linhas para esconder este conteúdo, e impedir que este ocupe espaço no layout. Segue o código:
.clearfix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
No trecho de css acima, estamos adicionando um ponto (
content:".") no final do container identificado pela classe
clearfix, setando sua propriedade
clear:both e escondendo-o do layout.
Funciona em qualquer browser…bom, menos no nosso querido IEca. Você não achou que ia ser fácil assim, não é?
Mas com mais algumas linhas, resolvemos o problema:
/* fix para o IE7 */
*+html .clearfix {
min-height: 1%;
}
/* fix para o IE6 */
* html .clearfix {
height: 1%;
overflow: visible;
}
/* fix para o resto do mundo */
.clearfix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
E é isso. Não tenha medo das floats, elas são suas amigas :)
rev087 • 21st Mar 2007 • code • css, hack, layout
Hacks são necessários, mas sujar o html realmente não me deixa satisfeito. E um dos muitos problemas que nosso amigo IE(ca)6 tem com CSS é a propriedade
min-height. Simplesmente não está implementada. Mesmo porque para o IE, o comportamento que deveria ser seguido com
min-height é o padrão para qualquer elemento com uma
height definida (graças á
implementação incorreta da propriedade
overflow…).
Procurando por uma solução decente, a que me pareceu melhor foi a apresentada por
Dustin Diaz:
selector {
min-height:500px;
height:auto !important;
height:500px;
}
Funciona assim: o IE6 tambem não implementa corretamente a declaração
!important, e vai sobrescrever a declaração de
height:auto com
height:500px, “emulando” a propriedade
min-height:500px. Todos os browsers modernos vão seguir a declaração
height:auto !important, mantendo
min-height:500px à salvo. Nasty.
A brincadeira funciona no IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2. Nada de IE5.x, infelizmente. (quem liga? eu com certeza não! :P)
