Anchor tag jumping to hash not working

Question

I've read various posts on this subject and think I understand the usual points of failure. I find that my two product thumbnail images, under the "This Click'n'Pick Set Consists Of The Following 2 Products" heading, are clickable, but do not take me to the named <div> element further down the page. Instead, they cause navigation to http://www.premierrange.co.uk/#bundle_product_anchor_448, for example. I see this both in Chrome (18.0.1025.33 beta) and Firefox (10.0.1) on Linux.

http://www.premierrange.co.uk/index.php?main_page=clicknpick&groups_id=2&chosen_0=243&chosen_1=448

So for example there's an anchor targeting '#bundle_product_anchor_243':

<a href="#bundle_product_anchor_243" title="Click here to jump to the 70cm Truly Curved Black Glass Curved Cooker Hood H77-7B">
    <img src="http://www.premierrange.co.uk/thumbnailer.php?filename=images/H77-700.jpg&amp;height=100" alt="70cm Truly Curved Black Glass Curved Cooker Hood H77-7B">
</a>

This targets the <div> further down the page:

<div class="productSeparator" id="bundle_product_anchor_243">
    <h1>Product number 1 in this bundle of 2 products</h1>
</div>

I've also tried making the <h1> inside the target <div> be the target instead, in case the target must be an inline element rather than a div, but nothing seems to work.

The <div> containing the badly behaving <a> is completely closed by the time the <div> containing the target element appears in the document. I don't think there's a problem with the target element not being defined at the point in time the <a> is parsed by the browser.

Manually adding "#bundle_product_anchor_448" to the URL does work.

I am aware that the page fails HTML validation on a large number of points, due to a large number of factors that I'm not going to be able to address easily. I'd have thought this basic 'jump to a named element' functionality should work regardless. The page is completely functional other than this little navigation quirk.

Anyone got any clues?

Answer 1

Try removing <base href="http://www.premierrange.co.uk/"></base> from the page header.

The <base> tag specifies the base URL or target for all relative URLs (the ones that don't say http://www.example.com/...) on your page. Without it, your link should function as intended though you may have to fix other links to accommodate this change.

Answer 2

While using the <base> tag in your application, the best approach would be to just use absolute URL's before the hash, with the absolute URL pointing to the same page you're in.

So, assuming that you are on the 'http://example.com/products/curved-glass' page, instead of

<a href="#bundle_product_anchor_243">...

you would need to include the absolute current URL before the hash:

<a href="http://example.com/products/curved-glass#bundle_product_anchor_243">...     

Finding out the current URL is a trivial task in most of the environments, and this method also avoids the removal of your <base> tag, action which might have negative consequences in other areas of your application.