title: CSS outline not rendering correctly in Firefox
body: <p>I'm a bit baffled with the way the CSS outline property is rendering on Firefox 7 or below.
  It's clearly got a problem somewhere, but I just can't find it.</p>
  
  <p>It works fine on all other main browsers (Opera, Chrome, IE, Safari).</p>
  
  <p>I've added a couple of screenshots for reference. One from Firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/ngMcI.jpg" alt="enter image description here"></p>
  
  <p>and the other from Chrome:</p>
  
  <p><img src="https://i.stack.imgur.com/PLLYS.jpg" alt="enter image description here"></p>
  
  <p>Here's the CSS:</p>
  
  <pre><code>form#commentform input:focus { outline: 2px outset #717377 }
  </code></pre>
  
  <p>Here's XHTML:</p>
  
  <pre><code>&lt;form id="commentform"&gt;
        &lt;div&gt;
           &lt;label for="name"&gt;
              &lt;strong&gt;
              Nom
              &lt;span id="sname"&gt;&lt;/span&gt;
              &lt;/strong&gt;
           &lt;/label&gt;
           &lt;input type="text" tabindex="1" id="name" name="name" class="textbox" /&gt;
        &lt;/div&gt;
  ...
  &lt;/form&gt;
  </code></pre>
  
  <p>How can I solve this?</p>