IE11 anchor tag strangeness

Question

1.80/5 (2 votes)

See more:

I have the following :

HTML

<div class="pager">
    <a onclick="dosomething();" >here</a>
</div>

with a style of:

CSS

.pager a {
    text-decoration: underline;
    cursor: pointer;
}

This works fine on every browser except IE in that when I mouse over and try to click, the tag moves down a line so in effect I cannot click on it.

[Update]
If I add

HTML

<!DOCTYPE html>

to the top of the page then the other browsers do the same as IE and mess things up and move elements on mouse down.

I have uploaded a sample to : http://jsfiddle.net/s3hbu2bv/[^]

- If you try to click on the "view name" dropdown you will see that it moves

Posted 12-Apr-15 23:57pm

Mehdi Gholam

Updated 13-Apr-15 21:02pm

v4

Add a Solution

Comments

Nathan Minier 13-Apr-15 8:07am

Have you tried adding href="#" or even just a naked href attribute to the anchor?

Mehdi Gholam 13-Apr-15 9:18am

Interesting, if I add it then chrome does the same.

Nathan Minier 13-Apr-15 9:20am

That is odd. Are you running any libraries?

Mehdi Gholam 13-Apr-15 9:21am

No, my own js and css.

Mehdi Gholam 13-Apr-15 9:28am

With href="" chrome added the following css in the elements (user agent style sheet)

a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}

Nathan Minier 13-Apr-15 9:39am

I'm mostly confuzzled by this since positioning on anchors with no href are normally modified by a framework, like Angular or jQueryUi, to be used as clickable elements. I've had some issues with IE rendering these as clickable without an href, and had suspected there was a weird synergy between that and a library that you're using to create the "bouncing anchor" effect.

I've setup a test and cannot replicate the issue.

Mehdi Gholam 13-Apr-15 12:16pm

I changed onclick to onmousedown still moves down but the event gets fired.

Nathan Minier 13-Apr-15 12:43pm

I'd check my js and css again if I were in your shoes. I've seen similar issues when using css-drive dropdown menu code, but that's about the extent of what I've got for you. I can't replicate the issue in IE or chrome, which infers to me it must be a css or js issue.

Mehdi Gholam 13-Apr-15 12:59pm

I do have a "select" dropdown which moves down on mouse down also, how did you resolve it?

Nathan Minier 13-Apr-15 13:02pm

Honestly, I took a page from bootstrap and went a little crazy with nested divs and classes. It works, but it isn't terribly pretty.

Mehdi Gholam 14-Apr-15 3:10am

I have updated the question see the jsfiddle link, thanks!

Kornfeld Eliyahu Peter 13-Apr-15 14:17pm

Why that bothers you?
<a> tag has two meanings:
1. Anchor (no href)
2. Link (has href)
Simply Chrome identified the difference and added some more CSS to make it visible...

Nathan Minier 14-Apr-15 7:33am

I doesn't bother me, but it does bother some JS libraries. I've had some odd issues with AngularJS if no href is on an anchor, for instance. My initial assumption was that a library was manipulating the element, as that's when I've seen this sort of silliness before.

Kornfeld Eliyahu Peter 13-Apr-15 12:47pm

What dosomething(); does?
Please see this: http://jsfiddle.net/yowg74ep/ - it works me in every browser I have including IE11...

Mehdi Gholam 14-Apr-15 3:03am

I have updated the question see the jsfiddle link, thanks!

Kornfeld Eliyahu Peter 14-Apr-15 3:39am

It IS very strange - I can see the problem while in jsFiddle, but when copied your HTML/CSS to local files and opened them in different browsers I can not see the problem anymore...
I would say that we can't see the source of the problem because of the complexity of the page - try to remove different parts (start with the CSS) and see when the problem has gone...

Mehdi Gholam 14-Apr-15 4:13am

Found it (commented the following):
.tab-content :active {
display: block;
}

Kornfeld Eliyahu Peter 14-Apr-15 4:21am

Great! Do you understand why?

Mehdi Gholam 14-Apr-15 4:30am

No, but who cares! :)

Kornfeld Eliyahu Peter 14-Apr-15 4:33am

Me! The reason is that when you click your tag (the select) it becomes active and this selector changes it's display type to block...A block element can not be displayed on the same line as a inline element so the browser moves it to the next line...

Mehdi Gholam 14-Apr-15 4:46am

Possible, but trying to understand what the different browsers do, just hurts my head :)

Nathan Minier 14-Apr-15 7:31am

Nah, that makes sense now. Without a !DOCTYPE the different browsers will default to different HTML/CSS versions.

Gonna have to file that for future reference.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)