position:fixed Hack
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?
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 posted this at 16:51 — 10th August 2004.
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.
gotta finish redesigning my sites so I can show them again.
The purpose of education is... to get more jokes!
KarenArt posted this at 17:18 — 10th August 2004.
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!
Dragon of Ice posted this at 20:40 — 10th August 2004.
He has: 578 posts
Joined: Jun 2004
I've seen that one, and I can't get it to work.
Urgh!!! So frusterated!
KarenArt posted this at 20:57 — 10th August 2004.
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!
Maquar posted this at 22:30 — 10th August 2004.
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
Dragon of Ice posted this at 23:47 — 10th August 2004.
He has: 578 posts
Joined: Jun 2004
I want a div to be fixed, not a background
KarenArt posted this at 00:27 — 11th August 2004.
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 posted this at 00:45 — 11th August 2004.
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.
Dragon of Ice posted this at 02:08 — 11th August 2004.
He has: 578 posts
Joined: Jun 2004
The site can be found at http://www.angeltowns2.com/members/bassdesigns/mike/
KarenArt posted this at 02:15 — 11th August 2004.
She has: 354 posts
Joined: May 2001
Which div are you trying to fix and where do you want it positioned?
Dragon of Ice posted this at 02:45 — 11th August 2004.
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 posted this at 03:21 — 11th August 2004.
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 posted this at 12:46 — 11th August 2004.
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!
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!
a Padded Cell our articles site!
Megan posted this at 13:19 — 11th August 2004.
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 posted this at 14:10 — 11th August 2004.
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.
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.
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.