Problema viendo sitio en ie

[el_cesar]

hola, tengo este sitio montado en joomla http://www.bethlemitaspalmira.edu.co resulta que en firefox y chrome se ven bien los estilos, pero en ie se descuadra todo quisiera saber si alguien me puede ayudar a organizar el estilo para que se vea bien en ie y en firefox por ahi estuve leyendo y vi que hay que crear una hoja de estilos para ie y que la cargue con un if, pero no sabria bien como hacerlo, y si alguien me pudiera explicar por que pasa esto.

gracias


esta es mi hoja de estilos

Código:

.body {
	background-color:#CCCCCC;
	
}
#container {
	position: relative;
	width: 1024px;
	height: auto;
	background-color: #66ffcc;

    left: 15%;
    width: 85%;    // 60% + 20% + 20% = 100%
}
.header { 
	position:relative;
}
.escudo {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 150px;
	width:  174px;
	
}
.banner {
	position: absolute;
	top: 0px;
	left: 204px;
	width: 370px;
	height: 150px;
	background-color: #0033ff;
}
.foto_col {
	position: absolute;
	top: 0px;
	left: 604px;
	width: 298px;
	height: 150px;
	background-color; #ff0000;
}

.menu {
	position:relative;
	top:200px;
}
.inicio {
	position:absolute;
	top:0px;
	left:0px;
	width:89px;
	height:30px;
}
.info_inst {
	position:absolute;
	top:0px;
	left:89px;
	width:89px;
	height:30px;
}
.servicios {
	position:absolute;
	top:0px;
	left:178px;
	width:89px;
	height:30px;
}
.empresas {
	position:absolute;
	top:0px;
	left:267px;
	width:89px;
	height:30px;
}
.cuadro {
	position:absolute;
	top:0px;
	left:356px;
	width:89px;
	height:30px;
}
.matricula {
	position:absolute;
	top:0px;
	left:445px;
	width:89px;
	height:30px;
}
.contacto {
	position:absolute;
	top:0px;
	left:534px;
	width:73px;
	height:30px;
}

.barra {
	position:absolute;
	top:236px;
	left:185px;
	height:19px;
	width: 1024px;
}

.flor {
	position:absolute;
	top: 252px;
	left: 189px;
	width: 57px;
	height: 298px;
}

#contenido {
	position:absolute;
	top:300px;
	left: 250px;
	width: 864px;
	height:auto;

}

.menu_principal_title {
	position:absolute;
	top: 0px;
	left: 0px;
	width:249px;
	height:35px;
	background-image:url(../images/menuprincipal_head.jpg);
	background-repeat:no-repeat;
}
.menu_title {
	position:absolute;
    top:50%;
	left:23%;
    
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	color:#FFFFFF;
	text-align:center;
}
.menu_border {
	position:absolute;
	top:35px;
	width:249px;
	height:auto;
	background-image:url(../images/menupr_border.jpg);
	float:left;
}
.menu_cont {
	position:relative;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-align:left;
	width:240;
	height:auto;
	top:20px;
	left:20px;
}
a {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#0000CC;
	text-decoration:none;
}
a:hover {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	text-decoration:underline;
}
#navi {
	list-style:none;
	margin:10px;
	padding:0;

}
#navi li {
	margin:2px;
	padding:2px;

	
}
a:visited {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#0099CC;
	text-decoration:none;
}

.menu_footer {
	position:absolute;	
	width:249px;
	height:40px;
	background-image:url(../images/menupr_foot.jpg);
}
.video_header {
	position:absolute;
	top: 50px;
	left: 0px;
	width:249px;
	height:35px;
	background-image:url(../images/video_title.jpg);
	background-repeat:no-repeat;
}
.video_title {
	position:absolute;
    top:50%;
	left:23%;
    
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	color:#FFFFFF;
	text-align:center;
}
.video_border {
	position:absolute;
	top:35px;
	left: 1px;
	width:248px;
	height:auto;
	background-image:url(../images/video_border.jpg);
	float:left;
}
.video_footer {
	position:absolute;	
	width:248px;
	height:37px;
	background-image:url(../images/video_footer.jpg);
}

.sabiasque_header {
	position:absolute;
	top: 50px;
	left: 0px;
	width:249px;
	height:35px;
	background-image:url(../images/sabiasque_title.jpg);
	background-repeat:no-repeat;
}
.sabiasque_title {
	position:absolute;
    top:50%;
	left:23%;
    
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	color:#FFFFFF;
	text-align:center;
}
.sabiasque_border {
	position:absolute;
	text-align:justify;
	top:35px;
	width:248px;
	height:auto;
	background-image:url(../images/sabiasque_border.jpg);
	float:left;
}
.sabiasque_cont {
	position:relative;
	top:10px;
	width:130;
	height:auto;
	padding:10px 40px 10px 0px;
	left:10px;
	text-align:justify;
}
.sabiasque_footer {
	position:absolute;	
	width:249px;
	height:65px;
	background-image:url(../images/sabiasque_footer.jpg);
}

.front {
	position:absolute;
	top: 0px;
	width: 600px;
	height: 35px;
	left: 233px;
	background-image:url(../images/cont_header.jpg);
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	font-weight:bold;
	color:#FFFFFF;
}
.front_border {
	position:absolute;
	top:35px;
	width: 540px;
	background-image:url(../images/cont_border.jpg);
	left: 292px;
}
.front_cont {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	padding:10px 40px 10px 0px;
	position:relative;
	top:20px;
	width: 520;
	left: 10px;
}
.front_footer {
	position:absolute;
	width:540px;
	height:85px;
	background-image:url(../images/cont_footer.jpg);
	left:0px;
}
.info {
	position:absolute;
	top:140px;
	left: 80px;
	width:400px;
	height:auto;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:right;
}
.footer {
	position:absolute;
	width: 864px;
	height: 179px;
	top:200px;
	left:-400px;
	background-image:url(../images/footer.jpg);
}
.representante_title {
	position:relative;
	top:20px;
	width: 510px;
	height: 35px;
	background-image:url(../images/representante_tit.png);
	left:0px;
	text-align:right;
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	font-weight:bold;
	color:#FFFFFF;
}
.representante_cont {
	position:relative;
	top:20px;
	width:400px;
	height:auto;
	left: 10px;
	
}