Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Enthusiast Zone > Art & Graphic Design > IE and position:fixed

IE and position:fixed
Thread Tools
Thorzdad
Moderator
Join Date: Aug 2001
Location: Nobletucky
Status: Offline
Reply With Quote
Mar 18, 2013, 07:42 PM
 
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
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Offline
Reply With Quote
Mar 18, 2013, 08:00 PM
 
Which IE? That is the question.
     
Thorzdad  (op)
Moderator
Join Date: Aug 2001
Location: Nobletucky
Status: Offline
Reply With Quote
Mar 18, 2013, 08:14 PM
 
I know they've used IE 8 and 9. Maybe 7, too.
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Mar 18, 2013, 08:33 PM
 
Have you tried installing a CSS reset stylesheet?
     
Thorzdad  (op)
Moderator
Join Date: Aug 2001
Location: Nobletucky
Status: Offline
Reply With Quote
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
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Offline
Reply With Quote
Mar 18, 2013, 09:59 PM
 
what is the doctype on the page?
Problem with position:fixed, <!DOCTYPE> and CSS
     
Thorzdad  (op)
Moderator
Join Date: Aug 2001
Location: Nobletucky
Status: Offline
Reply With Quote
Mar 18, 2013, 10:13 PM
 
HTML 4.01 Transitional.
It validates without errors.
     
andi*pandi
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Offline
Reply With Quote
Mar 18, 2013, 10:18 PM
 
according to that link, try making it xhtml?
     
Thorzdad  (op)
Moderator
Join Date: Aug 2001
Location: Nobletucky
Status: Offline
Reply With Quote
Mar 19, 2013, 08:28 AM
 
Converting to xhtml didn't help.
     
andi*pandi
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Offline
Reply With Quote
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
Mac Elite
Join Date: Oct 2000
Location: Oakland, CA
Status: Offline
Reply With Quote
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  (op)
Moderator
Join Date: Aug 2001
Location: Nobletucky
Status: Offline
Reply With Quote
Mar 23, 2013, 04:48 PM
 
Originally Posted by exca1ibur View Post
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
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Offline
Reply With Quote
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  (op)
Moderator
Join Date: Aug 2001
Location: Nobletucky
Status: Offline
Reply With Quote
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.
     
   
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 02:12 AM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,