Anchor element not working in firefox and chrome

Question

I have a hyperlink on an image on my client site. It's working in IE but when I open the same page in Chrome/Mozilla it's not showing the anchor pointer and nothing happens on clicking either. My code:

<a href="Home.aspx?ModuleID=1">
 <img alt="Alternative Text" src="Images/Logo.gif" />
</a>

Does somebody have any idea what the issue could be?

score 11 · Answer 1 · edited Feb 21 '12 at 17:10

11

Simple Work around: This works in all browsers I have tested so far use document.getElementById([anchor tag]).scrollToView(true);

Example: --from--

<a href="#" onclick="document.getElementById('ShowMeHow2').scrollIntoView(true);return false;">

--to--

<a id="ShowMeHow2" name="ShowMeHow2"> </a>

edited Feb 21 '12 at 17:10

Stephen

1,737
2
26
37

answered Feb 21 '12 at 16:35

Jim Rider

119
1
2

This does work, but it does not update the browser address bar. See how to update the browser address bar and history on [Updating address bar with new URL without hash or reloading the page](https://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-the-page) – johnsampson Jun 29 '17 at 21:24
**Again** this answer will horribly mislead people and is in no way a working answer. This issue is a browser bug, destroying a page and making a website not crawlable by search engines (and destroying the economics of the website and thus one's own entire profession) should *not* result in this answer being considered *ever*. – John Jul 31 '19 at 16:15

score 8 · Answer 2 · edited Dec 09 '11 at 02:02

8

Check to see if you are using css z-order at all in the page. Incorrect z-orders can cause buttons and links to not work.

edited Dec 09 '11 at 02:02

Ciaran

1,904
16
27

answered Dec 08 '11 at 21:37

Sean

91
1
5

score 5 · Answer 3 · answered Jan 25 '14 at 19:28

5

What I found that worked for me regarding the same issue with Chrome *only, was to NOT enclose the anchor id within a block-level element BUT enclose the call-out.

ex.

    <body>
    <a id="top" name="top"> </a>
    <p>...</p>
    <p><a href="#top">Back to Top</a></p>
    </body>
    <!-- /end ex. -->

Hope this helps :) works in all browsers.

-Ben

answered Jan 25 '14 at 19:28

Ben Lambert

51
1
2

2

I would like to add that in order to conform to the W3C HTML5 validation, you must remove the name attribute, as it is obsolete in HTML5. – Ben Lambert Jan 25 '14 at 19:43

score 5 · Answer 4 · answered Dec 27 '11 at 23:54

5

I am facing the same issue. This suggestion (adding position: relative to the containing div) seems to adress it, but I am doing absolute positioning and need to work around this in another way. I figured it might help someone else, though.

answered Dec 27 '11 at 23:54

cdonner

37,019
22
105
153

1

Adding the css attribute position to relative works perfectly! – Andres Sep 24 '12 at 07:23

score 2 · Answer 5 · edited Aug 18 '15 at 18:03

2

do not put the # character at anchor, only in the link

Correct <a name="top">[top of page]</a> <a link="#top">[link]</a>

Incorrect <a name="#top">[top of page]</a> <a link="top">[link]</a>

edited Aug 18 '15 at 18:03

Jost

5,948
8
42
72

answered Aug 18 '15 at 16:53

Mauricio Moreira

21
2

score 1 · Answer 6 · answered Feb 20 '17 at 12:55

I experienced a similar problem in Chrome where my cursor did not change to a pointing hand when hovered over my navigation links, and the links themselves were unresponsive when clicked on. By adding the z-index property with a value of 999 to my anchor element in my style sheet, the expected behavior returned.

score 0 · Answer 7 · answered Jun 15 '12 at 00:27

0

i had a similar case. In my case. i was trying to aligning 3 divs using floats left/right. One of them had position:relative attribute. Once i removed this then firefox anchor tags worked. Rather than adding an extra attribute. Hope this may help others.

answered Jun 15 '12 at 00:27

Farjad

257
4
9

-Putting together my experience and the other comment about adding position:relative it seems the bug in firefox & co browser is that within a given div container they need consistent positioning across the inner divs. Otherwise the anchors don't work. – Farjad Jun 15 '12 at 10:16

score 0 · Answer 8 · answered May 09 '13 at 17:34

I have found that sometimes you can mistakenly have another element with the same ID. In my case, it was an option tag, which cannot be moved into view. As such, I would recommend you try $('#yourid') to see if there are any tags unexpectedly with the same ID.

score 0 · Answer 9 · answered Apr 10 '14 at 07:26

I've spent the last few hours with this problem, in page anchor tags working in firefox and IE but not chrome. I'm not a professional developer, so I don't know why, but it seems that in some cases chrome doesn't read a tags from inside stacked divs and deliver you to a desired place on the same page. I got round it by adding a span id after my a id... - so it looks like this:

<a href="#ID_NAME"></a>
...
<a id="ID_NAME><a/><span id="ID_NAME"></span>

Tested in Firefox, Chrome and Safari. Don't have IE on this machine to test though.

This should be a separate question (not an answer so you might get some downvotes (I don't have the rep to downvote), but in your case you have duplicate id's ("ID_NAME" - which should be lower case anyway) and have no closing quote after the id for the a. — Brian Barnes, Jun 11 '14 at 22:22

score 0 · Answer 10 · answered Jun 11 '14 at 22:28

Another possible issue that can happen with this (although it's probably not the case here) is that you could have altered the css pointer declaration for the a tag eg.

a {
    cursor: default;
}

If that is the case though, hover effects and clicking on the link should still work.

score 0 · Answer 11 · answered Jul 29 '14 at 22:56

It looks silly but I once had the same issue .I just placed anchor links in an existing page as a part of enhancement.Strangely the links are clickable in IE but not in chrome/firefox.

Upon looking carefully , I found there is an existing script that removes the link of anchor tag for print functionality. The added anchor tags are part of the same page and hence had this problem. I added if condition with ids of newly added anchors so that they will skip the functionality added to remove the links of anchor.

Matías Fidemraizer · Answer 12 · 2011-02-03T12:43:24.947

Without the full HTML source code, I'll point to that this anchor is nested or after to some element that doesn't have a closing tag.

Post full HTML source code if this isn't the problem.

You can find this problem easly by validating your document with:

http://validator.w3.org/

It's the W3C official HTML/XHTML validator, so if some element isn't closed, it'll point which one you need to correct!

EDIT: After watching your HTML source code posted in answer's comments... where's the document type (DOCTYPE) declaration? You forgot to add it!

Add this at the beginning of your HTML document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

When you don't provide a document type, browsers render web pages in "quircks" mode, which is a compatibility mode that may not render your page as you expected. Learn more about that here:

http://en.wikipedia.org/wiki/Quirks_mode

Let me know if this solves your problem!

I checked with http://validator.w3.org/ no unclosed tag detected. I can share whole code as soon as i get connected to server — surenv2003, Feb 03 '11 at 11:45
Well in fact, I've opened your HTML markup without changing it, and that link is working. I click the image and tries to open the link! — Matías Fidemraizer, Feb 03 '11 at 12:50

score -1 · Answer 13 · edited Jan 29 '17 at 19:09

For Firefox, apply this script in the HEAD section of the page.

<script>
    $(document).ready(function(){
        var h = window.location.hash;
        if (h) {
            var headerH = $('#navigationMenu').outerHeight();
            $('html, body').stop().animate({
                scrollTop : $(h).offset().top - headerH + "px"
            }, 1200, 'easeInOutExpo');

            event.preventDefault();
        }
    });
</script>

For Chrome, use the following in the HEAD section of your page.

<script>
    $(document).ready(function () {
        var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
        if (window.location.hash && isChrome) {
            setTimeout(function () {
                var hash = window.location.hash;
                window.location.hash = "";
                window.location.hash = hash;
            }, 300);
        }
    });
</script>

Just Copy and Paste BOTH the scripts in the HEAD section of you page. It worked for me! :)

Anchor element not working in firefox and chrome

13 Answers13

Linked