I recently ran into an interesting situation where clicking a link to a named anchor (a link such as #top linking to <a name="top"> or <div id="top">) failed in Internet Explorer 8. Strangely, it worked properly in every other browser I tested (Firefox, Chrome, Opera, and Safari) and it worked properly on other tested versions of IE (6, 7, and 9). It was just Internet Explorer 8 that was broken.
I created a very simple example page that shows this bug. The important elements are the empty named A tag and the container with the overflow:hidden rule. The rest of the content and the width is simply to allow enough height to show the functionality or lack thereof of the link.
So the key elements of this bug are:
- An empty named A tag or any empty element with an ID. Adding text inside the element allows for the link to work properly.
- A container with
overflow:hiddenaround the link, element that is linked to, or both. I tested removing either the link or the element linked to from the div in the example, and IE 8 still failed to allow the link to function in both cases.
Given that the overflow: hidden rule could be very important or useful for the design, the solution to this issue is very simple. Either you add text to the empty element or remove the empty element and add the removed name/id to an element that does have content. Since adding text is probably not what you want, simply moving the anchor point to another element will probably do what you want and have very little impact on the functionality.
For example, if you have the following:
<a name="purchase"></a>
<h3>Purchase</h3>Change it to:
<h3 id="purchase">Purchase</h3>It will do the same thing and avoid this annoying IE 8 issue.
For those interested, the filler content was generated with the great Gangsta Lorem Ipsum.
Did I help you?
One can solve this issue while keeping the exact same markup by styling the anchor with:
display:inline-block
I tested it, and it does indeed solve the problem as well. I wonder how easy it would be to target just the named anchors and not all links with a simple CSS rule without modifying the underlying HTML to add a class or id.
For me, simply using more meaningful elements with content and an ID makes more sense and is harder to mess up than remembering that antiquated browsers that I can’t even run properly on my OS take issue with certain markup/style combos.
Whatever floats your boat. Puts a wind in your sail. Gets the monkey off of your back. Etc.
I would like to know as well:)
I am looking for an answer and even though I applied a class to anchor with display: inline-block. My anchors still do not work in IE8.
Any ideas to solve this globally without going into each single anchor and fixing it? The site just has to many anchors to remember where they are exactly.
Thanks!
Without being able to see the site in question, I really don’t know how to help solve the problem. In all my testing, both my approach and Thierry’s approach worked properly. So, only seeing the site would allow me to better answer why it isn’t working for you.
For the css, theoretically, you can target all named anchors thusly:
a[name] {display:inline-block}
translation: any <a> with a name attribute display as inline-block
S.
Bless you! This worked lovely.
[…] anchors on the screen at coordinates 0,0 probably because the elements were empty. Thanks to this comment, it’s as simple as adding the CSS display: inline-block to the named anchor elements. The […]
An addition to my earlier post.
The site I gave you is the wrong site right now.
I will try to make the changes to anchors on a test site and will post it here.
Thanks!
Sounds good. I’ll keep an eye out for it.
Any ideas on my earlier entry where I gave you a link to the test site?
The post has not been posted on this site yet.
-Anna
style=”display:inline-block”;
This works well and good. For sure………….
Thank U very much………….
Hello,
I too am having a lot of problems with anchors in Internet Explorer – with me IE 11.
I have just tried your style display:inline-block; and it didn’t help. I also tried all the suggestions here but nothing worked:
http://stackoverflow.com/questions/16492909/anchor-links-on-page-not-working-in-firefox-or-ie-but-do-work-in-chrome-and-saf
For me IE strips out the file name, so for example on this page which I use as a HTML email newsletter, the url with anchors in Firefox and Chrome would be: http://www.imperial.ac.uk/edudev/newsletters/May_2015.html#recordings
In Internet Explorer when you click on the anchors you get: http://www.imperial.ac.uk/edudev/newsletters/#recordings and then the following message on the screen ‘Content not yet uploaded’
The weird thing is that others say it works for them in IE but it doesn’t work for me! To reiterate, Firefox, safari and Chrome all work fine and I even got the anchors to work somewhat in Outlook when I embed the email.
The problem on your page is different than the issue being discussed here.
That said, I think the problem on your page is not using absolute URLs for all the links. In general, absolute URLs should be used for all links when sending HTML in email. Using relative URLs can result in ambiguous behavior as you are seeing.
My guess is that these links are relative because a template is being used. Unfortunately, that simply won’t work. You will need to find a way to generate the newsletter markup in a way that always uses absolute URLs in order to avoid these problems.
Apolgies for posting off topic and thanks for the reply.
However on the HTML newsletter I have created http://www.imperial.ac.uk/edudev/newsletters/May_2015.html I use absolute URLs for all images and links and to take people elsewhere. What I also have are some bullet points so that people can navigate to other sections in the email newsletter. These are links to elements and follow the usual form for anchors as far as I can tell, e.g. <a href=”#recordings” rel=”nofollow”>Event Recordings</a>. and then later on <a></a> These anchors work in the embedded html email version in Outlook and web versions of email and they also work fine in Firefox, Safari and Chrome but they do not work in Internet Explorer, though for some people who have tested it on their PCs they do work in IE but not for me! If I was to change the anchors to absolute URLs, they would work but if clicked in the email they would navigate away from the embedded email to the browser which would kind of defeat the object. I just don’t understand why the anchors in their current form work absolutely fine and as they should in all browsers and in the embdedded email version but not in Internet Explorer.
In that case, the likely issue is the
basetag with the blankhrefattribute. Try removing that and see if it resolves the issue.If it’s not that, I can’t offer any additional suggestions.