Anchor Tag doesn't work in Firefox

HTML & CSS
1

Here’s my notation:

<div style="clear:both;"></div>
<a name="anchor_name" id="anchor_name"></a>
<div id="section_content">...</div>

I can find nothing wrong with my syntax, yet instead of sending me to the section, it sends me all the way to the bottom of the page. Here’s how I’m attempting to call the link:

<a href="URL#anchor_name">Link to Anchor</a>

How do I get the link to direct to “section_content” and not to the bottom of the page? I’ve tried placing the anchor inside the “clear” div, inside the “section” div, and no results, It still keeps sending me to the bottom.

Help!

2

I can’t imagine it’s your problem, but you don’t need the name="anchor_name". Stranger things have happened…

3

The anchor is the link, not the target.
so the link will be

<a href="#section_content" title="Go to Section">Link to Anchor</a>

And the target will be:-

<div id="section_content">...</div>
4

I tried that and it STILL keeps sending me to the bottom.

5

Do you have two ids with the same name/value on the page?

6

Do you have a full page example?
How it works is, the link takes you to the element with the ID named in the href attribute of the anchor tag.

7

Do you think it might be THIS that isn’t working? From some of my pages, I’m using Javascript to link to the sections:

try { window.location.href = “URL#anchor_name”; }
catch(e) { document.location.href = “URL#anchor_name”; }

See anything wrong here?

8

Here’s the full page:

http://www.wingsovercanada.ca/store_best_of.html

And here’s where I’m trying to link to it from:

9

Would this cause any problems?

<a id="anchor_name"></a>
<div id="source_section">...

<a href="targetURL#anchor_name">Link Text</a>

</div>

Basically, an anchor by the same name is being targeted on another page. Except when I change one of the names, I still get the same results.

10

I don’t know if this was your original issue…BUT…if you are linking from an external page you will need the URL AND the anchor in the HREF attribute of the A tag. Right now it doesn’t appear you have that. So your current links are looking for an id in the same page they are on rather than your target page.

try something like: href=“http://www.wingsovercanada.ca/store_best_of.html#anchor_name”

1 Like
11

There are duplicate IDs on the page, among other things.
https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.wingsovercanada.ca%2Fcatalog.html

12

I don’t see any links to the other page on the page.

If you use this URL with the ID, it does take you to that part of the page

<a href="http://www.wingsovercanada.ca/store_best_of.html#BCpart2">
1 Like
13

I’m beginning to see it work sometimes, but not always. Is it possibly that my version of Firefox is corrupt?

As for the duplicate IDs, I see them, but none of them are part of any hyperlinks so I’m not particularly worried. It’s the ID’s I’m trying to link to that concern me, and the worst I’ve been able to find is attempting to link to another anchor by the same ID on another page.

14

I doubt the problem is with Firefox.

As @system says, you have a link from http://www.wingsovercanada.ca/catalog.html to this page http://www.wingsovercanada.ca/store_best_of.html, but the link does not include a fragment identifier (#idname). You seem to be confused about how these links work.

Suppose you have an item on your page with an id of “example”. It could be anything; for argument’s sake, I’ll use an <h2>. You can set up a link from anywhere within that page to jump directly to that h2. Like this:

<h2 id="example">This is an article about an example</h2>

and then elsewhere

<a href="#example">Link to article about example</a>.

If you want to link to it from a different page, then you would need to include the target page in the URL.

<a href="article.html#example>Link to article about example</a>

Does that help, or not?

15

You’re right, I’m very confused… yet everything worked fine until I converted to HTML5. Then all of a sudden my hyperlinks started directing to the wrong part of the page (usually the bottom).

16

As @SamA74 advised, you should run your pages through the validator, because you do have a lot of errors. Most of them are nothing to do with your current issue, but they do need fixed - if only to help you see tell the wood from the trees.

Then check that your links are all set up correctly.

1 Like
17

Converting to html5 is more than just changing the doctype declaration. The pages are full of attributes that are obsolete in html5.
See above link to the validator.

1 Like
18

I tried changing some of my ID styles to classes and that seems to have done the trick.

Thanks

19

Using the full URL also seems to have helped… as opposed to just:

<a href="store_best_of.html#BCpart2">

Once I stick the web address in front, my browser seems less confused, but in the end I had to change some of my styles too (as I mentioned to TechnoBear). In the end, I think it was the “clear” div that was confusing my browser. Once I changed “clear” from an ID to a class style, that seemed to clear it up (no pun intended).

Anyway, thanks guys.

20

That code was only needed to support both Netscape 4 (which needed the <a name="anchor_name" and more modern browsers that just need the id="anchor_name" - unless you still need to support Netscape 4 you can just use any id already in the page as the destination.