How can I get my css gradient to work in IE?

http://www.10thplanetjjchicago.com/

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 :/

To see my code just View Source.

CSS is minimized so here's the CSS:

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;
}

Your CSS is very difficult to read (try new lines at least when things get long), but at 1st glance it looks like you covered all the bases. Here's a sample gradient (higher contrast grey AKA black glass) you can take a look at:

background: #959595; /* Old browsers */
background: -moz-linear-gradient(top,  #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#959595), color-stop(46%,#0d0d0d), color-stop(50%,#010101), color-stop(53%,#0a0a0a), color-stop(76%,#4e4e4e), color-stop(87%,#383838), color-stop(100%,#1b1b1b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* IE10+ */
background: linear-gradient(to bottom,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */

I don't try to hand code gradients because it always turns out to be a pain to change all those values at the same time. Try this: http://www.colorzilla.com/gradient-editor/ (which is where I stole that gradient from)