Welcome to WebmasterWorld Guest from 54.211.136.250

Forum Moderators: not2easy

Message Too Old, No Replies

Cross-Browser Fixed Positioning problems

Mac - Safari Problem with Fixed Positioning

   
1:19 pm on Nov 12, 2006 (gmt 0)

5+ Year Member



Hello!

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

1:46 pm on Nov 12, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Which version of Safari did you use? In my 2.0.4 (419.3) your div is fixed.
9:59 pm on Nov 12, 2006 (gmt 0)

5+ Year Member



I've tried it on Safari 2 and it worked... but in Safari 1 :(

The site needs to be compatible with that version of the browser too.

12:44 am on Nov 13, 2006 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Safari 1.x is Panther (OS X 1.3.x) or even earlier. Tiger (1.4.x) has been out a while and Leopard (1.5.x) is around the corner.

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.

1:55 am on Nov 13, 2006 (gmt 0)

5+ Year Member



I know the CSS doesn't validate.
It's because the Star HTML hack that makes the
* html anything
properties to be read only by IE. I've used some proprietary commands to make IE support fixed positioning, but this is not the problem.

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

7:28 am on Nov 13, 2006 (gmt 0)

5+ Year Member



hi,

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>

7:58 pm on Nov 13, 2006 (gmt 0)

5+ Year Member



Thanks a lot!

That really helped me!
:)

Cheers!