http://www.dynamicwebstudios.com/test/header2.html

Looks correct in Firefox 2 and IE7, but it's totally screwed up in IE6. I've been staring at it for 3 hours and trying to figure what the issue is, but I can't tell. I'm a relative newb in CSS so it could just be something wrong there, but this is based of a template I created which is slightly modified here but works just fine in other sites it's used in, including in IE6.

Here's my CSS:

@charset "utf-8";
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #000000;
text-decoration: none;
background-color: #EEEEEE;
margin: 10;
background-attachment: fixed;
background-repeat: repeat-x;
background-position: top;
background-image: url(img/bg.png);
}

h1 { font-size: 24px; text-decoration: none; font-weight: bolder; color: #23453b; font-family: Georgia, "Times New Roman", Times, serif; text-align: right; }
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-decoration: none;
color: #856C46;
}
#wrapper {
width: 810px;
height: auto;
margin-right: auto;
margin-left: auto;
background-color: #856D46;
padding-top: 5px;
padding-bottom: 5px;
}
#content {
background-color: #21463c;
overflow: hidden;
margin-right: 5px;
margin-left: 5px;
background-image: url(img/bg-tree.png);
background-repeat: no-repeat;
background-position: left bottom;
padding: 5px;
}
.sidebar {
text-align: center;
margin: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
text-decoration: none;
width: 100%;
}
.sidebar a:link {
color: #ff5600;
text-decoration: none;
font-weight: normal;
}
.sidebar a:hover {
text-decoration: none;
color: #4878F0;
font-weight: normal;
}
.sidebar a:visited {
text-decoration: none;
font-weight: normal;
color: #ff5600;
}
a:link {
color: #094B9E;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #856C46;
text-decoration: none;
font-weight: bold;
}
a:visited {
color: #094B9E;
text-decoration: none;
font-weight: bold;
}
a:active {
color: #FF0000;
text-decoration: none;
font-weight: bold;
}
#bottomArea {
background-color: #21463C;
overflow: hidden;
margin-right: 5px;
margin-left: 5px;
margin-top: 5px;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
vertical-align: middle;
}
#bottomAddress {
text-align: left;
vertical-align: middle;
float: left;
position: static;
overflow: hidden;
}
#leftColumn {
position: static;
float: left;
width: 150px;
text-align: center;
}
#mainCell {
width: 618px;
padding: 6px;
position: static;
float: right;
overflow: auto;
min-height: 845px;
background-image: url(img/whitetransbg.png);
}
#nav {
position: static;
float: right;
width: 130px;
text-align: center;
margin-left: 5px;
}
#mainLogo {
position: static;
float: left;
width: 300px;
margin-bottom: 5px;
}
#indicia {
font-size: 10px;
color: #FFFFFF;
text-align: center;
clear: both;
margin-top: 10px;
margin-bottom: 10px;
}
#indicia a:link {
color: #FFFFFF;
text-decoration: none;
}
#indicia a:visited {
color: #FFFFFF;
text-decoration: none;
}
#indicia a:hover {
color: #FFFFFF;
text-decoration: none;
}
#indicia a:active {
color: #FFFFFF;
text-decoration: none;
}
#bottomTextMenu {
position: static;
float: right;
overflow: hidden;
vertical-align: middle;
}
#bottomTextMenu a:link {
color: #FFFFFF;
text-decoration: none;
}
#bottomTextMenu a:visited {
color: #FFFFFF;
text-decoration: none;
}
#bottomTextMenu a:hover {
color: #FFFFFF;
text-decoration: none;
}
#bottomTextMenu a:active {
color: #FFFFFF;
text-decoration: none;
}


I can't tell if the problem is with "mainCell" or "content". I've tried clearing both for both and it didn't change anything.

Any help is appreciated.

(I should add that I do realize IE6 is not going to display the transparency correctly - I'm referring to the problem with the DIVs nestled inside one another)

It's indeed quite messy in IE6, but I think the biggest problems are solved when you add clear: both to the bottomArea div and give it a fixed width.

It's indeed quite messy in IE6, but I think the biggest problems are solved when you add clear: both to the bottomArea div and give it a fixed width.

That did it - thanks so much. Clearing both aligned things correctly, and adding the width took care of making sure the height was enough to cover all of the contents.