Hi,
Ie won't position using top, bottom etc to set its dimensions. Ie only likes width and height so your layout won't work at all I'm afraid.
Have a look at my FAQ on 100% height if you want a footer. Also look at the thread on floats because of the 3 pixel jog.
Buddy was also right in your centereing being out also. Heres the code tidied up and most of the answers are in the FAQ thread so read that first and then ask questions later.
You will also need to do a couple of the box model hacks although I've eliminated some by taking out widths where not needed.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CABC</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* commented backslash hack v2 \*/
html, body{height:100%;}
/* end hack */
body {
margin: 0px;
padding: 0px;
text-align:center;
min-width:802px;/*for mozilla*/
}
.header_logo {
background-image:url(http://www.fizix.org/temp/logo.png);
background-repeat: no-repeat;
height: 128px;
width: 400px;
float: right;
}
.header_title {
background-image:url(http://www.fizix.org/temp/name.png);
background-repeat: no-repeat;
height: 128px;
width: 500px;
position: absolute;
}
.header {
height: 128px;
background-color: #99CC99;
border: 1px solid #006600;
background-image: url(http://www.fizix.org/temp/header.png);
}
.footer {
height: 30px;
line-height:30px;
background-color: #99CC99;
border-top: 1px solid #006600;
border-bottom:1px solid #006600;
position: absolute;
bottom: 0px;
background-image: url(http://www.fizix.org/temp/footer.png);
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
text-align: center;
width:100%;
}
.navigation_title {
background-color: #99CC99;
border: 1px solid #006600;
height: 20px;
margin: 1px;
text-align: right;
background-image: url(http://www.fizix.org/temp/navigation_title.png);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
padding-left: 8px;
padding-right: 8px;
padding-top: 4px;
font-variant: small-caps;
}
.navigation_content {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: left;
background-color: #F2F2F2;
background-image: url(http://www.fizix.org/temp/greybg1.png);
background-repeat: repeat-y;
background-position: left;
border: 1px solid #006600;
margin: 1px;
padding-left: 8px;
padding-right: 8px;
padding-top: 4px;
padding-bottom: 4px;
}
.navigation {
width: 200px;
float: right;
}
* html .navigation {margin-left:-3px;}/* 3 pixel jog*/
.main {
border: 1px solid #006600;
background-color: #EAEAEA;
padding-bottom:30px;/*room for footer*/
}
#mainwrap { margin-right: 202px;}
/* commented backslash mac hiding hack \*/
* html #mainwrap {height:1%;margin-right:197px}
* html .main {height:1%}
/* end hack */
.box_title {
border: 1px solid #006600;
background-color: #99CC99;
position: relative;
margin-top: 1px;
margin-left: 1px;
height: 20px;
text-align: left;
background-image: url(http://www.fizix.org/temp/box_title.png);
background-repeat: no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
padding-left: 8px;
padding-right: 8px;
padding-top: 4px;
font-variant: small-caps;
}
.box_content {
text-align: left;
border: 1px solid #006600;
position: relative;
margin-top: 1px;
margin-left: 1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #F2F2F2;
background-image: url(http://www.fizix.org/temp/greybg2.png);
background-repeat: repeat-y;
background-position: right;
padding-left: 8px;
padding-right: 8px;
padding-top: 4px;
padding-bottom: 4px;
}
#center {
position:relative;
width:80%;
margin-left:auto;
margin-right:auto;
text-align:left;
min-height:100%;
border: 1px solid #006600;
background-color: #EAEAEA;
}
* html #center {height:100%}
</style>
</head>
<body>
<div id="center">
<div class='header'>
<div class='header_logo'></div>
</div>
<div class='main'>
<div class='navigation'>
<div class='navigation_title'><span>Navigation</span></div>
<div class='navigation_content'>Link #1</div>
</div>
<div id="mainwrap">
<div class='box_title'>Welcome</div>
<div class='box_content'>CSS allows complete and total control over the
style of a hypertext document. The only way this can be illustrated in
a way that gets people excited is by demonstrating what it can truly be,
once the reins are placed in the hands of those able to create beauty
from structure. To date, most examples of neat tricks and hacks have been
demonstrated by structurists and coders. Designers have yet to make their
mark. This needs to change.</div>
<div class='box_title'>Welcome</div>
<div class='box_content'>CSS allows complete and total control over the
style of a hypertext document. The only way this can be illustrated in
a way that gets people excited is by demonstrating what it can truly be,
once the reins are placed in the hands of those able to create beauty
from structure. To date, most examples of neat tricks and hacks have been
demonstrated by structurists and coders. Designers have yet to make their
mark. This needs to change. CSS allows complete and total control over
the style of a hypertext document. The only way this can be illustrated
in a way that gets people excited is by demonstrating what it can truly
be, once the reins are placed in the hands of those able to create beauty
from structure. To date, most examples of neat tricks and hacks have been
demonstrated by structurists and coders. Designers have yet to make their
mark. This needs to change. CSS allows complete and total control over
the style of a hypertext document. The only way this can be illustrated
in a way that gets people excited is by demonstrating what it can truly
be, once the reins are placed in the hands of those able to create beauty
from structure. To date, most examples of neat tricks and hacks have been
demonstrated by structurists and coders. Designers have yet to make their
mark. This needs to change.</div>
</div>
</div>
<div class='footer'>Design Copyright 2004</div>
</div>
</body>
</html>
Now looks the same in ie and firefox and the footer doesn't overlap the content as yours did 
Paul
Posting Permissions
Bookmarks