title: Trouble getting a CSS vertical linear background gradient to display properly in all major browsers
body: <p>I got it to display exactly how I want it in Firefox, but with every other browser there seems to be some problems. This website isn't exactly public (as in, no one knows of it) yet as I'm still trying to get things to display properly, but the URL is: <a href="http://www.mixbin.net" rel="nofollow">http://www.mixbin.net</a> (just view:source for the code - there's nothing server side interfering)</p>
  
  <p><strong>Firefox:</strong> Perfect.<br>
  <strong>Chrome:</strong> Perfect except the bottom margin is being ignored in the .content class.<br>
  <strong>Opera:</strong> Perfect except the bottom margin is being ignored in the .content class.<br>
  <strong>Safari:</strong> Displays gradient properly but forces a refresh as soon as you scroll halfway down the page.<br>
  <strong>Internet Explorer:</strong> Displays gradient properly but .content div is cut off where the gradient stops.</p>
  
  <pre class="lang-css prettyprint-override"><code>background:linear-gradient(top, #000000 0%, #353535 100%); /*W3C*/
  background:-moz-linear-gradient(top, #000000 0%, #353535 100%); /*FF3.6+*/
  background:-ms-linear-gradient(top, #000000 0%, #353535 100%); /*IE10+*/
  background:-o-linear-gradient(top, #000000 0%, #353535 100%); /*Opera 11.10+*/
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #353535)); /*Chrome,Safari4+*/
  background:-webkit-linear-gradient(top, #000000 0%, #353535 100%); /*Chrome10+,Safari5.1+*/
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#353535',GradientType=0 ); /*IE6-9*/
  </code></pre>
  
  <p>No images wanted. So please don't reply with, "just make a background image".</p>
  
  <p><strong>Update 2:</strong> Everything (including IE), is now working. I switched these two lines from:</p>
  
  <pre class="lang-css prettyprint-override"><code>    background:-webkit-linear-gradient(top,#000000 0,#353535 100%);
      background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#000),color-stop(100%,#353535));
  </code></pre>
  
  <p>To:</p>
  
  <pre class="lang-css prettyprint-override"><code>    background:-webkit-linear-gradient(top, #000000, #353535);
      background:-webkit-gradient(linear, left top, left bottom, from(#000000), to(#353535));
  </code></pre>