Bombolom.com : /webdev/CSSIEPositionFixedBug-2007-10-29-18-35.html

`(webdev)` IE 'position: fixed' bug

Este é um post de José Lopes.

No CSS a expressão 'position: fixed' define que a classe ou instância que a contém assume uma posição fixa no écran e não se mexe com o scroll.

Mais uma vez, o IE surpreende-nos por não suportar esta propriedade. Encontra-se a descrição deste Bug na internet, sendo mencionado que tal não acontece na versão Mac e no IE7 quando seleccionado o modo strict.

Uma vez que este modo strict apresenta por vezes problemas e de qualquer modo não me resolvia o problema para versões anteriores do IE, iniciei uma busca para encontrar uma solução só com CSS e sem javascript, tão usado para resolver os bugs do IE, e apresento aqui a que encontrei.

Em primeiro lugar, no ficheiro do CSS devemos definir o estilo normalmente, i.e., com a 'position: fixed' onde acharmos que devemos utilizar.

Tomando um exemplo prático, imaginemos que pretendemos ter um menu lateral do lado esquerdo e um bloco de texto do lado direito que ficará sujeito ao scroll. Definimos o estilo do menu, por exemplo:

div.menu {
	float: left;
	position: fixed;
	z-index: 1;
	}

O bloco de texto para o lado direito não necessita de nenhuma formatação especial, como float ou position.

Se notarem temos um z-index: 1; para forçar o menu a ficar por cima do texto do lado direito, caso contrário no IE ele fica por baixo. Eu defini aqui uma classe mas também poderia ter usado uma instância (#menu).

Para fazer funcionar no IE temos de acrescentar o seguinte código ao nosso CSS:

@media screen {
	* html, 
	* html body { 
		overflow-y: hidden; 
		height: 100%;
		}
	* html #iefix { 
		height: 100%;
		overflow-y: scroll;
		position: relative;
		}

	* html div.menu {
		position: absolute;
		}
	}

Este estilo só vai ser reconhecido pelo Win/IE.

Algumas notas sobre este código:

O símbolo * tem de estar presente caso contrário os outros browsers não ignoram esta parte.
O height deve ter o valor apresentado para evitar problemas no IE.
A instância iefix é parte da magia que resolve o problema, sendo a sua aplicação demonstrada um pouco mais adiante.
A última parte com div.menu é a chamada ao que pretendemos que fique fixo no écran, neste caso a classe menu. Caso haja mais do que um deve aqui ser incluída, e caso fosse uma instância teria como terminologia #.menu, como por exemplo:
```
* html div.menu3, 
* html div#menu2,
* html div.menu {
	position: absolute;
	}
```
Ainda sobre esta última parte, só devemos incluir o que édiferente para o IE como a position

Definido o nosso CSS basta aplicá-lo. Para tal devemos seguir uma estrutura para os ficheiros HTML do tipo:

<html>
<head>
</head>

<body>
  <div id="iefix">
	Aqui o bloco de texto do lado direito
  </div>
	Aqui os elementos que queremos que fiquem fixos
</body>
</html>

A nossa pagina deve agora funcionar como mostra o exemplo (nova janela).

Esta solução tem por base a apresentação nos sites gunlaug.no e css-discuss.incutio.com.
Funciona para a maioria das aplicações que necessito e não utiliza javascript.

Outras soluções, mais complexas a meu ver, existem em:

First, we should create a CSS file as usual, i.e., with 'position: fixed' where we like it to be.

Making a pratical example, lets imagine that we want to have a side menu on the left side and a text block on the right side, with the mune fixed and the text block scrollable. We define the menu style for instance as:

div.menu {
	float: left;
	position: fixed;
	z-index: 1;
	}

The text block doesn't need any specific style like float or position.

You may notice the z-index: 1; to assure that the menu will stay above the text block. If you lack this propriety with IE it will stay bellow.

I defined a class but it could have been an instance (#menu).

To make it work with IE we have to add the following code to the CSS:

@media screen {
	* html, 
	* html body { 
		overflow-y: hidden; 
		height: 100%;
		}
	* html #iefix { 
		height: 100%;
		overflow-y: scroll;
		position: relative;
		}

	* html div.menu {
		position: absolute;
		}
	}

This style will only be recognized by Win/IE.

Some notes about this code:

The character * has to be present otherwise the other browsers will not ignore it.
The height should assume the given value to work fine with IE.
The instance iefix its part of the solving magic. A little bit further I will show how we use it.
The last part with div.menu calls want we want to have fixed on the screen, in this case the class menu. If there are more thing to be made fixed they must be included here, and if it was an instance the terminology would be #.menu, like p.e.:
```
* html div.menu3, 
* html div#menu2,
* html div.menu {
	position: absolute;
	}
```
Still about this last part, we should only include want is different for IE like position

Our CSS is done. Now we should follow the following HTML structure:

<html>
<head>
</head>

<body>
  <div id="iefix">
	Here the text block for the right side
  </div>
	Here the elements that we want to have fixed
</body>
</html>

Nothing more is necessary and the page should work like the example (new window).

This solution is based on the sites gunlaug.no and css-discuss.incutio.com.
It works for most of my needs and it doesn't uses javascript.

(webdev) IE 'position: fixed' bug

`(webdev)` IE 'position: fixed' bug