Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Senior Coder
    Join Date
    Jul 2005
    Location
    UK
    Posts
    1,051
    Thanks
    6
    Thanked 13 Times in 13 Posts

    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. 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.
    Last edited by Pennimus; 07-18-2005 at 11:56 PM.

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Senior Coder
    Join Date
    Jul 2005
    Location
    UK
    Posts
    1,051
    Thanks
    6
    Thanked 13 Times in 13 Posts
    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

  • #4
    New Coder
    Join Date
    Jul 2005
    Location
    detroit area
    Posts
    75
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <h2><a name="fakie"></a><br/><br/>FAKIE</h2>
    how about that?

  • #5
    Senior Coder
    Join Date
    Jul 2005
    Location
    UK
    Posts
    1,051
    Thanks
    6
    Thanked 13 Times in 13 Posts
    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

  • #6
    New Coder
    Join Date
    Jul 2005
    Location
    detroit area
    Posts
    75
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #7
    New Coder
    Join Date
    Jul 2005
    Location
    detroit area
    Posts
    75
    Thanks
    0
    Thanked 0 Times in 0 Posts
    takes one second to do a find replace all:

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

  • #8
    Senior Coder
    Join Date
    Jul 2005
    Location
    UK
    Posts
    1,051
    Thanks
    6
    Thanked 13 Times in 13 Posts
    I'm curious - why do you say that the title *should* be put outside the anchors?

  • #9
    New Coder
    Join Date
    Jul 2005
    Location
    detroit area
    Posts
    75
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Pennimus
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •