background color below main header

Hi all,
Building a brand new site, so lots to do still. Working with the Zenn cart first.

I have the top header the way I want it, with rounded corner header image.

I need the area in between the header links & footer links to be a white background. Viewing in FF, only the 2 sidebox backgrounds are white. Viewing with IE, it's all white.

Also, my tile_back gif is not showing up in my 2 sideboxes when I view it with FF. They are when I view it with IE.

http://uniquescrapart.com/shop/

can someone help me correct these issues, please. I can't seem to locate a fix in the stylesheet.

I also want the bottom tile_back.gif area to expand in width across the screen more. How would I do that with out changing the width of my main center table?

Thanks in advance.

Never design in IE use Fire Fox as it is most standards compliant fix IE issues when done

Also, my tile_back gif is not showing up in my 2 sideboxes when I view it with FF. They are when I view it with IE.
Try finding and editing the css for
Yours:

.leftBoxContainer, .rightBoxContainer {
	margin: 0em;
	border: 1px solid #9a9a9a;
	border-bottom: 5px solid #336633;
	margin-top: 1.5em;
	}

Add background image tile_back here

.leftBoxContainer, .rightBoxContainer {
	background-image: url(../images/tile_back.gif);
	margin: 0em;
	border: 1px solid #9a9a9a;
	border-bottom: 5px solid #336633;
	margin-top: 1.5em;
	}

I need the area in between the header links & footer links to be a white background.
Add background color to

#mainWrapper {
	BORDER-RIGHT: #666 0px solid; 
	PADDING-RIGHT: 0px; 
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px; 
	MARGIN-LEFT: auto; 
	BORDER-LEFT: #666 0px solid; 
	WIDTH: 950px; 
	MARGIN-RIGHT: auto; 
	PADDING-TOP: 0px; 
        background-color: #FFFFFF;

}

I also want the bottom tile_back.gif area to expand in width across the screen more. How would I do that with out changing the width of my main center table?
This involves more than a css edit - best to review the files and edits of another template that has seperated the footer from the main wrapper
View HERE amd download HERE

Thanks for your response. much appreciated.

Here's my code for the sideboxes. I want the sidebox content area white, the tile_back gif on the top header of the sideboxes.

.leftBoxHeading, {
margin: 0em;
	background-color: #abbbd3;
	background-image: url(../images/tile_back.gif);
	padding: 0.5em 0.2em;
	color: #000000;
}

.centerBoxHeading, {
margin: 0em;
	background-color: #ffffff;
	padding: 0.5em 0.2em;
	color: #000000;
}

.rightBoxHeading {
	margin: 0em;
	background-color: #abbbd3;
	background-image: url(../images/tile_back.gif);
	padding: 0.5em 0.2em;
	color: #000000;
	}

.leftBoxContainer, .rightBoxContainer {
	margin: 0em;
	border: 1px solid #9a9a9a;
	border-bottom: 5px solid #336633;
	margin-top: 1.5em;
	}

.sideBoxContent {
	background-color: #ffffff;
	padding: 0.4em;
	}

I'll try the mainWrapper bg color, but I believe when I tried that previously it covered up the rounded corner main header image.

the mainWrapper suggestion did cover up my rounded corner header_bg img. so that won't work for what I need.

and yes, I do design using FF, but also check it in IE.
In this case it is not showing up the same in both like it should.

Here's my code for the sideboxes. I want the sidebox content area white, the tile_back gif on the top header of the sideboxes.
I now see them in FF??? Did you change something?
the mainWrapper suggestion did cover up my rounded corner header_bg img. so that won't work for what I need.
It will once you seperate the header & footer from the main wrapper as done in the template I referenced

I got it. :clap:

thank you Kobra!

this is the code I used to fix it.

/*wrappers - page or section containers*/
#mainWrapper {
	text-align: left;
	width: 950px;
	vertical-align: top;
	background:#fff;
	border-left:px solid #c4c4c4;
	border-right:px solid #c4c4c4;
}

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {}
	
#headerWrapper{
background:#e1f6c5 url(../images/usa/bg.jpg);}

#logoWrapper{
height:140px;
width: 950px;
background:url(../images/header_bg.gif);}

#headerWrapper{
	padding-top: 20px;
	}