Link offsets

The problem

CSS layouts that use a fixed top section have the problem that following in-document links causes the link to be presented at the top of the viewport where it is obscured by the fixed top section like this: Section 1 Note: the problem is only noticable in browsers that support position:fixed, MS Internet Explorer doesn't.

The solution

The solution is to specify an offset via the padding property on the link's target. Typically the target of a link will be a block level element such as a header, specifying a top padding on a block level element interferes with the layout, so that's not an option. Specifying it on an inline level element like this : <h3><a id="s1" style="padding-top:4em">Section 1</a></h3> circumvents this problem, however we run into trouble because the element has content, the top padding will obscure content located above it, it will still be visible but it can no longer be interacted with (e.g. selecting text, clicking links etc). So we use <h3><a id="s1"></a>Section 1</h3>, this way no problems occur. Demo: Section 2. The top-padding on the internal links is specified via an attribute selector, IE doesn't understand them so it ignores the padding which is exactly what we want.

CSS code used:

HTML code used:

Footnote

Doesn't work in Opera 6.