title: CSS hover code is not working on Firefox
body: <p>I have this much of code for button and its hover. this code is working everywhere, it's working fine on chrome, ie, safari but its not working on Firefox. Each CSS code related to button is working fine except Hover Part.</p>
  
  <pre><code>      &lt;button class="button validation-passed" onclick="productAddToCartForm.submit(this)" dtyle="float:left" title="Add to Cart" type="button"&gt;
  
      &lt;span&gt;
         &lt;span&gt;
  
          Add to Cart
  
         &lt;/span&gt;
     &lt;/span&gt;
  
   &lt;/button&gt;
  </code></pre>
  
  <p>Here is CSS code for the button:</p>
  
  <pre><code>       button.button::-moz-focus-inner { padding:0; border:0; } /* FF Fix */
         button.button { -webkit-border-fit:lines; } /* &lt;- Safari &amp; Google Chrome Fix */
         button.button { overflow:visible; width:150px; border:0; padding:0; margin:0;    background:transparent; cursor:pointer;}
         button.button span { display:block;  font:12px/24px georgia; text-align:center; white-space:nowrap; color:#fff;background:#f79b29;border-color:#7B9617;height:24px;padding:0 8px;font-weight:normal !important;}
        button.button span:hover{background:#f48227}
        button.button span{ border:0; padding:0; }
  </code></pre>