I have a centered 3 column layout with fixed/sticky navigation on the left and a fixed/sticky sidebar on the right.
Safari, unfortunately, treats fixed elements differently then most browsers and is overlapping the sidebar on my left side navigation. I can bump it over with a margin, but that screws up alternate browsers.
Suggested workarounds?
http://samples.marathonweb.com/templates/html/myrtle/youngsters.html
Thanks for looking this over.
Are you sure html5 elements like nav, aside, footer are implemented well in Safari?
Not certain, but I’ll also never heard of/experienced any issues.
I have a feeling, though, that is is just Safari’s different implementation of “position: fixed” (quite possibly the correct implementation).
Would you try and change nav, aside, footer with div, see where it gets you?
Yup, but no dice. I’m now experimenting with an alternate sticky sidebar technique. I’ll let you know if I have any luck.
True. Going to http://html5test.com/ with Safari will show it has support for section elements.
OK, lets see what else.
You have some expression in your CSS. See if commenting them results in consistent behaviour cross browsers. They throw some errors:
Warning: Expected ‘,’ or ‘{’ but found ‘html’. Ruleset ignored due to bad selector.
Source File: http://samples.marathonweb.com/templates/html/myrtle/assets/css/stylesheet.css
Line: 25
Ahhh, but you use both float and position on aside? This can’t be right 
You need to make up your mind.
Scratch float:right; and put right: 0; (or whatever) for aside.
That though, takes it all the way to the right edge of the browser window - I want it constrained to the width of the container.
If it helps, I started with this tutorial: http://designm.ag/tutorials/sticky-sidenav-layout/
Then, since it’s all fixed width, put left: 828px; for aside.
That’s measured from the browser window, not the container. 
position:fixed targets the browser windows, not the container. You cannot cater for the space between two fixed position elements. That’s why I said: right:0; or whatever 
However, by just giving some padding-left to aside, I can fix the layout for Safari, but it breaks in Firefox.
So is there a way, via CSS or javascript to only target Safari with that rule? (Without resorting to hacks.)
JS maybe. But it’s the wrong approach. And layout. Sorry, but it is.
I’ve gotten it to work the way I wanted. Scrapped a bit of my early work and went with this example: http://static.jqueryfordesigners.com/demo/fixedfloat.html There may be some bits and pieces I still have to adjust, but I’m in a much better position. Thanks for the help.
De nada
Good luck. But I will say this: don’t rely on a layout using fixed positioning and JS.