CSS quirks help

ixalmida

I need help with a CSS layout that only seems to work properly in IE 6/7 & IE 8 compatability mode. I really like the layout but it needs Mozilla support (I'm not concerned with supporting EVERY browser, just the latest IE & Mozilla). The image links below shows how it renders in Firefox (with quirks highlighted):

Example 1 -- Example 2

Here is the relevant CSS:

@charset "utf-8";
/*** INET Style Sheet ***/

body {
  background-color: #CCCCCC;
  min-width: 980px;
}

#page {
  position: relative;
  top: -12px;
  width: 95%;
  margin: 0 auto;
  overflow: hidden;
  background-color: #F0F0F0;
}

#main {
  position: relative;
  width: 100%;
  left: 150px;
  background-color: #FFFFFF;
}

#reset {
  position: relative;
  width: 100%;
  left: 100%;
  margin-left: -148px;
}

#right-box {
  position: relative;
  width: 100%;
  margin-left: -150px;
  padding: 0;
  background: #F0F0F0;
  left: -2px;
}

#content {
  position: relative;
  width: 100%;
  margin-left: -100%;
  left: 150px;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0px;
  clear: both;
  visibility: hidden;
}

.heightfix:before {
  content: '.';
  display: block;
  visibility: hidden;
  height: 0;
}

#banner {
  clear: both;
  height: 60px;
  text-align: center;
  background: #000000 url(images/inet_v2.gif) left no-repeat;
}

#tabs {
  clear: both;
  margin: 0px auto;
  padding: 0;
  height: 22px;
  width: 100%;
  text-align: left;
  background-color: #000000;
}

#footer {
  clear: both;
  background-color: #000000;
  height: 32px;
  color: #FFFFFF;
  text-align: center;
  font: italic 8pt Geneva, Arial, Helvetica, sans-serif;
}

#left {
  float: left;
  width: 150px;
  text-align: left;
  font: normal 9pt Arial, Helvetica, sans-serif;
}

#right {
  float: right;
  width: 150px;
  text-align: center;
  font: normal 9pt Arial, Helvetica, sans-serif;
}

#center {
  margin: 0 150px 0 150px;
  padding: 0 1px 20px 1px;
  text-align: center;
  font: normal 10pt Geneva, Arial, Helvetica, sans-serif;
}

Here's the relevant HTML (content removed):

<!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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>INET v2</title>
<link href="inet.css" rel="stylesheet" type="text/css">
</html>

<body>
<div id="page">
  <div id="main">
    <div id="reset">
      <div id="right-box">
        <div id="content" class="clearfix">
          <div id="banner">
              <p>Information NETwork</p>
              <span class="time"><?php  print date("l F j, Y");?></span>
          </div>
          <div id="tabs"></div>
          <div id="left"></div>
          <div id="right"></div>
          <div id="center" class="heightfix">
              Main Content Here!
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="footer">
    <p>&copy; Designed for Internet Explorer 7.0. (Other browsers are not fully supported at this time.)</p>
  </div>
</div>
</body>
</html>

Any ideas?