Menu
HTML link with padding and CSS style active does not work in Google Chrome, Apple Safari, Opera, Mozilla Firefox. However, it works in Internet Explorer 8.
Here is an example code. Try to click on Stack - link does not work, click on Overflow - link works. By works I mean - navigate to StackOverflow site.
<!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 it does not work in most Browsers?
Edit 2: If you change :active to :hover, then everything works as expected in all Browsers - click happens and Browser navigates to stackoverflow.com
Edit 3: To prove that it is possible to click on padding area you can change style to:
<style type="text/css">
a{
padding:0 0 0 35px;
}
</style>
If link "moves" as someone mentioned, then why it is possible to click on already "moved" link?
957
A link becomes active when you click on it. Tip: The :active selector can be used on all elements, not only links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :hover selector to style links when you mouse over them.
padding: 10px 20px 30px 40px; Here is the code without the shorthand property: padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; HTML.
The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.
You can't make the div a link itself, but you can make an <a> tag act as a block , the same behaviour a <div> has. You can then set the width and height on it.
I found a solution! http://jsfiddle.net/rydl/Yu6vp/3/
David is right, the problem is caused by the moving text-node. So the solution must prevent the text-node from being clicked at all. I used the anchor's :after-pseudo-element to cover the whole button, while being invisible:
a:after {
position: absolute;
top: 0;
left: 0;
content: ' ';
height: 100%;
width: 100%;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
