Floater? é IE 6 hack!

Ok, imagine o seguinte caso:  você quer criar uma Rich Media tipo flutuante (?), aí você pensa: tudo bem né, crio um <div> “position:absolute” e fica tudo lindo. Porém se você tiver o mínimo de preocupação com seu site e com as resoluções em que ele será visto, vai ver que como a <div> absolute possui a característica de ficar fixa na página, dependendo do tamanho que a janela do navegador apareça, o seu floater vai ficar lá paradão. Tosco.

A solução

O que aprendi parece ser a solução mais adequada. Primeiro o <div> na posição absoluta vai existir sim, com os ajustes de esquerda e topo que você precisa, mas… …pra que esse conteúdo se adeque à diferentes resoluções, você vai precisar colocar um novo <div> por fora, mas  dessa vez relativo, assim:

<div style=”position:relative;”>
  <div style=”position:absolute; top:26px; left:460px;”>
<img src=”aquiomeulfloater.jpg” />
</div>
</div>

Bom, até então a lógica da coisa ta certa né, porém isso resolve seu problema para o Firefox e para o IE7, mas para o IE 6 não. (Aeeee! )

Então eu como webmaster do site da SET/RN quase enlouqueci com este selinho aí do topo:

Ele PRECISAVA ficar legal, mas estava fixo exatamente como se eu não tivesse colocado <div> relativo nenhum. Como fazer ele se adaptar à janela, também no IE 6? Mas já está tudo correto! Devo deixar só um <div>? Que raios! Então, descobri! voilá! Mais um par de <div>’s nesta sequencia relative e absolute deve ser colocado! É um comportamento do navegador que não tem muita lógica (típico do IE ne?), então a coisa ficará:

<!–[if IE 6]>
  <div style=”position:relative;”>
  <div style=”position:absolute; top:26px; left:460px;”>
  <![endif]–> 

<div style=”position:relative; z-index:1″>
  <div style=”position:absolute; top:seutop; left:seuleft; z-index:1; width:larguradaimagem; height:alturadaimagem;”>
<img src=”aquiomeulfloater.jpg” />
</div>
</div>

<!–[if IE 6]>
  </div>
  </div>
  <![endif]–>

Clap! Clap! Clap! Clap! Clap! (aplausos). Que belo de um hack eim tio Bill?!