Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > #top anchor doesn't work in FF

Reply
Thread Tools

#top anchor doesn't work in FF

 
 
Bernhard Sturm
Guest
Posts: n/a
 
      10-31-2007

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
 
Reply With Quote
 
 
 
 
Harlan Messinger
Guest
Posts: n/a
 
      10-31-2007
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/li...nchors-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>
 
Reply With Quote
 
 
 
 
Neredbojias
Guest
Posts: n/a
 
      10-31-2007
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/li...nchors-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.
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      10-31-2007
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
 
Reply With Quote
 
sturm
Guest
Posts: n/a
 
      10-31-2007
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
 
Reply With Quote
 
sturm
Guest
Posts: n/a
 
      10-31-2007
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
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      10-31-2007
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
 
Reply With Quote
 
Bernhard Sturm
Guest
Posts: n/a
 
      10-31-2007
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
 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      10-31-2007
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.
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      10-31-2007
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Anchor element doesn't work with full path AAaron123 ASP .Net 3 03-16-2009 02:22 AM
Link Button control and anchor within page do not work in Mobile 6.0 David C ASP .Net Mobile 2 08-31-2008 12:23 AM
applying className to anchor doesn't work odelya Javascript 6 02-13-2008 01:11 AM
anchor question Mike P ASP .Net 1 08-05-2003 12:14 PM
moving to an anchor point programmatically Craig Phillips ASP .Net 2 07-03-2003 01:32 PM



Advertisments