Geek Answers Handbook

Anchor tag does not work in firefox and chrome

I ran into an amazing problem. I have a hyperlink to an image on my client site. It works in IE, but when I open the same page in Chrome / Mozilla, it does not show the binding pointer, and when clicked, nothing happens. My link code

<a href="Home.aspx?ModuleID=1"> <img src="Images/Logo.gif" border="0"/> </a>

Does anyone know what the problem is?

+6
html firefox google-chrome anchor
source share
13 answers

Simple work: this works in all browsers that I have tested so far, using 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>
+11
source share

Make sure you generally use css z-order on the page. Incorrect z-orders can cause buttons and links to not work.

+8
source share

What I found that worked for me regarding the same issue only with Chrome * was to NOT wrap the binding identifier in a block level element, but attach a call.

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

+5
source share

I ran into the same problem. This sentence (adding a position: relative to the containing div) seems to have addressed it, but I'm doing absolute positioning and should work on it in a different way. I figured this could help someone else.

+4
source share

do not anchor # in the link only

 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>
+1
source share

I had a similar problem in Chrome, where my cursor did not change to the index hand when it hovered over my navigation links, and the links themselves did not respond when clicked. By adding the z-index property with a value of 999 to my anchor element in my stylesheet, the expected behavior is returned.

+1
source share

Without complete HTML source code, I will indicate that this anchor is nested or after some element that does not have a closing tag.

Put the full HTML source code if this is not a problem.

You can easily find this problem by confirming your document:

This is the official HTML / XHTML W3C validator, so if any element is not closed, it will indicate which one you need to fix!

EDIT: After looking at the HTML source code posted in the response comments ... where is the document type declaration (DOCTYPE)? You forgot to add it!

Add this to the top of your HTML document:

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

If you do not specify the type of document, browsers display web pages in quircks mode, which is a compatibility mode that may not display your page as you expected. Read more about this here:

Let me know if this solves your problem!

0
source share

I had a similar case. In my case. I tried to align 3 divs using left / right floats. One of them had a position: relative attribute. Once I removed this, firefox anchor tags worked. Instead of adding an additional attribute. Hope this helps others.

0
source share

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

0
source share

I spent the last few hours with this problem in page binding tags that work in firefox and IE, but not in chrome. I am not a professional developer, so I do not know why, but it seems that in some cases chrome does not read tags from built-in sections and takes you to the right place on the same page. I went around it by adding the span identifier after my id ... - 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. I do not have IE on this machine for testing.

0
source share

Another possible problem that could happen with this (although probably not the case) is that you could change the css pointer declaration for the tag, for example.

 a { cursor: default; }

If so, then the hover effect and clicking on the link should still work.

0
source share

It looks stupid, but I once had the same problem. I just posted a link anchor on an existing page as part of the improvement. Direct links can be clicked in IE, but not in chrome / firefox.

On closer inspection, I found that there is an existing script that removes the anchor tag link for print functions. Added anchor tags are part of the same page and therefore have this problem. I added if the condition is with the identifiers of the newly added anchors so that they skip the added functionality to remove anchor links.

0
source share

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 HEAD section on the 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 the BOTH scripts in the HEAD section of your page. It worked for me! :)

0
source share

More articles:


All Articles