WTF -- position:fixed in IE ?

[sigmundSquirrel]

Apparently there is a problem with position:fixed in IE6 and older? I've got a submenu div that I want to remain at the top of its frame, and I've given it the CSS position:fixed -- which works in all browsers (Mac and PC) except for IE.

BTW -- here's the url if you want to look:
http://www.poddesign.com/myvu2/index.html?category=5

So I did some research and found a workaround that is specific to IE using the cool CSS expression(). But only IE should see this, so I wrapped it in a conditional comment. The relevant code looks like this:

<!-- THIS IS THE NORMAL STYLE WHICH WORKS IN MOST BROWSERS -->
<style type="text/css">
#submenu {
position: fixed;
z-index: 1;
left: 250px;
top: 0;
height: 50px;
width: 600px;
background-color: #000000;
}
</style>

<!-- THIS IS THE IE-SPECIFIC HACK WHICHIS ONLY IMPLEMENTED IN IE -->
<!--[if IE]>
<style type="text/css">
#submenu {
position: absolute;
z-index: 1;
left: 250px;
top: expression(body.scrollTop + 0 + "px");
height: 50px;
width: 600px;
background-color: #000000;
}
</style>
<![endif]-->

So I've set the #submenu style for standard browsers as position:fixed, then I write the IE-specific hack using the same submenu style name, which should overwrite it.

Of course, it doesn't work. And since I'm not familiar with the CSS expression() functionality, I'm not sure where the error is.

Any suggestions? Does anyone else use a position:fixed type behavior on IE?

Thanks,
sigmundsquirrel

[catbert303]

Hi,

The following seems to work -

top: expression((ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + 'px');

this was taken based on the example from http://www.howtocreate.co.uk/fixedPosition.html which explains some of the slightly strange things used in the expression (like why you need the ignoreMe variable)

[sigmundSquirrel]

Hi Catbert, that was a good find -- I checked out the linked page and copy-and-pasted your expression() code into my CSS with high hopes. You can see the page here:

http://www.poddesign.com/myvu2/index.html?category=5

Still not working for me. Don't know why... Since the "howtocreate" page says it works, I have to think I'm doing something wrong. Can you spot anything?

Here's the code now:

<style type="text/css">
#submenu {
position: fixed;
z-index: 1;
left: 250px;
top: 0;
height: 50px;
width: 600px;
background-color: #000000;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
#submenu {
position: absolute;
z-index: 1;
left: 250px;
top: expression((fixpos=document.documentElement.scroll Top ? document.documentElement.scrollTop : document.body.scrollTop) + 'px');
height: 50px;
width: 600px;
background-color: #000000;
}
</style>
<![endif]-->

Thanks,
sigmundsquirrel

[sigmundSquirrel]

Don't know what I did, but I retyped the expression() code again and now it's working. Hmmm...

Thanks, Catbert!