background color below main header

[rkayw]

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.

[kobra]

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

[rkayw]

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.

[rkayw]

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.

[kobra]

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

[rkayw]

I got it.

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;
	}