Firefox (Mac) jumps to wrong <a name - HTML forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Firefox (Mac) jumps to wrong <a name

andynick

12:44 pm on Jul 29, 2010 (gmt 0)

10+ Year Member

I joined this forum before I discovered links aren't allowed. It's very difficult to illustrate this problem without showing the page but I'll try to describe it.

I've been creating name anchors for years and they've always worked well until now. I have a recently created page where the 'next item' links to scroll down the (same) page work in Safari and Google Chrome but in Firefox (3.6.8) the first link goes to the correct place on the page. The second just shifts slightly, then the rest don't do anything.

I understand I shouldn't post the entire page-worth of HTML but wondered whether anyone has any knowledge of this problem with Firefox.

I validated the page on W3 and it wears the 'pass' badge with pride but Firefox still isn't interested.

I've tried re-naming the anchor name but with no success.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The page contains just HTML and CSS - with a Google Site Search at the top of the page.

tedster

4:24 pm on Jul 29, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hello Andynick - welcome to the forums.

Since you validated your mark-up, and it works in other browsers - it does sound like this might be a browser bug. Maybe there's a work-around for it we can discover.

What does the html for a typical page fragment identifier look like?

kaled

4:37 pm on Jul 29, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

For any problem of this sort, you should create a test page by copying the page that fails and cutting it down to the simplest possible code that fails. Probably, you'll be able to figure out what the cause is yourself, but if not, you can then post the code here and someone will probably be able to figure it out.

Be aware that you can jump to a <div> by specifying it's id value (i.e. there's no need to used named anchors) so it's possible that a conflict exists. Also, any anchor name that is not valid as a javascript identifier might be problematic.

Kaled.

rocknbil

7:24 pm on Jul 29, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Right, and an important factor in this, it is entirely valid to have two items with the same name on a page (or, at least, the validator won't error or warn on it, I just checked) but two ID's with the same value **will** kick an error. I suggest recoding them like so

<a id="test"></a>
<a id="test2"></a>

andynick

8:31 pm on Jul 29, 2010 (gmt 0)

10+ Year Member

Thanks for the welcome!

This is the sort of code I'm using (although I note you're advocating CSS):

<a name="1st"></a>
<a href="#1st">Go to the first item</a>

<a name="2nd"></a>
<a href="#2nd">Go to the next item</a>
<a href="#1st">Go to the previous item</a>

<a name="3rd"></a>
<a href="#3rd">Go to the next item</a>
<a href="#2nd">Go to the previous item</a>

Is this incorrect?
(Always worked for me in the past - I just can't understand why it won't work in Firefox now).

Fotiman

9:00 pm on Jul 29, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

According to the HTML HTML 4.01 spec [w3.org]:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Therefore, it's invalid to have something named "1st" because it does not begin with a letter. You might try modifying your names to be valid and see if that fixes the problem.

andynick

9:09 pm on Jul 29, 2010 (gmt 0)

10+ Year Member

Thanks Fotiman, it'll have to wait until morning now (bed time here in the UK for me as I get up at 0530 every morning).

I'll get on to it as soon as possible and report back.

andynick

7:03 am on Jul 30, 2010 (gmt 0)

10+ Year Member

I changed the name tokens to "n01", "n02" etc but it made no difference.

I then duplicated the page and started to cut out as much unnecessary detail as possible (with a view to posting my code here). While I was doing this, I realised I needed references to be able to see where I'd navigated to on the page (which now had no text or pictures).

I added text to the name tags <a name="01">ONE</a>(instead of <a name="01"></a>).

From this I discovered that the name tags appeared to be floating into the wrong positions in the Firefox preview . . . (is this possible)?

Either way, I simplified the structure of the tags and nailed them to the floor - and all worked fine.

Thanks for your help. It may not have directly given me the answer but the rebuild of the page certainly got it working correctly - and it revalidated OK too!

tedster

7:14 am on Jul 30, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Glad you got it working. Your experience of trying to reduce the code - and then fixing the problem within that process - is one of the reasons we don't usually want to see links here. I've become such a fan of this approach over the years that it's ALWAYS the way I debug a browser problem.

If you had just linked, someone else gave you a fix, and then you changed the code - well, this thread could have had a lot less value for the hundreds or thousands who will read it in the future.

Thanks for engaging the process with us. I wish we could have pinned down the exact issue a little better, but it's good to know you got it to work cross browser.

rocknbil

5:54 pm on Jul 30, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Something else to add here:

<a href="#some-anchor">

Note the #. Now look at CSS:

#some-anchor { color: #000; }

What does # refer to in CSS? An ID. Not a name. Another reason to drop name and use ID. :-)