Position fixed and Internet Explorer

Question

Hi,

this is my css. It is working fine in firefox but not working in IE.

#Createinner {
    position: fixed; 
    width: 400px; 
    height: 280px; 
    margin-left: -200px; 
    margin-top: -140px; 
    top: 50%; 
    left: 50%; 
    background-color: #ccc; 
}

How to solve this.

Thanks in advance

Answer 1

IE6 doesn't support position fixed.

If you really need this to work in IE6, use conditional comments to serve an IE only CSS file and fake position:fixed with CSS expressions.

(edited to correct IE version info.)

Answer 2

1. Versions of IE pre 8 do not support position fixed properly.
2. What is the problem with the CSS e.g. why is it not working, what do you see on the screen?

Answer 3

Hi,

I recently wrote a jQuery plugin to get position:fixed working in IE 6+. It doesn't jitter on scroll, it looks at capability (not user-agent), works in Internet Explorer 6, 7, 8.

If you use strict mode in IE7+ position:fixed will be honoured, but by default IE7+ operates in Quirks Mode. This plugin checks for browser capability, and if it doesn't honour position:fixed, then it implements the jQuery fix.

http://code.google.com/p/fixedposition/

Something like this may work for you:

$(document).ready(function(){
   $("#Createinner").fixedPosition({
      debug: true,
      fixedTo: "bottom"
   });
});

You may need to make some minor CSS adjustments to get it working for your code. I'm working on "offset" values as options as we speak.