Geek Answers Handbook

HTML link with padding and CSS style not working

HTML link with addition and active CSS style does not work in Google Chrome, Apple Safari, Opera, Mozilla Firefox. However, it works in Internet Explorer 8.

Here is a sample code. Try clicking Stack - the link does not work, click the Overflow - link. By work, I mean go to the StackOverflow website.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>css active padding href problem</title> <style type="text/css"> a{ display: inline-block; background:#CCC; border:1px solid #666; padding:0 35px 0 0; } a:active{ padding:0 0 0 35px; } </style> </head> <body> <div> <p>Click on <i>Stack</i> - href does not work. Click on <i>Overflow</i> - href works. All browsers are affected. Except IE.</p> <a href="http://stackoverflow.com/">StackOverflow</a> </div> </body> </html>

Why does this not work in most browsers?

Edit 2: If you change: active to: hover, then everything will work as expected in all browsers - a click occurs and the browser goes to stackoverflow.com

Edit 3: To prove that you can click on the fill area, you can change the style:

 <style type="text/css"> a{ padding:0 0 0 35px; } </style>

If the link is “moving”, as someone mentioned, then why can you click on the already “moved” link?

+7
html css padding anchor
source share
3 answers

Indented text moves away from where you clicked. This is your code: http://jsfiddle.net/ctrlfrk/3KsRx/

hold down the mouse button on "Stack" and you will see that the text is removed from under the mouse.

What are you trying to achieve? It works as it should. If Internet Explorer follows the link, it’s wrong.

[Edit] Explanation:

The real problem here is that the 'click' event only seems to fire if the target of the mousedown event matches the target of the mouseup event. When you click on the text in your example, the mousedown target is the text node , which is a child of the anchor tag. This text node then departs, so the purpose of the mouseup event is just an anchor tag.

With: hover, the node text is deleted before you click, so the target of the mousedown event is the anchor tag, and the mouseup event is also the anchor tag, so the link will follow.

[/ Edit]

+1
source share

I have found a solution! http://jsfiddle.net/rydl/Yu6vp/3/

David is right, the problem is caused by moving text node. Thus, the solution should prevent the node text from being clicked. I used the anchor: after the pseudo-element, to cover the entire button while being invisible:

 a:after { position: absolute; top: 0; left: 0; content: ' '; height: 100%; width: 100%; }
+4
source share

Try changing the fill with a note. As the indentation changes, the position of the element also changes.

 a { margin:0 0 0 35px; }

For browsers (firefox, chrome, etc.). A right mouse click is one that is clicked and released on the same element .

EDIT: I cannot change the behavior of the browser (there is no solution in pure css), but you can use javascript to do this

 <a href="http://stackoverflow.com/" onmousedown="window.location=this;">StackOverflow</a>

EDIT :: hangs instead: it is active due to a reason , since the element does not change position between pressed and pressed time

0
source share

More articles:


All Articles