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.