I'm looking for some advice here.
Using a browser that supports fixed positioning (not IE), take a look at:
http://tranchant.plus.com/guitar/chord-tutorial/
The page consists of a fixed header and menu, with scrolling content.
The content goes under the header - in Firefox/Mozilla, and allegedly
Safari, you can see this due to the slight transparency of the header.
I've assigned an appropriate (50px) margin-top to the content so that it
starts below the header when the page is loaded.
OK, now click on the "Chords on the guitar" link in the Contents list.
*If* you have Javascript enabled, your browser should do what you
expect, leaving the appropriate <h2> just below the header bar.
Now reload the page - and notice how the <h2> is at the top of the
viewport, underneath the header bar.
In the first case, some Javascript detects if you're clicking a fragment
link, jumps to it, and then scrolls up 55px to compensate.
Can anyone think of a better way to ensure that links to fragment
anchors, whether from the current page or a different one, are aligned
as I want? I'm after some sort of viewport-margin, but don't want to
resort to assigning a scrollbar to the content div separately.
--
Mark.
http://tranchant.plus.com/