Forum Moderators: not2easy
I've fixed positioned a side menu in a website with horizontal scrolling.
It works on (unix) Konqueror, (pc/unix/mac) Firefox, (pc) IE 6, but on the (mac) safari it doesn't stay fixed.
How can I make this page work on that browser?
Here is the stripped code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mac Fixed Positioning =?</title>
<style>
#leftcol {
background:#000;
position:fixed;
width:200px;
height:334px;
z-index:100;
}
* html #leftcol {
position:absolute;
left: expression( ( ( ignoreMe2 = document.documentElement.scrollLeft? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
z-index:100;
}
#rightcol {
margin-left:200px;
width:2000px;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="leftcol">
LeftCol
<!-- Leftcol --></div>
<div id="rightcol">
<p>Lorem Ipsum Dolor Sit Amet</p>
<!-- Rightcol --></div>
</body>
</html>
Hopefully this problem will get solved,
Mihai
The site needs to be compatible with that version of the browser too.
You do know the CSS doesn't validate (the expression is a syntax error)? I guess it's a MSIE thing and would suggest banning it to a conditional statement, to make sure none of the other browsers start to use that part.
Catering for people refusing to update their browser and having CSS is a very hard combination as the old browsers are just too buggy to deal with (IMHO). Once the vendor stops supporting it, it's time to drop them as well.
I didn't want to use javascript to make this menu stay fixed, but I guess this is the last chance to make it work.. as i don't see any other solutions.
Cheers,
Mihai
i've encountered the same problem while trying to do a fix positioning of my own.
i added some code and here it is. hopefully it will work for you.
comments:
i have added another wrapper called "fake_body" to the markup and taken the left column out of it to simulate a fixed positioning. this should work cross-browser (and no need for any hacks or css expressions), it should validat.
here is the code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mac Fixed Positioning =?</title>
<style type="text/css">
body , html{
height: 100%;
overflow: hidden;
}
#fake_body{
height: 100%;
overflow: auto;
}
#rightcol {
margin-left:200px;
width:2000px;
border:1px solid #000;
}
#leftcol {
top: 0;
left: 0;
background:#000;
position: absolute;
width:200px;
height:334px;
z-index:100;
}
</style>
</head>
<body>
<div id="fake_body">
<div id="rightcol">
<p>Lorem Ipsum Dolor Sit Amet</p>
</div>
</div>
<div id="leftcol">LeftCol</div>
</body>
</html>
That really helped me!
:)
Cheers!
