homepage Welcome to WebmasterWorld Guest from 54.161.155.142
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Cross-Browser Fixed Positioning problems
Mac - Safari Problem with Fixed Positioning
mihai2u




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

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

 

Span




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

Which version of Safari did you use? In my 2.0.4 (419.3) your div is fixed.

mihai2u




msg:3154579
 9:59 pm on Nov 12, 2006 (gmt 0)

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.

swa66




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

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.

mihai2u




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

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

yuval_raz




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

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>

mihai2u




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

Thanks a lot!

That really helped me!
:)

Cheers!

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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved