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

http://www.10thplanetjjchicago.com/

everything seems work fine in firefox/chrome/safari/opera. can't seem content div display correctly in internet explorer. gradient doesn't display or cuts off - yet text , content display. i've been playing around reordering elements , whatnot can't figure out :/

to see code view source.

css minimized here's 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 difficult read (try new lines @ least when things long), @ 1st glance looks covered bases. here's sample gradient (higher contrast grey aka black glass) can take 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 hand code gradients because turns out pain change values @ same time. try this: http://www.colorzilla.com/gradient-editor/ (which stole gradient from)