how to debug bookmark anchors not working

Question

I've got a really complicated html page and I've added some bookmark anchors at various points. The anchors look like this:

<a href="#foo bar">click here for foo bar</a>
lorum ipsum etc
<a name="foo bar">foo bar</a>

But when you click on them, nothing happens - the url in the address bar doesn't change, and the page doesn't move.

If I take my anchors out and put them into a simpler page, they start working, so I think something must be interfering with the navigation somehow, but I can't think how to nail it down. I wondered about an error in the javascript somewhere that was cancelling the navigation, but the page has thousands of lines of javascript and I've not found anything suspicious yet.

The problem occurs in both Chrome and Firefox.

How can I debug this problem?

---

UPDATE: Could this be a CSS issue? the target anchors are within a <div> with the CSS property overflow:auto;. This is causing the scroll bar to appear inside the div instead of the edge of the page - which was not the case with my simple text page.

UPDATE 2: overflow:auto doesn't break named anchors; tested with a simple example

Answer 1

named anchors need to have a have a one word name or id (id better, since name is being depecated)

this will work:

<a href="#foo-bar">click here for foo bar</a>
    lorum ipsum etc
<a id="foo-bar">foo bar</a>

Answer 2

Try this:

<a href="#foo bar">click here for foo bar</a>
lorum ipsum etc
<a id="foo bar">foo bar</a>

So basically change your name attribute for an id one.

Also... I think that it will basically be looking for "foo" rather than "foo bar". I haven't tested this though.