teoria glacial

Estou bem no meio de um projeto importante (leia-se: com prazo apertadíssimo e sem chance de prorrogações) no trampo e me deparei com um problema específico do Internet Explorer (sempre ele) que quase tira o meu sono.

Depois de muitos xingamentos contra Bill Gates e seu navegador burro, descobri uma solução, aparentemente simples, mas que gerou um post gigante que só vai ser útil aos meus visitantes do Google que caírem aqui procurando alguma coisa sobre CSS hacks, web standarts, tableless ou coisas do tipo.

Os interessados, continuem lendo abaixo, caso contrário, pulem para o próximo post ..

Suponhamos que eu tenho 6 divs (7 com a div que engloba todas):
<div id="t0">
<div id="t1">1</div>
<div id="t2">2</div>
<div id="t3">3</div>
<div id="t4">4</div>
<div id="t5">5</div>
<div id="t6">6</div>
</div>

As divs #t1, #t2 e #t3 possuem o mesmo tamanho e ficam uma embaixo da outra. Todas devidamente alinhadas com float left e largura fixa.

<style type="text/css">
<!–
div {
display:block;
width:200px;
height:100px;
color:#FFF;
}
#t0 {
width:300px;
}
#t1, #t2, #t3 {
float:left;
background:#000;
}
#t4, #t5, #t6 {
width:100px;
background:#FF0000;
margin-left:200px;
}
–>
</style>

Os navegadores decentes (Firefox e Opera) entendem que, se eu não atribuir float na #t4 e definir a largura de todas a partir dela, em tese, elas ficariam alinhadas com a #t1 láaaa em cima. Não entendeu? Eu desenho pra você:

Mas como o Internet Explorer (o 7 tambem) é burro, ele alinha apenas com a última div setada com float:

A solução prática seria englobar #t1, #t2 e #t3 numa div “miolo” ou coisa do tipo, dar um float left e fazer o mesmo o #t4, #t5 e #t6 usando uma div “lateral”. Mas isso não me serviria, já que estaria alterando a estrutura (no caso o XHTML) para resolver um problema de layout (que é trabalho do CSS). Usar um position absolute também foi descartado, já que as divs em vermelho possuem tamanhos variados e não necessariamente iriam aparecer nessa ordem.

Depois de fazer algumas experimentações, o problema saiu mais simples do que eu esperava.

#t1, #t2, #t3 {
*clear:left;
}
#t4, #t5, #t6 {
*float:left;
*margin-left:0px;
}

Acresentando clear nas 3 primeiras e float nas 3 últimas o IE finalmente entendeu o recado:

Quem se interessar, pode baixar o arquivo fonte com o código completo clicando aqui.

Não sei se esse é o jeito correto de se fazer, nem sei se essa solução é antiga, manjada ou coisa do tipo, mas como eu perdi muito tempo e o Dourado ficou dando corda, fica aí a solução.

Produtos Relacionados: