Anchors not working in Explorer

[lucylo]

Hi

I have set some anchor links on my site and although they work fine in Firefox they don't work at all in Explorer (IE8). Any ideas as to how I can fix this please?

[phrasespot]

Please provide an address where the problem is present and turn off CCC (Back Office > Preferences > Performance >CCC Combine, Compress and Cache) so I can see the page source unmodified.

[lucylo]

Hi

 

An address where you can find anchor links is: http://www.handmade-lakeland-jewellery.co.uk/content/6-customer-services

 

I confirm I've turned off CCC.

[phrasespot]

First of all, it is horrendous HTML. I realize this is the result of using WYIWYG editor and not your fault. But you really need to clean it up and make sure that the page validates. Cleaner the HTML better the page will work. Switch to HTML view to check the code generated by editor after you create a CMS page.

 

That said, you may still be able to get the anchors working if you change as follows:

 

Currently you use the following construct:

 

<a href="#pay">Go to pay anchor</a>
.
.
.
.
<p><a name="pay"></a></p>
<p></p>
<h4>Header for pay subject</h4>

 

1- Use id attribute instead of name attribute (or both if you wish but will not validate)

2 -Include the anchor in an already existing tag instead of creating a new empty <a> element (empty elements may end up with 0,0 screen coordinates depending on other styling in force in the page. I suspect this is the reason of current problem).

3- Make anchor names (that is, ids) quite distinct (so there is no accidental name clashes)

 

thus:

 

<a href="#section-pay">Go to pay anchor</a>
.
.
.
.
<h4 id="section-pay">Header for pay subject</h4>

 

 

An alternative is (and use this alternative only if you have a good reason not to use the above solution) to add a CSS rule for all empty anchors with name attribute: display: inline-block;

So you would do:

 

<a href="#pay">Go to pay anchor</a>
.
.
.
.
<p><a name="pay" style="display:inline-block;"></a></p>
<p></p>
<h4>Header for pay subject</h4>

 

Let me know if you are still having problems after making those changes

[lucylo]

Thank you very much for your advice. I have made the changes you suggested and the anchors are now working in IE8. I have also taken note of your comment about the html and will work on WC3 validation.

 

Greatly appreciated!