IE backgorund color problems with two DIVs..

good day.

I spent some time designing my wordpress blog, and I've been testing it in firefox all the time, since thats what I use.

But now i'm checking it in IE, and its a total mess.. I'm looking for some help on the code, I can't figure it out.

First, check out the site: www.freshbasilcrew.com

At first, I was having a big problem with the column on the left side. I wanted the white background to extend all the way down the page, but it would stop after the menu listing was done. I searched for a solution on this board before asking, and found it would be easier to just put them in the same DIV, that way the menu on the left would be forced to go past the content on the right.

Therefore, I split up the header into 2 sections (left/right), and have 2 images, since there are 2 columns. The left column contains part of the header, and the left menu. The right column contains the right header, and the main content.

So everything looks fine in firefox and opera, but in IE, even the background of the right div is white. And the header is positions wrong. Any thing in specific I should look out for to fix this? It also seems liek the menu disappeared in teh IE browser.

here's some code:

CSS:
/******** BODY OF WHOLE PAGE ********/
body {
background: #000000;
color: #cccccc;
font-family: Tahoma, Verdana, Sans;
font-size: 12px;
}

#leftPage {float:left; width:140px;background-color:#FFFFFF; }
#rightPage {float:left; width:820; margin-left: 140px; margin-top:-350px; position:relative;}
/********* MAIN CONTENT (WHERE POSTS ARE) ********/
#content {
text-align: justify;
padding: 0px 15px 0px 17px;
margin: 0px;
width: 530px;
display: block;
/*border-right: dashed #00CC33 1px;*/
}

.postTitle { display: block; border: solid #FFFFFF 1px; background-color:#005c99; padding: 1em;}
.postTitleText {padding-top: .8em; padding-bottom: .4em;line-height: 1.7em;}
.postdata { display: inline;position:relative; left: 5px; padding: .2em; color: #000000; font-size: 12px; font-weight:bold;}
.entry { background-color:#a7a7a7; color:#000000; border: #FFFFFF solid 1px; border-top: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:1.2em;}
.entry object, .entry img { display: block; margin: auto;}
.entry p { padding: .5em 1em;}
.cats { display: block; background-color:#7f7f7f; border: #FFFFFF solid 1px; border-top: none; font-size: 1em; padding: .5em;}
.divider { display: block; background-color:#000000; padding-top: 25px;}

/****************** SIDEBAR LEFT ***************/
#container-Menu {
position: absolute;
left: 0px;
top: 285px;
width: 140px;
}
#menu {
background-color: #FFFFFF;
color: #000000;
padding-top: 5px;
padding-left:15px;
text-align: left;
}

tried to paste the relevant code.. Let me know what else is needed. Thanks a lot!
vega.

Well, for starters you could try actually adding a background color to the right div. And add display: inline; to the right div.

hmmm.. I been trying to figure it out some more.. THikn i might need to use the box model hack??

I'm not quite sure how it works though.

And maybe it won't work in my situation, cause to fix the left border issue, I had to place the main content area (right div) inside of the left div wich contains the menu.

Well, for starters you could try actually adding a background color to the right div. And add display: inline; to the right div.

haha wow man! that seemed to fix the spacing issues.

great. thanks!

but take a look at it again.. the left menu is still missing for some reason.. And there is this white border around the flash menu in the middle. Is there some IE flash hack I don't know about? Its the first time i use flash for any of my sites.