title: HTML link with padding and CSS style active does not work
body: <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>