Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Background image is overprinting white table background

Posted by: jsdevore Feb 17 2007, 11:28 AM

I have created this site mostly using css. However, to center the site, I have placed everything inside a table and centered the table. I would like to add a background-image to the site, but have the white background in the table override the background-image. I have successfully validated my css page. I believe the problem may be related to my use of absolute positioning in my #copy div; when I remove it, the white background shows through but my copy appears at the top of the page.

Any help you can provide will be greatly appreciated!

Here is a link to the page that I am tinkering with:
http://www.plgaladies9.com/aboutus.html

Here is a direct link to my style sheet:
http://www.plgaladies9.com/menupl9.css

Thank you.

Posted by: pandy Feb 17 2007, 02:45 PM

QUOTE(jsdevore @ Feb 17 2007, 05:28 PM)

I have created this site mostly using css. However, to center the site, I have placed everything inside a table and centered the table.

Why did you do that if you use CSS?

QUOTE

I would like to add a background-image to the site, but have the white background in the table override the background-image. I have successfully validated my css page. I believe the problem may be related to my use of absolute positioning in my #copy div; when I remove it, the white background shows through but my copy appears at the top of the page.

I'm known to miss the obvious, but all boxes with text except the top menu have a white background in the browsers I tried (IE6, FF).

Posted by: jsdevore Feb 17 2007, 04:35 PM

QUOTE(pandy @ Feb 17 2007, 02:45 PM)

QUOTE(jsdevore @ Feb 17 2007, 05:28 PM)

I have created this site mostly using css. However, to center the site, I have placed everything inside a table and centered the table.

Why did you do that if you use CSS?

QUOTE

I'm known to miss the obvious, but all boxes with text except the top menu have a white background in the browsers I tried (IE6, FF).

Thanks for your response. Good question regarding the use of the table for centering. I was trying to center it using a wrapper tag and it just wasn't working. I threw the contents into a table and it was centered in seconds. Probably not the right answer, but I'm pressed for time and I knew that would work.

The boxes themselves are on a white background, but the striped image is showing through all other places. I want the site itself to sit entirely on white with just the striped background showing to the left and right edges. If eliminating the table and working through my problems with the wrapper tag would solve this problem, I'm game for changing it. Thanks for your input!

Posted by: pandy Feb 17 2007, 07:16 PM

Oh, I thought that looked nice.

You have positioned almost everything absolute. AP elements doesn't take up any space, thus doesn't affect the height of the element that contains them. Put a border on the table and you can see that all the boxes stick out of it.

Posted by: jsdevore Feb 18 2007, 02:45 AM

QUOTE(pandy @ Feb 17 2007, 07:16 PM)

Oh, I thought that looked nice.

You have positioned almost everything absolute. AP elements doesn't take up any space, thus doesn't affect the height of the element that contains them. Put a border on the table and you can see that all the boxes stick out of it.

Yes, I see what you mean about the boxes sticking out of the table. I decided to remove the table and try working with the wrapper div instead. However, I am doing something wrong - it's still not providing the white background that I'm looking for.

At this point, I'm still trying to center the site using the wrapper tag, but I would be just as happy going with a left alignment as long as I can have the site sit on a white background and be surrounded on the right with the background-image tag. Here is a link to my css style sheet. Any ideas on why wrapper isn't working?

http://www.plgaladies9.com/menupl9.css

Thanks for your input.

Posted by: Frederiek Feb 18 2007, 05:28 AM

You don't have a div with a class="wrapper" in your html code. Put one around all your content (between the <body> and </body> tags). Then the page does what you want.

Posted by: jsdevore Feb 18 2007, 08:09 AM

QUOTE(Frederiek @ Feb 18 2007, 05:28 AM)

You don't have a div with a class="wrapper" in your html code. Put one around all your content (between the <body> and </body> tags). Then the page does what you want.

Actually I do on the /aboutus page: http://www.plgaladies9.com/aboutus.html. I am only working with one page instead of site-wide until I get things adjusted properly. However, your post made me realize that on my style sheet last night, I listed div.wrapper as a class when in my html I had div="wrapper." I was so busy looking for other problems and missed that obvious one. I got it working now - centered on white with a background using a wrapper.

Thanks so much for everyone's help!