#top anchor doesn't work in FF

[Bernhard Sturm]

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

 

[Harlan Messinger]

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>

 

[Neredbojias]

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

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.

 

[Jonathan N. Little]

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".

 

[sturm]

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

<!-- 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

 

[sturm]

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

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

 

[Jonathan N. Little]

^^^^^^^^^^^^

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.
See I show it *all* commented out

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">
....

 

[Bernhard Sturm]

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

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

 

[Neredbojias]

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

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.

 

[Jonathan N. Little]

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

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.

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...

 

[Jukka K. Korpela]

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.

 

[Bernhard Sturm]

'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

 

[Bernhard Sturm]

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

 

[Jonathan N. Little]

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;?

 

[Bernhard Sturm]

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

 

[Bernhard Sturm]

<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

 

[Bernhard Sturm]

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

 

[dorayme]

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)

 

[Jukka K. Korpela]

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.

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.

 

[AGw. (Usenet)]

Scripsit Bernhard Sturm:


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.