Ian Hoar – Passion for Technology – Geeking Out - Technology, Web, Toys, Games, Design, Entertainment, Gadgets, & Geeking Out

Internet Explorer 6 and redirected anchor links

Why are my are my anchor links not working in IE6?

As a web designer I constantly run into browser bugs and 90% of these bugs belong to either IE6 or IE7. Remarkably these two browsers don’t even consistently break the same way. What is messed up in IE6 may be completely messed up in a different way in IE7. The standards compliant WebKit and Gecko engines used by popular browsers like FireFox, Safari and Chrome rarely see many of these annoying bugs, but the masses use IE, so we as designers and developers must make them work.

Fixing these bugs usually requires a lot of head scratching and pounding of fists and Google searches until I figure out a work around or hack that will fix it. I may not run across said bug for several months or even a year or more and then inevitably I stumble across the same bug and of course not realizing it is one I have dealt in the past. The IE6 redirect bug is one of those nasty ones that has caused me much pain and suffering, and it’s very simple to fix, although sometimes remembering the fix can take precious time, so I thought this time I would write it down and share it with others.

An anchor link, sometimes called a jump link, is pretty straight forward HTML, so you would think IE would have no problems with it. You would be wrong though, very wrong.

<a href="http://www.sitename.com/yourPage.html#AnchorName">Link to anchor on page</a>

Within yourPage.html you have an anchor

<a name="AnchorName"></a>

This is where it all went wrong

Under most circumstances this will work just fine, even in old clunky IE6, but where it won’t work is when there is a redirect involved. My issue started with an anchor link from an email campaign. This link would be clicked from an email client and then sent on to the email deployment platform, where it would then be redirected to the actual page. From here a nasty 404 would pop up. This is what threw me, because usually redirecting an anchor link in IE6 will only result in the anchor not working, but the page still loads fine.

The fix

The fix is quite simple if you can remember it the next time this happens to you.

<a href="http://www.sitename.com/yourPage.html&#AnchorName">Link to anchor on page</a>

See the difference? No? Check out the little ampersand “&” at the end of the html file and before the pound “#”. This will fix your broken anchor links in IE6 and they will now jump to where they are supposed to go.

My issue was a little more dire since the anchor links were actually breaking the page and giving a 404 error. We probably could have just ignored the issue if the jumping was the only thing broken. I think the reason for this is IE6 must parse the URL incorrectly when being redirected and ignore pound sign “#”. My page was a PHP file and contained a query string:

yourPage.php&var1=foo&var2=bar#AnchoreName

The last var2 was interpreted as bar#AnchoreName instead of bar. An ampersand “&” fixed this issue also. IE6 and IE7 never cease to amaze me with how badly they interprets the HTML and CSS specs. This particular bug is only an issue in IE6. I hope this saves some people a bit of sanity.

16 Comments to “Internet Explorer 6 and redirected anchor links”

  • tudor muresan

    Great article. Just love your sarcasm.

    However, placing & before #anchor does not work. Not on IE6 nor or IE7… Works great on fire fox and safari (Duuh!).

    My URL: which I redirect to looks like: http://localhost:55016/Default.aspx?componentId=moduleAssesmentComponent&requestId=468&#8496

    I’m working in .NET and using a simple Response.Redirect. Any ideeas ?

  • Ian Hoar

    Hi Tudor,

    Thanks for the feedback. I’m not that familiar with .NET, but an anchor “should” work the same, “should” being the key world. 🙂

    The ampersand does work for me and I just tried another link on the web in IE7 and changed it to an ampersand.

    Here’s W3Schools example which I have added an & to.

    http://www.w3schools.com/HTML/tryit_view.asp?filename=tryhtml_link_locations&#C4

    Does your page even load with the anchor?

  • tudor muresan

    That’s the thing 🙂 IE loses the anchor ! if I put a & before the anchor, then the URL will have the & but not the anchor … it just seems to get lost somehow, no errors no warning.. just gone.

  • tudor muresan

    I ended up doing something custom like setting the name of the link in a hidden filed, and then doing something simple in javascript like:

    if (!location.hash && anchorNameHdnFld){
    this.location.href+=”#”+anchorNameHdnFld.value;
    }

    Where anchorNameHdnFld is the hidden field with the name of the anchor.

    Damned IE…

  • Ian

    Strange, I’m not sure why it’s not working, it worked for us. Interesting JavaScript fix, another not so elegant fix is to set up dummy meta refresh pages that will redirect once loaded. These seem to work also. This was a bad option for me though because I had 36 pages that were doing this.

    Still don’t know why & isn’t working for you though.

  • tudor muresan

    The ways of IE are sometimes unknown…

  • Tammy

    & doesnt work for me either. I’m coding in ColdFusion and all ColdFusion dynamic values are outputed between the two # so having a # in front of an anchor doesnt really help, especially with redirection. My page loads just fine, just doesnt jump to anchor. Stupid IE

  • j1nn

    indeed stupid ie.
    did not work for me either..

  • ravil

    I also loved your sarcasm in the article. (Damn IE6 and 7… Opera forever =) )
    Anyways… Just a little feedback. Putting an & before # did not solve my problem either. I guess I’ll just have to use JavaScript for IE6 to work.

  • Ian Hoar

    Hi ravil, thanks, sorry it didn’t work for you. It seems to be kind of random. Maybe it depends on the redirect, it seems to work for some and not others.

  • Nadir Shah

    SOLUTION

    Hello everyone

    You can use anchors successfully on ie6 or 7 without any problem on coldfusion.cfm pages as well or any page just remember that you need to add a “?” before the “&” and “#” characters.

    example…

    dot.com/index.cfm?&#anchorname

    Also the good news is that you can call any element by ID on that page to do that you need to add a id=”name” to the placeholder element that you wish to point to.

    If you are facing problems for example calling the url from coldfusion variables there are numerous exception errors encountered due to the reason the Coldfusion uses #hash sign internally for language commands therefore it sometimes erros out the missing ending #hash#.

    There is another simple way to resolve this issue by creating a redirect page.

    example…

    Loading…

    redirecting

    the page above will automatically instantly redirect you to the specified anchorname in “0” seconds.

    also i assume you are using this function for jumping to specific areas of a webpage it would be wise to aslo disable the scroll bars for IE6+ and other browsers the way it is done.

    for “Internet Explorer 6”
    !!!add this to the body tag of the page!!!

    for “Other Browsers” !!!use css style tag!!!

    !!!remember this code goes before the tag on the page.

    hope this helps… HAVE FUN 😉

  • Nadir Shah

    <!—here is the code again the 🙂 code is missing above due to comments page filtering here t is

    REDIRECT PAGE

    Loading…

    redirecting

    for IE

    for other browsers

  • Nadir Shah

    <!— OTHER BROSERS

    IE

    REDIRECT PAGE

    Loading…

    redirecting

    —>

  • EM

    I sorted this for redirects in ASP.NET. The problem was still occuring if you put the & before the hash #. To beat this I changed the amerpersand to & so the url went from:

    http://www.whatever.com?id=23&#Anchor

    To

    http://www.whatever.com?id=23&#Anchor

    Worked for me, after hours of pain. Hope it can help someone else.

    • EM

      Sorry – My previous comment has been automatically altered by this website’s comment system.

      In relation to the issue being discussed; I solved the problem by using the html entity & amp; instead of just & before the hash.

Responses:

Your comments are important, join the conversation