Anchor Tags not working in IE or FF

Question

My anchor tags aren't working properly in IE or FF. Works fine in Chrome. Help?! Here's a JSFiddle that shows what I'm trying to accomplish and see PasteBin for raw HTML.

I didn't know how to import JQuery into JSFiddle, so that's why the PasteBin link is there.

Basically, I have a grid of people which, whenever hovered over, displays information about the staff member. The anchor tags are the letters of the alphabet toward the top of the page. When clicked, they are supposed to go to the first name that starts with that letter in the grid. This works fine in Chrome, but doesn't move but down to the first row on both Firefox and IE.

This code is being used inside the Spiceworks User portal, so that's why the HTML tags aren't present.

I basically have no idea why this is happening and am wondering if someone can pass some knowledge my way.

Thanks in advance!

<!--See links in description above.-->

Answer 1

I just ended up anchoring to the picture elements themselves (which already had IDs set) and not using separate a tags. Will take a bit of upkeep, but at least it looks right. The non-breaking spaces in the anchor tags created some alignment issues on my page. Here's the updated JSFiddle showing what I ended up with.

Thanks for your suggestions, everyone.

---

Instead of this in the grid of pictures:

<a id="Aanchor">&nbsp;</a>

I went with this in the alpha tags at the top:

<a href="#AdamC">A</a>

(which linked to the pictures themselves below and not a separate a tag)

Answer 2

Try doing your anchors like this:

<a id="tips">Useful Tips Section</a>
<a href="#tips">Visit the Useful Tips Section</a>

Also there is a very simple effect for transition on your anchor. So when you click the letter at the top it smoothly scrolls down to the picture. Worth the time its a nice effect and wont take long to implement. the code and tutorial is - Here

you can also View The Demo

Answer 3

Your anchor tags are empty, so some browsers are ignoring them.

Where you have:

<a name="Aanchor"></a>

You should try instead:

<a id="Aanchor">&nbsp;</a>

Also, the newer way to do this is using id's, not naming anchors as you have.

See this updated fiddle where I changed the #Canchor. This works for me on Firefox.

Answer 4

In some browsers, you need to have text within the anchor tag for it to work correctly. If you don't want anything in the name anchors, you can just use a non-breaking space:  

So this:

<a name="Aanchor"></a>

Becomes this:

<a name="Aanchor">&nbsp;</a>