El Micox

Bom, todo mundo sabe que a propriedade position igual a fixed faz com que o elemento fique fixo na janela do browser independente da movimentação da barra de rolagem.

Isto é uma verdade pra navegadores que seguem bem os padrões (OP, FF,etc) mas para o IE (Internet Explorer até o 7) isto não funciona. Simplesmente não funciona.

Como resolver isto SEM JAVASCRIPT só no CSS?

Primeiramente imagine duas divs dentro de um documento:

- Uma das divs tem dimensões de 400×400, tem um texto gigantesco como conteúdo, porém seu overflow é scroll, o que permite que seja possível ler o conteúdo gigantesco.

- A outra div é uma pequena imagem de 25×25 que está posicionada exatamente sobre a div do conteúdo anterior.

…

Bom, se eu mexer a barra de rolagem da div do conteúdo não irá interferir em nada na movimentação da div que tem a imagem. A imagem continuará quieta sobre o texto.

Bingo!! Agora é só aumentar o tamanho da div com conteúdo pra ocupar a janela inteira.

Pra você não ter que quebrar a cabeça eu já deixei o código prontim só pra você inserir no seu documento (e fazer adaptações se achar necessário).

O Exemplo: Simulando position fixed no Internet Explorer - IE

O código pronto

<style type="text/css">
	/* FAZ OS POSITION FIXED NOS NAVEGADORES PADRÃO (não mexa) */
	.fixed { position: fixed !important; }
</style>
<!--[if lt IE 7]>
	<style type="text/css">
		/* FAZ O POSITION FIXED PARA O IE (não mexa).
			Para funcionar o DTD do documento deve estar correto. E não ser quirksMode
			By Micox - micoxjcg@yahoo.com.br - elmicox.com - elmicox.blogspot.com
		 */
		.fixed { position: absolute !important; }
		body { height: 100% !important; width: 100% !important;
			   margin: 0 !important; position: relative;  }
		html { overflow-y: hidden !important;  }
		#newbody { position: relative !important; overflow-y: scroll !important;
				   height: 100% !important; width: 100% !important; margin: 0 !important; }
	</style>
<![endif]-->

<style type="text/css">
	/* COLOQUE AQUI O RESTANTE DAS ESTILIZAÇÕES QUE NÃO TENHAM A VER COM POSITION FIXED
	   MAS NÃO DECLARE MARGINS, PADDINGS, POSITIONS, DIMENSÕES OU OVERFLOWS PARA HTML, BODY E NEWBODY
	*/

</style>

Detalhes:

Da mesma forma que está no exemplo, deverá haver um elemento pai chamado newbody que conterá todo o conteúdo não-fixed e, fora deste, deverão estar todos os elementos que desejar que sejam fixed. Olha o exemplo lá que vai entender.

A página não pode ser renderizada no quirks mode, ou seja, deve estar com o document type definition (DTD) correto;

Pode dar boró se alterar margin, padding, posições, dimensões ou overflows para os elementos HTML, body e newbody.

Perceba que não é aproveitamento de bug do IE. É apenas uma técnica que também funcionaria em outros navegadores se fosse necessário usar.

Muitos gringos já falaram sobre a técnica, mas aqui no Brasol parece que ninguém falou ainda. Estranho…:

Comenta aí malucada. Ninguém comenta mais

Não mande dúvidas nos comentários ou no meu e-mail. Mande elas para o fórum de desenvolvedores Webly. Tem mais gente lá gabaritada a responder e você não fica dependendo só do mico.

This entry was posted on Terça-feira, Setembro 25th, 2007 at 02:01 and is filed under bugs, webstandards. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.