MacNN Forums (
-   Art & Graphic Design (
-   -   IE and position:fixed (

Thorzdad Mar 18, 2013 07:42 PM
IE and position:fixed
What's the secret to getting IE to work with position:fixed in css? I have a friend with a website that uses a fixed home button down the right-hand column. It's set at top:80%. It works as expected everywhere but IE. In IE, the button is more like 10% from the top.

Any ideas how to get this to work? Or does IE just not honor fixed position?
andi*pandi Mar 18, 2013 08:00 PM
Which IE? That is the question.
Thorzdad Mar 18, 2013 08:14 PM
I know they've used IE 8 and 9. Maybe 7, too.
besson3c Mar 18, 2013 08:33 PM
Have you tried installing a CSS reset stylesheet?
Thorzdad Mar 18, 2013 09:37 PM
No. Would that make a difference? From what I can understand, it sounds like IE simply doesn't do fixed correctly. Or, at least, not as intended.
andi*pandi Mar 18, 2013 09:59 PM
what is the doctype on the page?
Problem with position:fixed, <!DOCTYPE> and CSS
Thorzdad Mar 18, 2013 10:13 PM
HTML 4.01 Transitional.
It validates without errors.
andi*pandi Mar 18, 2013 10:18 PM
according to that link, try making it xhtml?
Thorzdad Mar 19, 2013 08:28 AM
Converting to xhtml didn't help.
andi*pandi Mar 19, 2013 02:42 PM
Huh. Does it still validate?

All the searching I do turns up the doctype solution. Some say to try Strict, not Transitional.

css - Position: fixed does not work in internet explorer - Stack Overflow
Internet Explorer Oddities. The OBJECT tag and position:fixed. Still! | Tony Collings' Technical Blog
exca1ibur Mar 23, 2013 11:49 AM
Make sure you trigger standards mode and not quirks mode and it should work. Quirks mode will not support position:fixed.

try an html5 doctype. <!DOCTYPE html>, but an

Make sure to set a top and left when writing the CSS

position: fixed
top: 0;
left: 0;
Thorzdad Mar 23, 2013 04:48 PM
Quote, Originally Posted by exca1ibur (Post 4223145)
try an html5 doctype. <!DOCTYPE html>
That did the trick!
IE7 still has a slight display issue with the fixed home button in the right column (it displays it outside the column to the right) but I can live with that, since it wasn't showing up at all in previous builds. Neither 7 or 8 are displaying the shadow beneath the top banner, but that's ok, too. IE9 and 10 look perfect.

Many thanks.

Of course, using a plain <!DOCTYPE html> declaration means the existing code does not validate, since it's HTML 4.
andi*pandi Mar 23, 2013 04:51 PM
If you want IE6,7,8 to display any CSS3 properties (drop shadow, border-radius), you have to set up CSS3Pie. It's a little javascript thing, and awesome.

CSS3 PIE: CSS3 decorations for IE
Thorzdad Mar 23, 2013 04:54 PM
I'm not worrying about IE6.
I installed PIE a couple of days ago, and the results were pretty bad. Like, everything other than the top banner failed to display, bad. I removed it for now.
All times are GMT -4. The time now is 04:17 AM.

Copyright © 2005-2007 MacNN. All rights reserved.
Powered by vBulletin® Version 3.8.8
Copyright ©2000 - 2017, vBulletin Solutions, Inc.

Content Relevant URLs by vBSEO 3.3.2