No Gap Above <a name> Text

In linking to name anchor tags throughout long pages I've noticed that following the link leads to a rather abrubt cutoff of the linked to text.

For an example, please visit this link on a skateboarding website (http://www.board-crazy.co.uk/tricks_f.php#feeble). Notice how the link takes you to the '#feeble' name anchor but that the actual 'Feeble Grind' text appears too close to the top of the browser.

This could of course be solved by making the anchor wrap around a <p>&nbsp;</p> above the actual text, but this is a last resort for me as I'd rather not clog up my code with otherwise functionless paragraphs or divs (not to mention there are several hundred of these anchors to modify).

Instead, I'm wondering if there is a CSS workaround? All my name anchors are H2 tags anyway, so a simple style element would be ideal. My H2 tags currently have 15 pixel padding-top which works great for layout but unfortunately the padding isn't recognised by the browser when linking directly to the name anchor. Margin-top has a similar effect (or lack of, as the case may be).

Anyone know of a way I could drop a few pixels in there that might affect the anchor as well as the layout?

EDIT : Just checked in IE and this is not an issue there - either Internet Explorer recognises the padding or it always puts a gap above name anchors when linked to anyway. Firefox is the problem.

Regards,
Pennimus.

Yup in IE I see no probs. Perhaps you could just give anchors a class and add a top margin to that?

<a class="anchor" ...

a.anchor { margin-top:10px }

Actually thinking about that, I'm not sure if it'd work... maybe substitute margin for padding.

Thanks, I appreciate the reply, but if it's going to involve editing each and every anchor I think I'll just live with it ;)

<h2><a name="fakie"></a><br/><br/>FAKIE</h2>

how about that?

Thanks hourang but as I said originally I'd rather not use this method as it clogs up the code and would involve hand editing hundreds of entries throughout the site. What I'm really looking for is a simple CSS solution that I can apply to all my H2 tags from the stylesheet but it's looking like one doesn't exist - but as this is only a minor cosmetic problem in firefox I'm not overly worried, it's just one of those niggly things you know :thumbsup:

without editing all the tags to put a class or breaks or putting the Title outside of the anchors(which is what you should do anyway), which can be done by a simple find and replace to save time, i do not see anyway besides if you put a margin on every <a> tag. i suggest putting the anchor tags before your <H2>'s :
<a name="cool"></a>
<h2>Cool</h2>

takes one second to do a find replace all:

find: "<h2><a "
replace: "<h2><a class='topmarginclass' "

I'm curious - why do you say that the title *should* be put outside the anchors?

I'm curious - why do you say that the title *should* be put outside the anchors?

well i shouldnt have put should, i guess it was the easiest way to do it without adding anything like classes or breaks, i guess its not proper to use empty anchors, my bad.