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

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

Posted by José Lopes.

The expression 'position: fixed' in CSS defines that the class or instance that has it will have a fixed position on screen and will not move with scrolling the page.

once again, Bug in IE that doesn't recognizes this propriety. You may find references to this Bug on the web says it doesn't appears on Mac/IE and IE7 in strict mode (this mode is not default neither I want to know where to change it).

Personaly, I find complicated to ask a visitor to change his IE proprieties just to see my page, so I started looking for a solution without javascript, so much used to solve IE bugs. I found one that I share here.

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