title: How can I get my css gradient to work in IE?
body: <p><a href="http://www.10thplanetjjchicago.com/" rel="nofollow">http://www.10thplanetjjchicago.com/</a></p>
  
  <p>Everything seems to work fine in Firefox/Chrome/Safari/Opera. But I can't seem to get my content div to display correctly in Internet Explorer.  The gradient just doesn't display or cuts off - yet the text and content will display.  I've been playing around with reordering elements and whatnot but I can't figure it out :/</p>
  
  <p>To see my code just View Source.</p>
  
  <p>CSS is minimized so here's the CSS:</p>
  
  <pre><code>body {
      background: #080808;
      margin: 0;
      padding: 0;
  }
  #bg {
      background: linear-gradient(to bottom,#232323,#080808);
      background: -moz-linear-gradient(top,#232323,#080808);
      background: -ms-linear-gradient(top,#232323,#080808);
      background: -o-linear-gradient(top,#232323,#080808);
      background: -webkit-linear-gradient(top,#232323,#080808);
      background: -webkit-gradient(linear,left top,left bottom,from(#232323),to(#080808));
      filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#232323',endColorstr='#080808',GradientType=0);
      position: absolute;
      top: 0;
      width: 100%;
      height: 531px;
  }
  .header {
      background: #282828;
      background: linear-gradient(to bottom,#040404,#282828);
      background: -moz-linear-gradient(top,#040404,#282828);
      background: -ms-linear-gradient(top,#040404,#282828);
      background: -o-linear-gradient(top,#040404,#282828);
      background: -webkit-linear-gradient(top,#040404,#282828);
      background: -webkit-gradient(linear,left top,left bottom,from(#040404),to(#282828));
      filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#040404',endColorstr='#282828',GradientType=0);
      border: 1px solid #7ba145;
      border-top-left-radius: 9px;
      border-top-right-radius: 9px;
      margin: 50px auto;
      width: 900px;
      height: 85px;
  }
  .logo {
      border: 0;
      opacity: .9;
  }
  .logo: hover {
      opacity: 1;
  }
  .nav-left,.nav-right {
      float: left;
      margin-top: 32px;
      text-align: center;
      width: 338px;
      word-spacing: 40px;
  }
  .nav-middle {
      float: left;
      margin-top: -48px;
      position: relative;
      z-index: 2;
  }
  a.nav-link: link,a.nav-link: visited {
      color: #b5ed46;
      font: 18px impact,tahoma,arial;
      text-decoration: none;
      opacity: .8;
  }
  a.nav-link: hover {
      color: #eee;
      border-bottom: 2px solid #96c34b;
      opacity: .9;
  }
  .background {
      text-align: center;
  }
  .bg-img {
      border-left: 1px solid #96c34b;
      border-right: 1px solid #96c34b;
      margin-top: -50px;
      opacity: .9;
  }
  .bg-img: hover {
      opacity: 1;
  }
  .main {
      background: #303030;
      background: linear-gradient(to bottom,#171717,#303030);
      background: -moz-linear-gradient(top,#171717,#303030);
      background: -ms-linear-gradient(top,#171717,#303030);
      background: -o-linear-gradient(top,#171717,#303030);
      background: -webkit-linear-gradient(top,#171717,#303030);
      background: -webkit-gradient(linear,left top,left bottom,from(#171717),to(#303030));
      filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#171717',endColorstr='#303030',GradientType=0);
      border: 1px solid #96c34b;
      border-bottom-left-radius: 9px;
      border-bottom-right-radius: 9px;
      margin: -4px auto;
      padding: 32px 32px 16px;
      width: 836px;
  }
  .content {
      float: left;
  }
  .title {
      color: #96c34b;
      font: 18px impact,tahoma,arial;
      opacity: .9;
      word-spacing: 3px;
  }
  .title: hover {
      color: #eee;
      border-bottom: 2px solid #96c34b;
  }
  a: link,a: visited {
      color: #b5ed46;
      text-decoration: none;
  }
  a: hover {
      text-decoration: underline;
  }
  p {
      color: #eee;
      font: 12px tahoma,arial;
      line-height: 15px;
      margin-bottom: 20px;
      opacity: .8;
      text-align: justify;
      width: 550px;
      word-spacing: 3px;
  }
  .side-panel {
      color: #efefef;
      float: right;
      font: 11px tahoma,arial;
      line-height: 14px;
      margin-bottom: 20px;
      opacity: .9;
      text-align: justify;
      width: 250px;
      word-spacing: 3px;
  }
  p: hover {
      color: #efefef;
      opacity: .9;
  }
  .side-panel: hover {
      color: #fff;
  }
  .copyright {
      color: #ddd;
      clear: both;
      font: 10px tahoma,arial;
      text-align: center;
      opacity: .8;
  }
  .copyright: hover {
      color: #efefef;
      opacity: .9;
  }
  </code></pre>