Joomla template fine in Firefox, not IE or Chrome

[thinkfish]

My Joomla template looks great in firefox, but in IE and Chrome, the right column doesn't come to the top of the page, and the bottom collage and footer justify to the left.

I have tried everything and can't figure out what the problem is. If anybody could help, it would be greatly appreciated.

Here is the css :

@charset "utf-8";

/* Div Styles */

/* Center Column Styles */

div#column_center {
float: left;
margin: 0 0 -9000px 0;
padding: 0 0 9000px 0;
width: 550px;
text-align: left;
background-image: url(images/bckgnd_teal_grad.gif);
background-repeat: repeat-x;
background-color: #366;
}

div#col_ctr_body {
float: left;
margin: 0 10px -9000px 10px;
padding: 10px 20px 9015px 20px;
width: 490px;
height: 100%;
background: #fff;
}

div#col_ctr_header {
background-image: url(images/bckgnd_hdr.jpg);
text-align: center;
height: 120px;
}

div#col_ctr_nav_top {
padding: 5px 0 5px 0;
height: 20px;
text-align: center;
background: #039;
}

/* Left Column Styles */

div#column_left {
float: left;
margin: 0 10px -9000px 0;
padding: 0 0 9000px 0;
width: 209px;
text-align: left;
background-image: url(images/bckgnd_teal_grad.gif);
background-repeat: repeat-x;
background-color: #366;
}

div#col_left_logo {
}

div#col_left_nav {
margin: 22px 0 0 0;
}

/* Right Column Styles */

div#column_right {
float: left;
margin: 0 0 -9000px 10px;
padding: 0 0 9000px 0;
width: 178px;
height: 800px;
text-align: left;
background-image: url(images/bckgnd_teal_grad.gif);
background-repeat: repeat-x;
background-color: #366;
}

div#col_rght_body {
margin: 0;
width: 100%;
}

div#col_rght_swapimg {
}

/* Centering Containers */

div#container_site {
margin: 0 auto;
width: 957px;
text-align: left;
overflow: hidden;
}

div#container_body {
width: 100%;
}
 
/* Collage */

div#collage {
clear: both;
width: 957px;
height: 144px;
margin: -144px 0 0 0;
}

/* Footer */

div#footer {
clear: both;
margin: 3px 0 0 0;
width: 957px;
text-align: center;
}

/* Code Styles */

body {
 text-align: center;
 height: 100%;
}
 
html {
height: 100%;
}

h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold;
color: #366;
}

h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-weight: bold;
color: #366;
}

h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
color: #366;
}

p {
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
font-weight: normal;
color: #333;
}

/* Font Styles */

.footer {
font-family: Arial, Helvetica, sans-serif;
font-size: .7em;
color: #333;
}

.tagline {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-style: italic;
text-align: center;
color: #366;
}

.statement {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-style: italic;
font-weight: normal;
color: #036;
}

/* Left Column Navigation Styles */

#col_left_nav form {
color: #000;
font-size: 0.9em;
}

#col_left_nav h3,#right h3 {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
margin: 0 0 0 5px;
padding: 7px 5px 7px 10px;
border: solid 0;
}

#col_left_nav ul {
list-style-type: none;
margin: 0 0 20px -39px;
}


#col_left_nav ul li {
margin: 5px 0 0 2px;
}

#col_left_nav ul li a {
display: block;
padding: 2px 4px 3px 20px;
text-decoration: none;
}

#col_left_nav ul li a:link,#col_left_nav ul li a:visited {
background-image: url(images/bckgnd_nav_root.png);
background-repeat: no-repeat;
color: #fff;
font-weight: bold;
}

#col_left_nav ul li a:hover,#col_left_nav ul li a:active,#col_left_nav ul li a:focus {
background-image: url(images/bckgnd_nav_root_over.png) !important;
color: #fff !important;
}

#col_left_nav ul li ul {
margin: 0;
}

#col_left_nav ul li ul li {
margin: 0;
}

#col_left_nav ul li ul li a:hover,#col_left_nav ul li ul li a:active,#col_left_nav ul li ul li a:focus {
color: #fff;
}

#col_left_nav ul li ul li ul {
padding: 10px 0 10px 5px;
}

#col_left_nav ul li.active a:link,#col_left_nav ul li.active a:visited {
background-image: url(images/bckgnd_nav_root_focus.png);
background-repeat: no-repeat;
color: #fff;
padding: 3px 0 3px 20px;
}

#col_left_nav ul li.active ul li a:link,#col_left_nav ul li.active ul li a:visited {
background-image: url(images/bckgnd_nav_root_sub.png);
background-repeat: no-repeat;
color: #000;
font-weight: normal;
padding: 3px 4px 3px 20px;
}

#col_left_nav ul li.active ul li.active a:link,#col_left_nav ul li.active ul li.active a:visited {
background-image: url(images/bckgnd_nav_root_over.png);
background-repeat: no-repeat;
color: #000;
font-weight: bold;
}

#col_left_nav ul li.active ul li.active ul li.active span.active_link {
color: #000;
font-weight: bold;
margin: 0 0 0 15px;
padding: 3px 0 3px 15px;
}

#col_left_nav form a:hover,#col_left_nav form a:active,#col_left_nav form a:focus {
color: #fff;
}

/* Center Top Navigation Styles */

div#col_ctr_nav_top_ext {
}

.col_ctr_nav_top {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}

.col_ctr_nav_top a:link {
text-decoration: none;
dispay: block;
color: #fff;
padding: 0 20px 0 20px;
}

.col_ctr_nav_top a:visited {
color: #fff;
}

.col_ctr_nav_top a:hover {
background: #39c;
color: #fff;
font-weight: bold;
}

.col_ctr_nav_top a:active {
color: #fff;
}

/* Link Styles */

a:link { 
color: #6f1b1b;
text-decoration: underline;
}

a:visited { 
color: #6f1b1b;
text-decoration: underline;
}

a:hover { 
color: #425c87;
text-decoration: none;
background: none;
}

a:active { 
color: #6f1b1b;
text-decoration: underline;
}

Here is the html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="language; ?>"
lang="language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/coloma/styles.css" type="text/css" />
</head>

<body>

<!-- DIV#CONTAINER CENTERS THE SITE ON THE PAGE -->

 <div id="container_site">

<!-- DIV#CONTAINER MAINTAINS THE HEIGHT OF THE BODY -->

<div id="container_body">

<!-- LEFT COLUMN -->

<div id="column_left">
 
 <div id="col_left_logo">
 <img src="<?php echo $this->baseurl ?>/templates/coloma/images/logo_coloma.gif" />
 </div>
 
 <div id="col_left_nav">
 <span class="col_left_nav"><jdoc:include type="modules" name="left" style="xhtml" /></span>
  
 </div>
 
 </div>
 
<!-- CENTER COLUMN -->
 
 <div id="column_center">
 
 <div id="col_ctr_header">
 </div>
 
 <div id="col_ctr_nav_top">
 <span class="col_ctr_nav_top"<jdoc:include type="modules" name="nav_top" style="xhtml" /></span>
 </div>
 
 <div id="col_ctr_body">
 <jdoc:include type="component" />
 </div>
 
 </div>
 
<!-- RIGHT COLUMN -->
 
 <div id="column_right">
 
 <div id="col_rght_swapimg">
 <jdoc:include type="modules" name="right_img" style="xhtml" />
 </div>
 
<div id="col_rght_body">
 <jdoc:include type="modules" name="right" style="xhtml" />
 </div> 
 
 </div>

</div>

<!-- COLLAGE -->

<div id="collage">
 <jdoc:include type="modules" name="collage" style="xhtml" />
 </div>
 
<!-- FOOTER -->

<div id="footer">
 <span class="footer">&copy; 2010 Coloma Frozen Foods - All Rights Reserved. [phone] | <a href="mailto:[e-mail]">[e-mail]</a></span>
 </div>

 </div>

</body>
</html>

[edited by: alt131 at 1:43 am (utc) on May 17, 2011]
[edit reason] Thread Tidy [/edit]

[AnMwebDesign]

Are you using a separate stylesheet for IE?

If not do a google search for IE specific css. you can link to a stylesheet for IE only and then copy the css rule in question and change the settings just for IE.

[edited by: alt131 at 1:42 am (utc) on May 17, 2011]
[edit reason] Thread Tidy [/edit]