HTML anchor tags not working in Firefox, Safari, iPad and iPhone

Question

My html anchor tags work in chrome and IE but in Firefox, Safari, iPad and iPhone they do not work, how come? and what can I do to fix it?

<a href="/services#underpinning">Underpinning</a>

Any help would be appreciated.

Thanks.

This is what I am trying to link it to on the services page:

<h1 id="#underpinning" name="underpinning">Underpinning</h1>

This is where I left off:

This is my link:

<li><a href="/services#underpinning"><h2 id="underpinning">Underpinning<a href="services#underpinning"><img class="alignnone size-full wp-image-127" alt="home" src="http://powellgroupconstruction.com/wp-content/uploads/2013/12/home.jpg" width="500" height="337"></a></h2></a></li>

This is where on my services page I want the link to goto:

<a name="underpinning"><h1 id="underpinning" name="underpinning">Underpinning</h1></a>

If I goto the url directly: http://powellgroupconstruction.com/services/#underpinning into safari or firefox, it works.

Solution

There are several issues in your code. On your example website you're using HTML5 Doctype, so I'm just answering respectively with HTML5 in mind:

1. Forget about name attribute in general and <a name> markup as link target in particular.
   
   As the HTML5 Candidate Recommendation spec states:
   "An element's unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS."
   That means, you can use any id as a link target.
   
   
2. As Itay Gal has already stated in his answer, don't use the same id more than once. From the HTML5 spec again:
   "The id attribute specifies its element's unique identifier (ID)".
   That said, change your current code:
   <a id="underpinning" name="underpinning"><h1 id="underpinning" name="underpinning">Underpinning</h1></a>
   to
   <h1 id="underpinning">Underpinning</h1>
   
   
3. You're using as link address currently /services#underpinning. As you're going with the WordPress rewrite functionality, entering http://powellgroupconstruction.com/services gets redirected to http://powellgroupconstruction.com/services/.
   Therefore you should better put a slash at the end of your pages' names, so the link address should be
   <a href="/services/#underpinning">Underpinning</a>

Comments

[Volker E.]

That doesn't have to do with browser liking or not liking things, if you're using HTML5 (with valid Doctype declaration), an anchor <a> can enclose block level elements like <h2> as well.

[user1269625]

This works in Firefox, Safari, iPhone and iPad, but not IE weird. what can i do to fix this in IE?

[Volker E.]

@user1269625 What version of IE do you use? Works for me in IE 8 (8.0.6001.18702)

[AAGD]

#3 helped me solve the problem that my links did work everywhere except on my iPad. Even my iPhone worked, which was quite mysterious...