homepage Welcome to WebmasterWorld Guest from 54.242.200.172
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
fixed, absolute position doesn't work on IE
irock




msg:1197909
 5:27 pm on Feb 21, 2004 (gmt 0)

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




msg:1197910
 5:50 pm on Feb 21, 2004 (gmt 0)

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




msg:1197911
 7:39 pm on Feb 21, 2004 (gmt 0)

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




msg:1197912
 8:50 pm on Feb 21, 2004 (gmt 0)

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




msg:1197913
 8:57 pm on Feb 21, 2004 (gmt 0)

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




msg:1197914
 9:48 pm on Feb 21, 2004 (gmt 0)

The first character of a selector identifier...

Well, _position is not a selector identifier anyway :)

iamlost




msg:1197915
 11:14 pm on Feb 21, 2004 (gmt 0)

>> 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




msg:1197916
 11:44 pm on Feb 21, 2004 (gmt 0)

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




msg:1197917
 12:30 am on Feb 22, 2004 (gmt 0)

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




msg:1197918
 1:46 am on Feb 22, 2004 (gmt 0)

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




msg:1197919
 8:07 am on Feb 22, 2004 (gmt 0)

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




msg:1197920
 6:58 pm on Feb 22, 2004 (gmt 0)

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




msg:1197921
 8:16 pm on Feb 22, 2004 (gmt 0)

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

aevea




msg:1197922
 9:47 pm on Feb 22, 2004 (gmt 0)

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




msg:1197923
 11:17 pm on Feb 22, 2004 (gmt 0)

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




msg:1197924
 12:07 am on Feb 23, 2004 (gmt 0)

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




msg:1197925
 12:36 am on Feb 23, 2004 (gmt 0)

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




msg:1197926
 1:53 am on Feb 23, 2004 (gmt 0)

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




msg:1197927
 4:46 pm on Mar 29, 2004 (gmt 0)

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




msg:1197928
 6:14 pm on Mar 29, 2004 (gmt 0)

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




msg:1197929
 1:49 pm on Mar 30, 2004 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved