Anchor links in Firefox not working - new topic

[finch_finch]

I know this issue has come up before and I have followed all the possible solutions given on the threads/websites I've found and none have worked.

I have anchor links in a page which work in the following browsers:
IE7
Opera (latest - think it's 9)
on Mac:
Safari 1.2
IE for Mac 5.2

but they will not work in Firefox 2.0.0.6. When clicked on, the text on the page increases in size (it shouldn't) and does not jump to the anchor. Two links do work, but only if you click on them several times (usually in fury).

This is the code:

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

and the link:

<a href="#top">Back to top</a>

I have also tried <a name="top"></a> without the id tag.

I am re-writing an old page that was originally built using tables and the links work OK on that page. They are exactly the same!

The only difference I can see is that the old page is HTML 4.01 Transitional and the new is XHTML 1.0 Transitional. Am I missing something obvious? Any ideas appreciated!

Here is the link to the new page: < no personal urls, please >
(top navigation not working)

[edited by: tedster at 3:48 pm (utc) on Aug. 28, 2007]

[tedster]

Hello finch_finch, and welcome to the forums.

Have you validated both your html and your css?

W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]

Whenever there is odd behavior, especially cross browser, it is essential to fix all coding errors first. Otherwise the job can be literally impossible.

[pageoneresults]

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

The Name Attribute has been deprecated in favor of the ID Attribute. Try just using this...

<a id="top"></a>
<a href="#top">Back to top</a>

Keeping in mind that all IDs must begin with a letter and you can only have one unique ID per page.

I'd assign that ID to another block level element. I might do something like this...

<h1 id="top">Heading</h1>

[finch_finch]

The HTML doesn't validate because of some of the code in the Flash movie on the page, but the CSS is valid.

I've tried a couple more things and still the links won't work. Firefox must recognise them because if you right-click and open in new tab, it will send you to the right place on the new page.

I have no way of testing Firefox on a computer running XP, so I don't know if it's a Vista/FF combination problem.

[pageoneresults]

The HTML doesn't validate because of some of the code in the Flash movie on the page.

And that's all? There were no other errors referencing IDs or the Name Attribute?

I've also found that using Fragment Identifiers is not an exact science, especially with IE. This is very evident when browsing the W3 site as they use Fragment Identifiers throughout the entire site, that site is a "Web" in itself. You'll click on a link and end up just above or just below where the FI is. Sometimes it might be ATF or BTF (above or below the fold). I believe its a bug. :)

[finch_finch]

Nope, no errors refering to the name attribute.

I changed the name of an unrelated CSS class but it has made no difference. I also changed the DOC TYPE to HTML 4.0 Transitional like the old version of the page but still no go with FF.

It's not even CSS that seems to be causing the trouble! It's a pain because a third of the people visiting this site are using FF.

Thanks for your help so far though.

[finch_finch]

OK I've had a breakthrough in this - the problem is with the text increasing in size in FF when the link to the anchor is clicked on. As long as the mouse is moved back over the link when the click is released, it works.

So, forgive my stupidity, it was down to CSS after all. I was using the {font-size: inherit;} value in defining links on the page and FF decided it should be inheriting something on a different page when links were clicked on.

Thanks for your suggestions and I'm sorry for being a bit thick (and blind)!