Problemas compatibilidad con IE 8 Y 9

[djflakf1]

Amigos tengo el siguiente problema e hecho un diseño para mi web la cual se ve muy bien en Chrome, Firefox y Opera. Pero a la hora de abrirlo con los señor IE8 Y IE9 se daña todo... al principio quise restringir el acceso a mi web desde esos navegadores pero mejor arreglo el codigo el problema es que e intentado miles de maneras y no logro conseguir lo que quiero ....

Asi se ve en Chrome

http://i.imgur.com/8915iqR.jpg (BIEN)

Asi se ve en Firefox

http://i.imgur.com/puf7FHu.jpg (BIEN)

Asi se ve en Opera

http://i.imgur.com/6zIDLN2.jpg (BIEN)

Asi se ve en IE 8

http://i.imgur.com/ONoawD0.png (Con una X.... Nada mas )

Asi se ve en IE 9

http://i.imgur.com/cclmWDD.png (Con los frames movidos y sin orden)




Aqui esta el codigo

Código:

<style>
.outerpic-wrapper{width:100%;padding:0px;margin:0 auto;overflow:hidden}
.headerpic-wrapper{background: #4d4d4d url(http://2.bp.blogspot.com/-yitDAU0CdZ4/UWRzg559YpI/AAAAAAAABec/3Vv8Gv9n94Q/s1600/header-bg.png) top center repeat-x;width:100%; height: 56px;padding:0;margin:0 auto;}
.content-wrapper{background: #000; position:relative;max-width:980px;margin:0 auto}
.canales{

height: 500px;
width: 1200px;
margin:0px;
padding:0px;
}
body, .body-fauxcolumn-outer {
margin: 0;
background: #323232;
background: #000 url(http://i.imgur.com/cyDSCp9.jpg) no-repeat top left;
}
a{text-decoration:none}
#crosscol-wrapper{background: #131313;width:100%;float:left;word-wrap:break-word;overflow:hidden}
.cframe{
position: absolute;
width: 700px;
height: 470px;
top: px; left:2px;
}
.xat{
position: absolute;
width: 435px;
height: 425px;
top: px; left:653px;
}
  .fe{
position: absolute;
width: 435px;
height: 425px;
top: px; left:653px;
}
</style>

<style type="text/css">
#outerdiv {
    width:1160px; height:97px; overflow:hidden; position:absolute; left: 10; top: 8; }#inneriframe { position:absolute; top:-3px; left:-136px; width:1430px; height:1130px;
}
</style>
<div id="outerdiv">
<iframe id="inneriframe" scrolling="no" src="http://eventoshq.me/arriba.html"></iframe>
</div>
<div style="position: absolute; left: 11; top: 116 "><iframe name="cf" id="cf" scrolling="no" style="height: 470px; width: 700px;" src="http://evehq.ucoz.com/inicio.html?width=700&amp;height=470" frameborder="0" ></iframe>
</div>
<div style="position: absolute; left: 737; top: 115 ">
<iframe name="ct" id="ct" scrolling="no" style="height: 425px; width: 435px;" src="http://evehq.ucoz.com/arribachat.html?width=435&amp;height=425" frameborder="0" ></iframe>
</div>
<div style="position: absolute; left: 736; top: 541">
<iframe name="cl" id="cl" scrolling="no" style="height: 45px; width: 436px;" src="http://evehq.ucoz.com/imagenabajo.html" frameborder="0" ></iframe>
</div>

Que puedo hacer la verdad no se como arreglar.