Avoid link target covered by fixed-position header

[selwyntcy]

When using with a Drupal theme with a fixed-position header at the top, the target footnote is covered by the header when clicking the footnote marker link on the body text, and vice versa.

I'm able to use the trick at https://css-tricks.com/hash-tag-links-padding/ on the footnote marker on the body text, but I can't make it with the target footnote.

Does anyone have similar problems? How do you solve it?

[andykirk]

Hi @selwyntcy - it's not something I'd considered. I tend not to use fixed headers.
Do you have an example I can look at? If I can I'll provide an example of how to solve it, but it's not something I think I'll be to fix in the plugin itself, as it's not likely to be possible to cater for all cases.

[selwyntcy]

Thanks @andykirk. Here is one example (sorry it's in Chinese) http://dsccc.inno-solution.com/en/publication/newsletter/issue44/article

The class "footnote" in the footnote marker anchor tag and the footnote li tag is added in the main plugin.js for my css (not applied on the url above, but it works):

a.footnote:before {
display: inline-block;
position: relative;
height: 150px;
margin-top: -150px;
visibility: hidden;
content: ' ';
}

[andykirk]

Some quick hacking:

[id^="footnote"]:before {
    content: '';
    padding-top: 150px;
    display: block;
    position: relative;
    margin-top: -150px;
    height: 0;
    z-index: -1;
}

Note 150px was just a guess, you can put what you value you like. Let me know how you get on.

[selwyntcy]

Wow, thanks for the code! It now works on all browsers except Firefox (both 39 or 41.0a2 (2015-08-05)).

I'm now using inline-block for the marker instead of block, coz the latter will place the marker at the front of a new line.

[id^="footnote"]:before {
    content: '';
    padding-top: 150px;
    display: inline-block;
    position: relative;
    margin-top: -150px;
    height: 150px;
    z-index: -1;
}
li[id^="footnote"]:before {
    display: block;
}

On Firefox, the li part works, but the marker (a) doesn't. Any idea?

[andykirk]

Not having much luck fixing it satisfactorily. FF just seems to behave differently.
I'll have another look when I get more time.