Databases
StackOverflow2013
Postsdbo
POHTML link with padding and CSS style active does not work
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML link with padding and CSS style active does not work
    text
    copied!<p>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.</p> <p>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.</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;css active padding href problem&lt;/title&gt; &lt;style type="text/css"&gt; a{ display: inline-block; background:#CCC; border:1px solid #666; padding:0 35px 0 0; } a:active{ padding:0 0 0 35px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;p&gt;Click on &lt;i&gt;Stack&lt;/i&gt; - href does not work. Click on &lt;i&gt;Overflow&lt;/i&gt; - href works. All browsers are affected. Except IE.&lt;/p&gt; &lt;a href="http://stackoverflow.com/"&gt;StackOverflow&lt;/a&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Why it does not work in most Browsers?</p> <p><strong>Edit 2:</strong> If you change :active to :hover, then everything works as expected in all Browsers - click happens and Browser navigates to stackoverflow.com</p> <p><strong>Edit 3:</strong> To prove that it is possible to click on padding area you can change style to:</p> <pre><code>&lt;style type="text/css"&gt; a{ padding:0 0 0 35px; } &lt;/style&gt; </code></pre> <p>If link "moves" as someone mentioned, then why it is possible to click on already "moved" link?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload