fixed, absolute position doesn't work on IE

[irock]

I tried to use the following code to make the menu follows at 210px top as the user scrolls down. This piece of code failed to work on IE while worked perfectly on Safari and Netscape 7.x.

#Menu {
position:fixed;
_position:absolute;

top:210px;
}

Where's my missing puzzle?

Thanks much!

[isitreal]

If you want position:fixed you have to only have that, currently your position:absolute is overriding your position:fixed, you can only have one.

Also, on IE position fixed only works in a non floated page, that is, it can't be in a centered block, for example, it has to be aligned to the left edge of the screen, or inside an element that is absolutely positioned relative to the left edge of the window.

[grahamstewart]

Actually, I don't think IE supports position fixed at all.
Yet another lack of compliance against IE then. :(

I've seen some sites fake it with javascript though.

What was the idea of the

_position

bit?
I've never seen that before.

[isitreal]

Sorry about that, grahamstewart is right, IE doesn't support that feature at all, not 5x or 6, for some reason I thought 6 did but it doesn't.

Opera 5-7, gecko/netscape from version 0.9 (netscape 6.x) on do, I assume Safari does too, but can't say for sure.

On the plus side for IE is that it's currently the only browser I know of that supports mouseover mousewheel scrolling of overflow:auto, firebird 0.7 had that running but it broke in 0.8 / gecko 1.6 (like you see on all frames/iframes/browser window etc).

[pageoneresults]

The underscore is not a valid.

[b][red]_[/red][/b]position:absolute;

DrDoc Doh! :p

Pssst, I still don't think its valid. Or is it? ;)

[edited by: pageoneresults at 9:55 pm (utc) on Feb. 21, 2004]

[DrDoc]

The first character of a selector identifier...

Well,

_position

is not a selector identifier anyway :)

[iamlost]

>> irock:

You are on the right track - you use position: fixed; for compliant browsers and position: absolute; for IE. Note that depending what you want fixed you may have differences in overflow attributes also.

This requires either css hacks or IE conditional statements to present appropriate css to appropriate browser. To make things worse ;-( you can run into differences between IE5.x(win), IE5.x(mac), and IE6.

I love fixed but cross browser implementation is a royal pain (at the moment). There are some keyboard/scroll issues with fixed and overflow in some browsers (notably but not only Moz).

[pageoneresults]

Errors
URI : http*//www.example.com/file.css
Line: 0 Context : body 
Property [b]_position[/b] doesn't exist : absolute

W3C CSS Validation Service [jigsaw.w3.org]

[aevea]

I have wrestled with ie on this one, and gotten ie6("strict") to pull off acceptable results with this nasty series of hacks. It doesn't work for ie5 because ie5 considers the body the root element. The problem could probably be solved with some appropriate nesting, but I didn't want to mess with my html:

/* hide from ie mac \*/
* html {overflow: hidden; }
* html body {overflow: auto; }
/* end hack */
/* position absolute for ie6 */
#rnav {position: absolute; top: 3em; left: 85%; width: 15%; }
/* position fixed for compliant browsers */
body>#rnav {position: fixed; }

The * html is just seen by ie while the child selector is just seen by css-2 compliant browsers.

Adam

[isitreal]

That hack didn't work for me on IE 6, in fact, when I tried adding a long enough series of 'words<br />' to extend the screen past the bottom of the browser window, IE 6 wouldn't even scroll it, for some reason the scroll bar was killed, although it did work in mozilla and opera.

Personally, especially after reading up here on these kinds of hacks, I'm just not going to use techniques that aren't supported as is by the major browsers, takes too much time, and the results are too unreliable, and too hard to maintain, there's easier ways to get the desired results, that always work.

I am starting to deliver some custom CSS through using server side browser detection when absolutely unavoidable, but that is very stable, since the server prints out the custom css after the css files have loaded, so I can use the cascading feature of CSS to just delete undesired effects, or add small tweaks, without interfering with other browsers, but I'm going to keep that kind of technique to a minimum, too much headache for too little result as far as I'm concerned.

[aevea]

Sorry about that, I left out an important line when I was pasting:

html, body {height: 100%; }

You're right isitreal, without it the overflow remains hidden. Here's the full test:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ie fixed</title>
<style type="text/css">
/* hide from ie mac \*/
* html {overflow: hidden; }
* html body {overflow: auto; }
/* end hack */
html, body {height: 100%; margin: 0; padding: 0; }
#nav {position: absolute; top: 210px; left: 80%; width: 15%; background: #fec; }
body>#nav {position: fixed; }
#nav a {display: block; }
</style>
</head>
<body>
<div id="content">words<br />words<br />words<br />
words<br />words<br />words<br />words<br />words<br />
words<br />words<br />words<br />words<br />words<br />
words<br />words<br />words<br />words<br />words<br />
words<br />words<br />words<br />words<br />words<br />
words<br />words<br />words<br />words<br />words<br />
words<br />words<br />words<br />words<br />words<br />
words<br />words<br />words<br />words<br />words<br />
</div>
<div id="nav"><a href="#">links</a><a href="#">links</a>
 <a href="#">links</a><a href="#">links</a>
</div>
</body>
</html>

Adam

[isitreal]

aevea: very impressive, it actually works, although it's super unstable when you try to change anything, but that is going to really interest a friend of mine who's been trying to get that working on his site for a long time.

If you add a top margin to the content and nav elements it seems to stop working in IE, the window scrollbar vanishes, very unstable.

I tried it on a more realistic layout [below], and it seems to work pretty well on IE 6 as you say, why I don't quite understand, but it's still cool. One annoying thing I found when experimenting with this is that when you apply padding to the navStyling element opera and mozilla correctly use the width of the #nav element as the container for the % paddings, but IE 6 incorrectly uses the width of the body as the container width.

It's very sensitive to any changes however, and can only be used when aligned against the right or left edge of the window since in Mozilla/Opera the float property doesn't work on relatively centered blocks, it just floats to the far side. But adding margins to the content div creates that effect.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ie fixed</title>
<style type="text/css">
/* hide from ie mac \*/
* html {overflow: hidden; }
* html body {overflow: auto; }
/* end hack */
html, body {height: 100%; margin: 0; padding: 0; }
body {background-color:lime;}
#content {margin-left:15%;background-color:yellow;}
#nav {position: absolute; top: 0px; left: 0%; width: 15%; height:100%; background: lime; }
#navStyling {padding:2%;}
body>#nav {position: fixed; }
#nav a {display: block; }
</style>
</head>
<body>
<div id="content">words<br />words<br />words<br />
words<br />words<br />words<br />words<br />words<br />
words<br />words<br />words<br />words<br />words<br />
words<br />words<br />words<br />words<br />words<br />
words<br />words<br />words<br />words<br />words<br />
words<br />words<br />words<br />words<br />words<br />
words<br />words<br />words<br />words<br />words<br />
words<br />words<br />words<br />words<br />words<br />
words<br />words<br />words<br />words<br />words<br />
</div>
<div id="nav">
<div id="navStyling">
<a href="#">links</a><a href="#">links</a>
<a href="#">links</a><a href="#">links</a>
</div>
</div>
</body>
</html>

[DrDoc]

We've had a few related discussions in the past -- Emulating Frames (using fixed positioning) [webmasterworld.com]

[aevea]

It's very sensitive to any changes however, and can only be used when aligned against the right or left edge of the window since in Mozilla/Opera the float property doesn't work on relatively centered blocks, it just floats to the far side. But adding margins to the content div creates that effect.

Fixed positioning is a subset of absolute positioning, so by definition, it doesn't mix with floating and is always 'fixed' with respect to the viewport rather than any positioned parents.

[w3.org...]

To simulate the effect though, you can choose your numbers carefully:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ie fixed</title>
<style type="text/css">
/* hide from ie mac \*/
* html {overflow: hidden; }
* html body {text-align: center; overflow: auto; }
/* end hack */
html, body {height: 100%; margin: 0; padding: 0; }
#content {text-align: left; margin: 1em 10%; border: 1px solid #bed; padding: .5em; }
#nav {position: absolute; top: 3em; right: 14%; width: 15%;
background: #fec; }
body>#nav {position: fixed; }
#nav a {display: block; }
</style>
</head>
<body>
<div id="content">words<br />words<br />words<br />
words<br />words<br />words<br />words<br />words<br />
words<br />words<br />words<br />words<br />words<br />
words<br />words<br />words<br />words<br />words<br />
words<br />words<br />words<br />words<br />words<br />
words<br />words<br />words<br />words<br />words<br />
words<br />words<br />words<br />words<br />words<br />
words<br />words<br />words<br />words<br />words<br />
</div>
<div id="nav"><a href="#">links</a><a href="#">links</a><a href="#">links</a><a href="#">links</a> 
</div>
</body>
</html>

Adam
<edit>added code</edit>

[grahamstewart]

Hmm... on the HTML4 spec page [w3.org] at w3c they use what looks like a fixed position logo ("W3C Recommendation") down the left hand side and it appears to work in IE.

But I presume it is actually a background image in a div or something.

Anyone care to investigate?

[encyclo]

a fixed position logo

IE can understand position:fixed; when it comes to background images - as used by the w3c in this case - but not for anything else.

background:#fff url(/path/to/image.gif) no-repeat fixed top left;

[isitreal]

Thanks drDoc, I'll have to read up on that frames link, I've been looking for a solution, I'll see if that's it.

[DrDoc]

IE doesn't even get fixed backgrounds right. When you specify

fixed

for a background, the position is always in relation to the viewport, not the current element.

[Bubba_Smith]

What you guys did here is great!

NOW.... how can I get this thing to work with this doctype? ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Surely it cannot be that I absolutely must use XHTML? I've tried both changing and then removing the XHTML doctype and no good.

[aeve]

Thanks Bubba, to get it to work in quirks mode or ie5 you have to make a div containing everything except the thing you want to fix (respectively #container and #nav in the example) and then do something like this:

body, html, #container {height: 100%; width: 100%; } 
/* ie hack \*/
* html, * html body, * html body #container {overflow: auto; } 
/* hidden from mac */
#nav {position: absolute; z-index: 10; }
body>#rnav {position: fixed; } /* might want to hide this from ie mac as well (won't change hover or cursor properties on links) */

ie5 and ie6 in quirks mode treat the body as the root element. I've gotten something like the above to work in all ie5+ no matter the doctype.

Adam

[photon]

You also need to declare a full DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Without the path, the browser will revert to quirks mode.