CSS gets all screwed up in IE(like half of the CSS didn't get loaded)

I have a site that gets completely screwed up in IE, and I was wondering if anyone could help me track down what's wrong with it.

The page in question is http://eksai.com/testing/

When I open it in IE it's like half the CSS code didn't get loaded. Font colors are the same, there are no columns, etc. I've cut the CSS file to a minimum trying to figure out what's causing this...but I still can't get it to work right.

Can anyone help me figure out what's causing it?

here is the CSS file:

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
a img{border:none}
@font-face{font-family:"agb";src:url("../fonts/b.eot");src:url("../fonts/b.eot?#iefix") format("eot"),url("../fonts/b.ttf") format("truetype")}
body, input,textarea,select,button{font:normal 16px "helvetica neue",helvetica,arial,sans-serif;line-height:24px}
h1{font:48px/60px "helvetica neue",helvetica,arial,sans-serif;font-weight:normal;margin-bottom:20px}
h2{font-size:26px;line-height:30px;margin-bottom:5px;font-weight:bold}
h3{margin-bottom:5px;font-size:20px;line-height:25px;font-weight:normal;color:#3a3e42}
h4{font-weight:bold}
a{outline:0;text-decoration:none;color:#2d81c5}
html{background:#d5d8db url(../images/public/body.png) fixed;background:url(../images/public/body-gradient.png) repeat-x fixed,#d5d8db url(../images/public/body.png) fixed;color:#52585d;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.wrapper{position:relative;width:1020px;margin:30px auto 100px;padding:0 2px}
.page{position:relative;background:#fff url(../images/public/page.png);-moz-box-sh开发者_开发百科adow:0px 0px 3px rgba(0,0,0,0.5);-webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.5);-o-box-shadow:0px 0px 3px rgba(0,0,0,0.5);box-shadow:0px 0px 3px rgba(0,0,0,0.5);margin-bottom:20px;min-height:400px}
.page:after{content:" ";position:absolute;bottom:-8px;left:-1px;width:1022px;height:8px;text-indent:-119988px;overflow:hidden;text-align:left;background-image:url('../images/public/page-shadow.png');background-repeat:no-repeat;background-position:0 0}
.platter-section{padding:20px 60px 0px 20px;}
.main-nav{height:74px;background:#fff;-moz-box-shadow:rgba(0,0,0,0.1) 0 1px;-webkit-box-shadow:rgba(0,0,0,0.1) 0 1px;-o-box-shadow:rgba(0,0,0,0.1) 0 1px;box-shadow:rgba(0,0,0,0.1) 0 1px}
.main-nav .logo{position:absolute;top:18px;left:24px;display:block;width:152px;height:40px}
.main-nav .actions{position:absolute;top:20px;right:25px}

.hang{    background-image: url("../images/hang.png");     background-position: 0 0; background-repeat: no-repeat; height: 284px; left: 180px; overflow: hidden;  position: absolute; text-align: left; text-indent: -119988px; top: -46px; width: 300px; }
.actions {z-index: 2;}




h1{font-size:60px;line-height:64px;margin:20px 0}
.alpha{float:left;width:474px; color:#ff0000;}
.beta{color:#fff000; border-left: 1px solid rgba(0, 0, 0, 0.1); float: left; padding-bottom: 20px; padding-top: 159px; position: relative; width: 300px;} 
.signup-section-full-width{clear:both;}

Many of the elements your applying styles to are HTML5 - IE8 and below don't recognize them as valid, block-level, or stylable.

For old versions of Firefox, you just need to do stuff like:

section, article {display:block;}

For old versions of IE, use this in the head:

<!--[if lt IE 9]> 
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

FYI, you have a number of CSS errors.

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Feksai.com%2Ftesting%2Ffiles%2Fpublic.css&profile=css21&usermedium=all&warning=1&vextwarning=&lang=en

EDIT:

You're also using HTML5 elements, so you might want to include something like Modernizr, which will adapt HTML5 to downlevel browsers.

IE8 and below do not support CSS for unknown elements which you use in HTML5 by default (no fuzz in IE9 though).

But if you create a element of the same tagname with JS document.createElement, IE will magically become aware if those previously unknown elements. See here: http://ejohn.org/blog/html5-shiv/

So use a script which creates dummy elements of HTML5 and you can go on. http://remysharp.com/2009/01/07/html5-enabling-script/