#top anchor doesn't work in FF

Discussion in 'HTML' started by Bernhard Sturm, Oct 31, 2007.

  1. Hi Group,
    We are currently testing a site: http://wwwt.ichschweiz.admin.ch/ which
    has a 'top of page' navigation at the bottom of each page (pointing to
    an anchor at the top of the html-structure).
    The problem is, that this 'top of page'-navigation doesn't seem to work
    with Firefox (2.0.0.9 / Windows XP). IE has no problem with the link. I
    am sure I made something wrong, but I can't figure out where I missed
    the right turn. Could some of you have a look at it, and tell me where I
    missed it?

    Any help appreciated
    Bernhard

    --
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Oct 31, 2007
    #1
    1. Advertising

  2. Bernhard Sturm wrote:
    >
    > Hi Group,
    > We are currently testing a site: http://wwwt.ichschweiz.admin.ch/ which
    > has a 'top of page' navigation at the bottom of each page (pointing to
    > an anchor at the top of the html-structure).
    > The problem is, that this 'top of page'-navigation doesn't seem to work
    > with Firefox (2.0.0.9 / Windows XP). IE has no problem with the link. I
    > am sure I made something wrong, but I can't figure out where I missed
    > the right turn. Could some of you have a look at it, and tell me where I
    > missed it?


    You have a div with id="top" and an anchor with name="top". This is
    incorrect HTML:

    http://www.w3.org/TR/html4/struct/links.html#anchors-with-id

    Firefox sees two different elements that could be the destination for
    the link and therefore can't react to it. (The fact that they are nested
    or adjacent is irrelevant.) IE probably handles the flawed code by
    ignoring the A tag because by that point it has already registered the
    DIV tag as the "top" element.

    The solution is to take the ID off the DIV and stick it in the anchor:

    <div><a id="top" name="top"></a></div>
     
    Harlan Messinger, Oct 31, 2007
    #2
    1. Advertising

  3. Bernhard Sturm

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Wed, 31 Oct 2007 12:24:14
    GMT Harlan Messinger scribed:

    > Bernhard Sturm wrote:
    >>
    >> Hi Group,
    >> We are currently testing a site: http://wwwt.ichschweiz.admin.ch/
    >> which has a 'top of page' navigation at the bottom of each page
    >> (pointing to an anchor at the top of the html-structure).
    >> The problem is, that this 'top of page'-navigation doesn't seem to
    >> work with Firefox (2.0.0.9 / Windows XP). IE has no problem with the
    >> link. I am sure I made something wrong, but I can't figure out where
    >> I missed the right turn. Could some of you have a look at it, and
    >> tell me where I missed it?

    >
    > You have a div with id="top" and an anchor with name="top". This is
    > incorrect HTML:
    >
    > http://www.w3.org/TR/html4/struct/links.html#anchors-with-id
    >
    > Firefox sees two different elements that could be the destination for
    > the link and therefore can't react to it. (The fact that they are
    > nested or adjacent is irrelevant.) IE probably handles the flawed code
    > by ignoring the A tag because by that point it has already registered
    > the DIV tag as the "top" element.
    >
    > The solution is to take the ID off the DIV and stick it in the anchor:
    >
    > <div><a id="top" name="top"></a></div>


    Yes, and there's also something with the css/javascript display:none; on
    the current "top" div. When I change things to:

    <div id="top" style="display:block"><a name="tp" id="tp"></a></div>

    and

    <div id="gotop"><a href="#tp" title="zum seitenanfang">zum seitenanfang
    </a></div>

    ....it works.

    --
    Neredbojias
    Just a boogar in the proboscis of life.
     
    Neredbojias, Oct 31, 2007
    #3
  4. Harlan Messinger wrote:

    > The solution is to take the ID off the DIV and stick it in the anchor:
    >
    > <div><a id="top" name="top"></a></div>


    Or better yet delete the superfluous empty DIV and empty A and

    <!-- REMOVE: <div id="top"><a name="top"></a></div> -->

    <div id="accessibility"> ...

    And either change following DIV's to "top" or change your "to top"
    links' hrefs to "#accessibility".

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 31, 2007
    #4
  5. Bernhard Sturm

    sturm Guest

    Jonathan N. Little wrote:
    > Harlan Messinger wrote:
    >
    >> The solution is to take the ID off the DIV and stick it in the anchor:
    >>
    >> <div><a id="top" name="top"></a></div>

    >
    > Or better yet delete the superfluous empty DIV and empty A and


    The page will not validate if the <a id="top" name="top"></a> is not
    nested within a div :-( I tried that already. Seems as HTML-strict will
    not tolerate a structure like <body> -> <a>

    >
    > <!-- REMOVE: <div id="top"><a name="top"></a></div> -->
    >
    > <div id="accessibility"> ...
    >
    > And either change following DIV's to "top" or change your "to top"
    > links' hrefs to "#accessibility".
    >


    But then they wouldn't be working as #accessibility is not designed to
    be shown on a visual UA.

    cheers bernhard

    --
    www.daszeichen.ch
    remove nixspam to reply
     
    sturm, Oct 31, 2007
    #5
  6. Bernhard Sturm

    sturm Guest

    Neredbojias wrote:
    > Well bust mah britches and call me cheeky, on Wed, 31 Oct 2007 12:24:14
    > GMT Harlan Messinger scribed:
    >>
    >> The solution is to take the ID off the DIV and stick it in the anchor:
    >>
    >> <div><a id="top" name="top"></a></div>

    >
    > Yes, and there's also something with the css/javascript display:none; on
    > the current "top" div. When I change things to:
    >
    > <div id="top" style="display:block"><a name="tp" id="tp"></a></div>
    >
    > and
    >
    > <div id="gotop"><a href="#tp" title="zum seitenanfang">zum seitenanfang
    > </a></div>
    >
    > ...it works.
    >


    You are right, I have changed it the way you suggested it. Now
    everything seems to be okay.

    Thanks for the help and enlightment.
    Bernhard

    --
    www.daszeichen.ch
    remove nixspam to reply
     
    sturm, Oct 31, 2007
    #6
  7. sturm wrote:
    > Jonathan N. Little wrote:
    >> Harlan Messinger wrote:
    >>
    >>> The solution is to take the ID off the DIV and stick it in the anchor:
    >>>
    >>> <div><a id="top" name="top"></a></div>

    >>
    >> Or better yet delete the superfluous empty DIV and empty A and

    ^^^^^^^^^^^^
    >
    > The page will not validate if the <a id="top" name="top"></a> is not
    > nested within a div :-( I tried that already. Seems as HTML-strict will
    > not tolerate a structure like <body> -> <a>



    Of course not and inline element must be in a block element. I said
    delete both.
    >
    >>
    >> <!-- REMOVE: <div id="top"><a name="top"></a></div> -->
    >>


    See I show it *all* commented out

    >> <div id="accessibility"> ...
    >>
    >> And either change following DIV's to "top" or change your "to top"
    >> links' hrefs to "#accessibility".
    >>

    >
    > But then they wouldn't be working as #accessibility is not designed to
    > be shown on a visual UA.


    Then pick something at the top of the page that *is* shown on the visual UA:

    <div id="outer">
    ....


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 31, 2007
    #7
  8. Jonathan N. Little wrote:
    > sturm wrote:
    >> Jonathan N. Little wrote:
    >>>
    >>> <!-- REMOVE: <div id="top"><a name="top"></a></div> -->
    >>>

    >
    > See I show it *all* commented out
    >


    yes... but if there's no anchor for #top what will the UA do? According
    to the HTML-specs this is not defined. Only IE interprets a <a
    href="#top">Top</a> as a pointer to the top of the page, all others UA I
    tested do ignore it if the appropriate anchor is missing.

    >>>
    >>> And either change following DIV's to "top" or change your "to top"
    >>> links' hrefs to "#accessibility".
    >>>

    >>
    >> But then they wouldn't be working as #accessibility is not designed to
    >> be shown on a visual UA.

    >
    > Then pick something at the top of the page that *is* shown on the visual
    > UA:
    >
    > <div id="outer">
    > ...
    >

    which would then irritate text only UA users, as they are no longer
    taken to the top of their page, which is at #accessibility :) sometimes
    one has to trade off things...

    but thanks for your suggestions
    bernhard

    --
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Oct 31, 2007
    #8
  9. Bernhard Sturm

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Wed, 31 Oct 2007 14:35:08
    GMT sturm scribed:

    >>> The solution is to take the ID off the DIV and stick it in the
    >>> anchor:
    >>>
    >>> <div><a id="top" name="top"></a></div>

    >>
    >> Yes, and there's also something with the css/javascript display:none;
    >> on the current "top" div. When I change things to:
    >>
    >> <div id="top" style="display:block"><a name="tp" id="tp"></a></div>
    >>
    >> and
    >>
    >> <div id="gotop"><a href="#tp" title="zum seitenanfang">zum
    >> seitenanfang </a></div>
    >>
    >> ...it works.
    >>

    >
    > You are right, I have changed it the way you suggested it. Now
    > everything seems to be okay.
    >
    > Thanks for the help and enlightment.
    > Bernhard


    'Welcome. Bear in mind I wasn't/am not sure of the reason for the
    "display:none;" on that div (via stylesheet) in the first place.

    --
    Neredbojias
    Just a boogar in the proboscis of life.
     
    Neredbojias, Oct 31, 2007
    #9
  10. Bernhard Sturm wrote:
    > Jonathan N. Little wrote:
    >> sturm wrote:
    >>> Jonathan N. Little wrote:
    >>>>
    >>>> <!-- REMOVE: <div id="top"><a name="top"></a></div> -->
    >>>>

    >>
    >> See I show it *all* commented out
    >>

    >
    > yes... but if there's no anchor for #top what will the UA do? According
    > to the HTML-specs this is not defined. Only IE interprets a <a
    > href="#top">Top</a> as a pointer to the top of the page, all others UA I
    > tested do ignore it if the appropriate anchor is missing.
    >
    >>>>
    >>>> And either change following DIV's to "top" or change your "to top"
    >>>> links' hrefs to "#accessibility".
    >>>>
    >>>
    >>> But then they wouldn't be working as #accessibility is not designed
    >>> to be shown on a visual UA.


    I think we have a failure to communicate here. My point is rather than
    make an empty little DIV with a anchor (old way)

    <div><a name="top"></div>

    Just find some element on the top of your page, any element, does not
    matter, just has to be at the top of your page. It may different
    depending on each page's contents. Then if you wish to keep the anchor
    name "top" than make then make the ID of that element "top" and it will
    create a "top" anchor.

    >>
    >> Then pick something at the top of the page that *is* shown on the
    >> visual UA:
    >>
    >> <div id="outer">
    >> ...
    >>

    > which would then irritate text only UA users, as they are no longer
    > taken to the top of their page, which is at #accessibility :) sometimes
    > one has to trade off things...
    >



    But <div id="outer"> *is* at the top of your page! So a link:

    <a href="#outer">To the top</a> would take them to the top of the page.
    There is nothing magical about the name "top", just it's location...


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 31, 2007
    #10
  11. Scripsit Bernhard Sturm:

    > We are currently testing a site: http://wwwt.ichschweiz.admin.ch/
    > which has a 'top of page' navigation at the bottom of each page
    > (pointing to an anchor at the top of the html-structure).


    Just remove those links. They are worse than useless. Every browser has a
    simple command to get to the start of a page on _any_ page. Duplicating that
    on a site-specific way just adds noise and pseudocontent and sometimes
    confuses people. The main page is so short that the link looks particularly
    pointless there. More arguments:
    http://www.cs.tut.fi/~jkorpela/www/totop.html

    P.S. Do you use browser-sniffing? That's a problem, too. I get different
    results (e.g. in date formats) when accessing the page on IE and on Lynx.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Oct 31, 2007
    #11
  12. Neredbojias wrote:

    >
    > 'Welcome. Bear in mind I wasn't/am not sure of the reason for the
    > "display:none;" on that div (via stylesheet) in the first place.
    >


    neither do I anymore :)

    bernhard

    --
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Oct 31, 2007
    #12
  13. Jonathan N. Little wrote:
    >
    > But <div id="outer"> *is* at the top of your page! So a link:
    >
    > <a href="#outer">To the top</a> would take them to the top of the page.
    > There is nothing magical about the name "top", just it's location...
    >


    I can see what you mean and I understand you perfectly :)... but my
    point is:
    div id="outer" is *not* at the top of my page (from a visual UA only
    standpoint it is, but you have to think at screen reader UAs). Look at
    the source:

    <body>
    <div id="accessibility>
    </div>
    <div id="outer">
    ....

    The top anchor needs to be _before_ the accessibility div but _not_
    within the accessibility div... that's why there is a *superfluous*
    empty div (as you put it) :)

    So my working structure is now:

    <body>
    <div><a name="top" id="top"></a></div>
    <div id="accessibility">
    </div>
    <div id="outer">

    I do admit: it looks awkward, but it serves its purpose...

    cheers
    bernhard

    --
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Oct 31, 2007
    #13
  14. Bernhard Sturm wrote:
    > Jonathan N. Little wrote:
    >>
    >> But <div id="outer"> *is* at the top of your page! So a link:
    >>
    >> <a href="#outer">To the top</a> would take them to the top of the
    >> page. There is nothing magical about the name "top", just it's
    >> location...
    >>

    >
    > I can see what you mean and I understand you perfectly :)... but my
    > point is:
    > div id="outer" is *not* at the top of my page (from a visual UA only
    > standpoint it is, but you have to think at screen reader UAs). Look at
    > the source:
    >
    > <body>
    > <div id="accessibility>
    > </div>
    > <div id="outer">
    > ...
    >
    > The top anchor needs to be _before_ the accessibility div but _not_
    > within the accessibility div... that's why there is a *superfluous*
    > empty div (as you put it) :)
    >
    > So my working structure is now:
    >
    > <body>
    > <div><a name="top" id="top"></a></div>
    > <div id="accessibility">
    > </div>
    > <div id="outer">
    >
    > I do admit: it looks awkward, but it serves its purpose...



    <body id="top">
    <div id="accessibility"> ...

    And anyway what is div "accessibility" for?

    #accessibility {
    position:absolute;
    left:-1000em;
    top:-1em;
    display:none;
    }

    If you are not displaying it why bother with left:-1000em;?


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 31, 2007
    #14
  15. Jukka K. Korpela wrote:
    >
    > Just remove those links. They are worse than useless. Every browser has
    > a simple command to get to the start of a page on _any_ page.
    > Duplicating that on a site-specific way just adds noise and
    > pseudocontent and sometimes confuses people. The main page is so short
    > that the link looks particularly pointless there. More arguments:
    > http://www.cs.tut.fi/~jkorpela/www/totop.html


    I use FF. Which button would bring me to the top of a page? 'Home'
    doesn't work, and what would be that button on an Apple computer having
    one of those brand new Apple wireless keyboards? (They do not sport the
    'Home'-Button on their keyboards). I have never met anybody (I mean not
    a 'geek') knowing that there is a button or a shortcut bringing him/she
    to the top of a page.

    >
    > P.S. Do you use browser-sniffing? That's a problem, too. I get different
    > results (e.g. in date formats) when accessing the page on IE and on Lynx.
    >

    No, no browser sniffing... Server side I use the LocaleIDs of the UA via
    ASP (ServerVariables("HTTP_ACCEPT_LANGUAGE")) in order to format date
    stamps. But I believe it is not correctly working.

    cheers for the remarks
    bernhard

    --
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Oct 31, 2007
    #15
  16. Jonathan N. Little wrote:
    >
    >
    > <body id="top">
    > <div id="accessibility"> ...


    but that again would not validate as it is not allowed to have an inline
    element without a block element.

    >
    > And anyway what is div "accessibility" for?
    >
    > #accessibility {
    > position:absolute;
    > left:-1000em;
    > top:-1em;
    > display:none;
    > }
    >
    > If you are not displaying it why bother with left:-1000em;?
    >


    :) I don't want to offer visual UA users access to navigational aids
    such as 'jump directly to content' or 'jump to the news' as they can use
    the mouse to do this but text only UAs (as smartphone users) should have
    this links.

    bernhard

    --
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Oct 31, 2007
    #16
  17. Bernhard Sturm wrote:
    > Jonathan N. Little wrote:
    >>
    >>
    >> <body id="top">
    >> <div id="accessibility"> ...

    >
    > but that again would not validate as it is not allowed to have an inline
    > element without a block element.


    ahh forget my comment. Of course you are right :) does that work with
    all browser? id as an anchor?

    bernhard

    --
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Oct 31, 2007
    #17
  18. Bernhard Sturm

    dorayme Guest

    In article <4728df2e$>,
    Bernhard Sturm <> wrote:

    > Bernhard Sturm wrote:
    > > Jonathan N. Little wrote:
    > >>
    > >>
    > >> <body id="top">
    > >> <div id="accessibility"> ...

    > >
    > > but that again would not validate as it is not allowed to have an inline
    > > element without a block element.

    >
    > ahh forget my comment. Of course you are right :) does that work with
    > all browser? id as an anchor?
    >
    > bernhard


    id works well enough in all modern browsers to identify a page
    point. That does not mean all modern browsers do exactly the same
    thing. Make yourself a test page and try it in different browsers
    when the ids are in different positions. My rough impression is
    that if the link is anywhere but in the bottom "less than a
    browser-height-worth" of a page, clicking it will bring the id
    point to the top. A good place to put such ids are in headings.
    The found point then look natural.

    (iCab has the clever little enhancement of briefly flashing a
    subdued elegantly colour horizontal gradient background to the
    point concerned - which is helpful when the point is not at the
    very top of the browser window)

    --
    dorayme
     
    dorayme, Oct 31, 2007
    #18
  19. Scripsit Bernhard Sturm:

    > I use FF. Which button would bring me to the top of a page? 'Home'
    > doesn't work,


    It works in typical situations. If you have an untypical situation, you
    should find out what works there - if you think that it is important to be
    able to get to the start of a page quickly. After all, other sites don't
    have the same kind of button as yours, and most of them (wisely) don't have
    any "to top" button.

    > I have never met anybody
    > (I mean not a 'geek') knowing that there is a button or a shortcut
    > bringing him/she to the top of a page.


    Really? Anyway, I expect all users to know how to move forward and backward
    on a page. (Or should all authors also add "Click here to move forward" etc.
    buttons? :) )Whether they know the obvious shortcuts like Home and End key
    is a matter of convenience, and knowing them surely helps more than learning
    to find different strange "to top" buttons on miscellaneous pages.

    >> P.S. Do you use browser-sniffing? That's a problem, too. I get
    >> different results (e.g. in date formats) when accessing the page on
    >> IE and on Lynx.

    > No, no browser sniffing... Server side I use the LocaleIDs of the UA
    > via ASP (ServerVariables("HTTP_ACCEPT_LANGUAGE")) in order to format
    > date stamps. But I believe it is not correctly working.


    The very idea is incorrect. When your page is in German, the dates in its
    content should follow whatever conventions you regard as applicable to the
    German language. The browser settings in a visitor's browser are irrelevant.
    Specifically, check what the Accept-Language request header is for. It is
    for selecting among different language versions of a page (when the same
    content exists in different languages). It is not meant for mixing, say,
    Chinese or Arabic or Finnish date notations into the content of a page in
    German.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Oct 31, 2007
    #19
  20. On Oct 31, 7:08 pm, "Jukka K. Korpela" <> wrote:

    > Scripsit Bernhard Sturm:
    >
    > > We are currently testing a site: http://wwwt.ichschweiz.admin.ch/
    > > which has a 'top of page' navigation at the bottom of each page
    > > (pointing to an anchor at the top of the html-structure).

    >
    > Just remove those links. They are worse than useless. Every browser has a
    > simple command to get to the start of a page on _any_ page. Duplicating that
    > on a site-specific way just adds noise and pseudocontent and sometimes
    > confuses people. The main page is so short that the link looks particularly
    > pointless there. More arguments:
    > http://www.cs.tut.fi/~jkorpela/www/totop.html


    You make some reasonable points on your page there, but I don't
    believe many surfers are aware of the more common keyboard
    "shortcuts".

    Perhaps I'm missing an obvious problem through it being late in the
    day here, but what about using:
    <a href="filename.html">Go to top</a>
    as a solution, where "filename.html" is the name of the page upon
    which the link appears? That way the focussing changes, the URL
    doesn't get altered, and the page scrolls to the absolute top. Works
    in Firefox and IE, and I can't see at quick glance that it would fail
    in any other visual browser.


    --
    AGw.
     
    AGw. (Usenet), Nov 1, 2007
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?QXJuZQ==?=

    valign=top doesn't always work

    =?Utf-8?B?QXJuZQ==?=, Dec 6, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    440
    =?Utf-8?B?QXJuZQ==?=
    Dec 6, 2004
  2. =?Utf-8?B?QXJuZQ==?=

    Valign=top doesn't always work

    =?Utf-8?B?QXJuZQ==?=, Dec 6, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    616
    Dave Fancher
    Dec 7, 2004
  3. AAaron123
    Replies:
    3
    Views:
    484
    AAaron123
    Mar 16, 2009
  4. odelya
    Replies:
    6
    Views:
    210
    Thomas 'PointedEars' Lahn
    Feb 13, 2008
  5. Erwin Moller
    Replies:
    1
    Views:
    650
    dorayme
    Jul 27, 2012
Loading...

Share This Page