CODEWITHSUNDEEP
htmlfirefoxgoogle-chromeanchor
surenv2003
surenv2003

Reputation: 119

Anchor element not working in firefox and chrome

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?

Upvotes: 7

Views: 61456

Answers (13)

Randy Purcell
Randy Purcell

Reputation: 11

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.

Upvotes: 1

sammy
sammy

Reputation: 1

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! :)

Upvotes: -1

Mauricio Moreira
Mauricio Moreira

Reputation: 21

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>

Upvotes: 2

Ravi Shankar Kota
Ravi Shankar Kota

Reputation: 705

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.

Upvotes: 0

Brian Barnes
Brian Barnes

Reputation: 1027

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.

Upvotes: 0

Tim
Tim

Reputation: 1

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.

Upvotes: 0

Ben Lambert
Ben Lambert

Reputation: 51

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

Upvotes: 5

Matthew O&#39;Riordan
Matthew O&#39;Riordan

Reputation: 8211

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.

Upvotes: 0

Farjad
Farjad

Reputation: 257

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.

Upvotes: 0

Jim Rider
Jim Rider

Reputation: 119

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>

Upvotes: 11

cdonner
cdonner

Reputation: 37668

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.

Upvotes: 5

Sean
Sean

Reputation: 91

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.

Upvotes: 8

Mat&#237;as Fidemraizer
Mat&#237;as Fidemraizer

Reputation: 64923

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:

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:

Let me know if this solves your problem!

Upvotes: 0

Related Questions