How can I change the background color of this part of my page?

screen shot of my flanking white space dilemmaLook at the attached graphic and you'll see my dilemma. I want to eliminate the white space that you see on either side of my center section. I've played with some different things, but keep coming up short. How do I get rid of the white space and fill it with the bgcolor: 52d9c

Here's my stylesheet and if you want to see the whole code for the page, head out to http://www.barefoot-bay.com

Thanks!


#wrapper{margin:0;padding:0;min-height:100%;}
html, body{height:100%;margin:0;}

#header{width:1052px;margin:0 auto;height:252px;position:relative;}
/*this is your header graphic */

#logo{width:1052px;height:252px;}

#page{width:1052px;margin:0 auto;border-top:none;padding-bottom:0px;}
/*this is not necessary. This is the gradient that starts just below the menu in your example. However, the content id that you see below gives you your "tray" */

#content{float:left;width:1052px; padding-top:0px;padding-bottom:0px;min-height:450px; background-color:#ffffff;}

#footer{padding-top:735px; background:#264d9c}
#footer p{text-align:center;font-size:9px;color:#FFF;margin:0;padding:0;background-color:transparent; font-family: Myriad Pro, Microsoft Sans Serif;}
#footer a{font-family: Myriad Pro, Microsoft Sans Serif; font-size: 9px; color: #ffffff;}

#bglayout{height:50%;width:100%;position:absolute;left:0px;top:0px;z-index:-1;}
/*this is your background gradient, starts at the top and goes all the way down*/

#bgtop{margin:0;min-height:1000px;height:100%;background:#252d9c url(images/background_sliver.jpg) repeat-x top;}
/*these are your clouds */
.left{position:relative;width:100%; background-color:252d9c; background:url(images/left_graphic.jpg) no-repeat left top;height:100%;float:left;}
.right{position:relative;width:100%;background:url(images/right_graphic.jpg) no-repeat right top;height:1000px;}
brucegustPHP DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LZ1Commented:
I'm not sure which part your talking about exactly.  But I think it's the #content div which is line 13 on your stylesheet.css.  

Try giving it the background you need. The color you give is 1 character short.  A hex value is 6 characters long.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
brucegustPHP DeveloperAuthor Commented:
No, that's the center section and you're right about the hex value. I didn't copy and paste all the characters.

The section of the stylesheet that needs to be altered is going to be line 22-25, I just don't know how. These are the flanking elements of my page, but I can't get them to extend all the way to the bottom of the page.

Thoughts?
0
LZ1Commented:
So the thin white border around the center section?

The main problem is that you have nested tables galore.  You should be using divs and semantic HTML and you wouldn't have the white space.  

What are the chances of you being able to change the code?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

joshfraserCommented:
LZ1, I believe he means the footer section as shown in the screen shot. Unfortunately this footer section displays absolutely fine in the browsers on my PC (IE9 and Chrome), guessing it's an IE8/Mac issue or an IE8 in general issue.

Bruce, have you tried turning compatibility view on your browser?
0
LZ1Commented:
If it is the bottom/footer section, I too can confirm it looks fine cross-browser for me as well.
0
Anuradha GoliSystems Development / Support SpecialistCommented:
Is this the one you wanted to change
screenshot
If this is the change you required , i just used some sample color for test

Just replace

<ul id="portfolio" class="innerfade" style="position: relative; height: 401px;">

with

 <ul id="portfolio" class="innerfade" style="position: relative; height: 401px;background-color:#5fe34f">

Don't forget to use 6 digit hexadecimal color code.
0
brucegustPHP DeveloperAuthor Commented:
Hey, folks!

Figured it out. Rather than trying to change any of the footer settings or the settings that applied to the graphics on the left or right, I just added a background-color to the body tag and BOOM! Problem solved!

Thanks for weighing in!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.