Nested Divs - BG images not showing in IE 6

Question

I'm using nested divs for the layout of the site below. The
div tags have a BG image in each.
Everything works fine except in IE6. In that browser none of
the BG images show up.
Here's the site:
http://www.jesseyoung.com/phenopath/test.html
CSS is pasted in below
Suggestions?
-Jesse
/* CSS Document */
body {
text-align:center;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 62.5%;
margin-top: 31px;
background-color: #333333;
background-image: url(images/BG.gif);
background-repeat: repeat-x;
/* Sets all margins and padding to zero*/
margin: 0;
padding:0;
/* Main Wrapper*/
#wrapper {
text-align:left;
width:900px;
position:relative;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-size: 1.2em;
height: auto;
.top {
background-image: url(images/top.jpg);
background-repeat: no-repeat;
background-position: center top;
.right {
background-image: url(images/right.jpg);
background-repeat: no-repeat;
background-position: right top;
.bottom {
background-image: url(images/bottom.jpg);
background-repeat: no-repeat;
background-position: center bottom;
.left {
background-image: url(images/left.jpg);
background-repeat: no-repeat;
.tlc {
background-image: url(images/tlc.jpg);
background-repeat: no-repeat;
background-position: left top;
.trc {
background-image: url(images/trc.jpg);
background-repeat: no-repeat;
background-position: right top;
.brc {
background-image: url(images/brc.jpg);
background-repeat: no-repeat;
background-position: right bottom;
.blc {
background-image: url(images/blc.jpg);
background-repeat: no-repeat;
background-position: left bottom;
.contentWrapper {
padding-right: 18px;
padding-left: 18px;
padding-top: 31px;
padding-bottom: 21px;
#logoNavWrap {
height: 71px;
width: 864px;
position: relative;
#logoBox {
width: 175px;
height: 71px;
float: left;
/*End hide from IE-mac */
#NavWrap {
float: right;
width: 650px;
padding-top: 30px;
#contentWrapperInner {
background-color: #FFFFFF;
/* Main Layout */
JESSE FOOTER CREDITS
a.jesse:link { color: #999999; font-size:8pt; font-family:
Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration:
none }
a.jesse:visited { color: #999999; font-size: 8pt;
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
text-decoration: none }
a.jesse:hover { color: #999999; font-weight: bold; font-size:
8pt; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
text-decoration: none; letter-spacing: 1pt }
a.jesse:active { color: #999999; font-size: 8pt; font-family:
Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration:
none }
#jesseCredit {
width: 760px;
padding-top: 10px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
PAGE FOOTER
#footer a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FFFFFF;
#footer a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FFFFFF;
#footer a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FFFFFF;
#footer a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FFFFFF;
#footer{
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FFFFFF;
#footerBox {
width: 760px;
padding-top: 10px;
margin-right: auto;
margin-left: auto;
color: #FFFFFF;
Navigation Banner
#navigationBanner {
background-color: #0033FF;
height: 50px;
width: 760px;
Clears floats within container, so container continues to
wrap around contents
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
.clearfix {display:inline-table;}
/*Hides from IE-mac\*/
*html .clearfix {height:1%;}
.clearfix {display:block;}
#imageBannerWrap {
height: 240px;
width: 862px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #666666;
border-right-color: #FFFFFF;
border-bottom-color: #666666;
border-left-color: #FFFFFF;
padding-top: 1px;
padding-bottom: 1px;
margin-right: auto;
margin-left: auto;
#ColumnLeft {
padding: 20px;
#columnRight {
padding: 20px;
h1 {
color: #335AA3;
font-weight: normal;
letter-spacing: .1em;
font-size: 2em;

Answer 1

JesseLY wrote:
> I'm using nested divs for the layout of the site below.
The div tags have a BG
> image in each.
> Everything works fine except in IE6. In that browser
none of the BG images
> show up.
>
> Here's the site:
http://www.jesseyoung.com/phenopath/test.html
>
> CSS is pasted in below
>
> Suggestions?
I see your background images in IE6 - perhaps too much in IE6
even - I
see the BG.gif showing through in the area around the
navigation.
This could be one of these IE quirky things or perhaps a
matter of
needing background-color: #fff; applied to the divs in and
around that area.
HTH
chin chin
Sinclair