position:fixed Hack

He has: 578 posts

Joined: Jun 2004

I've been searching for an IE hack for position: fixed. Many I have found, and many have I been confused by. I can't figure out how to get them to work. Could someone point me to a very easy to understand one?

KarenArt's picture

She has: 354 posts

Joined: May 2001

Are you talking about fixing a background image to a certain point or is it something else?

If it's a background image, I've found css is the only way to go.
Just use

body { background: url(YOURIMAGE.gif) no-repeat left bottom;}

You can use it in the body, div, table cell, etc. Change "left" and "bottom" to where ever you want the image to be.

btw: I think the only real hack to making things work in IE is to totally rewrite the browser.... nothing ever works in that thing. Roll eyes

gotta finish redesigning my sites so I can show them again.

The purpose of education is... to get more jokes!

KarenArt's picture

She has: 354 posts

Joined: May 2001

Ok since I avoid IE at all cost and I don't use position fixed I didn't know this.... Here is a quick example of a fixed position div that works cross browser http://www.stunicholls.myby.co.uk/layouts/fixed.html

You just have to make sure that you have height:100% and overflow-y:auto in the body tag. You also won't be able to use absolute or relative positions on the same page.

Hopefully that will help!

gotta finish redesigning my sites so I can show them again.

The purpose of education is... to get more jokes!

He has: 578 posts

Joined: Jun 2004

I've seen that one, and I can't get it to work.

Urgh!!! So frusterated!

KarenArt's picture

She has: 354 posts

Joined: May 2001

Does their page work for you in IE?
Is it just trying to duplicate it that doesn't work?

I feel for you! I get so frustrated trying to code sometimes I want to completely give up.

gotta finish redesigning my sites so I can show them again.

The purpose of education is... to get more jokes!

They have: 32 posts

Joined: Nov 2003

You can use the code below to have a "fixed" background. Insert it between your HEAD sections and you're set: (has always worked fine for me in IE and others)

body {background-image: url(your image along with path to it);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;}

Good luck,

Mark

He has: 578 posts

Joined: Jun 2004

I want a div to be fixed, not a background

KarenArt's picture

She has: 354 posts

Joined: May 2001

What is it you want to do with your div?
Do you have a page or code to look at so we can help?

KarenArt's picture

She has: 354 posts

Joined: May 2001

I just thought of something... what version of IE are you trying to hack for?
This hack works for IE 6. I don't think it does a thing for 5.5.

He has: 578 posts

Joined: Jun 2004

KarenArt's picture

She has: 354 posts

Joined: May 2001

Which div are you trying to fix and where do you want it positioned?

He has: 578 posts

Joined: Jun 2004

I'm trying to fix the sidebar (navigation) div, and i want it positioned exactly where it is. I beleive the math works out to about 230px.

KarenArt's picture

She has: 354 posts

Joined: May 2001

Ok... I have to do a clean install of IE to get it working again on my computer, so I can't check this for you.
Try this...

In the head section of your html document add

<!--[if IE 6]>
   <style type="text/css">
   /*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
   /*]]>*/
   </style>
<![endif]-->
'

In your css file in the div.sidebar part
delete float: right;
and add

display: block;
top: 230px;
right: 10px;
position: fixed;
'

Add this to your css page
* html div.sidebar {position:absolute;}'

See if that does you any good.
I think you may also need to set your doctype to kick IE into quirks mode, but I'm not positive about that.
If the above doesn't work try adding

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
'
to the top of your html file.
It's a good idea to have a doctype on your page anyway.

*Edited to fix code (I hope)

gotta finish redesigning my sites so I can show them again.

The purpose of education is... to get more jokes!

JeevesBond's picture

He has: 3,956 posts

Joined: Jun 2002

Well you'd actually want to add a DOCTYPE to knock IE out of quirks mode and into "standards" mode, I'm not sure which versions of IE this affects, certainly 6 but I'm not sure about 5/5.5 (and naturally IE still doesn't support standards - you know what I mean!)

Karen is right, IE is a pain. But it's always helpful to specify what you want and give us code straight away! Smiling
I'm still not sure of what you're trying to do, it seems you're trying to absolutely position an element or is it the background for the element you're trying to position?

Specify! Laughing out loud

a Padded Cell our articles site!

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Is this what you're looking for?

http://www.meganjack.com/uw_courses/css/lear1.1.html

I don't entirely understand it myself but it works!

KarenArt's picture

She has: 354 posts

Joined: May 2001

Well you'd actually want to add a DOCTYPE to knock IE out of quirks mode and into "standards" mode'

Oops sorry... my bad. You're right!
I think I'm doing more harm than good here. Roll eyes

Dragon of Ice, I know you probably don't want to hear this but I think you're going to be much more satisfied if you put up some test pages and "play" with the coding yourself. Find a page that uses a fixed division AND that works on your version of IE. copy the code and play with it. Figure out what they're doing to make it stay stuck.

I think it's important to have people (like the ones at this forum) to turn to when you get stuck with a problem, but you've got to be willing to do the experiments yourself. Laughing out loud

gotta finish redesigning my sites so I can show them again.

The purpose of education is... to get more jokes!

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.