CSS background-color issues

[mran]

Hi

I am trying to create a tableless layout with CSS and I have a problem. Here is my CSS

body { background-image: "pixURL" }
container { background-color: white }
contentL { background-color: white }
contentC { background-color: white; }

contentL and contentC are nested within container and container is nested within body.

I'm trying to set the background-color of the container element to white so that even though the heights of contentL and contentC are different, there will still be a uniform white background.

For some reason it is not working. columnL is shorter than columnC (as expected) and so you can see the image that is used for the background of the body tag below columnL. This happens even though both columnL and columnC are nested withing container and container's background-color is set to white.

Any recommendations would be great. I'm trying to create a tabless design.

Thanks
M

[azoomer]

Do you have a link to the page. It is a little bit difficult to visualize the problem from your description alone.

[bluewalrus]

I see a few problems with this


body { background-image: "pixURL" }
container { background-color: white }
contentL { background-color: white }
contentC { background-color: white; }


Are the contents ids or classes?

If ids it should be


body { background-image: url("pix.jpg"); }
#container { background-color: #ffffff; }
#contentL { background-color: #ffffff; }
#contentC { background-color: #ffffff; }


If classes change the # to . Every property needs to end with a ; and I think if you are using a name like you did you'd need it in quotes the straight entry is for hex code.

[mran]

Hello

You are correct, the contentL, contentC and container are all IDs (none are classes) and in my code I wrote them as you have. I had used short-hand in my initial posting because there are other attributes associated with those and I didn't want my posting to be too long.

Here are the actual styles from my code

body
{
margin: 0px;
padding: 0;
font-family: 'Calibri', Arial, San-Serif;
font-size: small;
background-color:#ffffff;
color:#444;
background: fixed;
background-image:url(pix/bkgrdgrayfade.gif);
background-repeat: repeat-x;
}


#container
{
width:950px;
margin:10px auto;
background-color:#FFFFFF;
}


#contentL
{
margin:0em 0em 0em 0em;
padding:0em 0em 0em 0em;
width:153px;
float:left;
background-color:#FFFFFF;
height:1200px
}


#contentC
{
margin:0em 0em 0em 0em;
padding: 0em 0em 0em 0em;
float:right;
width:790px;
border-left:thin gray solid;
background-color:#FFFFFF;
}

If you notice that I listed a height value for contentL, that is because I was trying to estimate the height of contentC. The 1200px is about 1/2 as long as it needs to be.

Again, I'm hoping that nesting the two contentL and contentC DIVs in the container DIV would resolve the issue. But at this point it hasn't. (I had tried to set the background-color attribute of the body tag to #ffffff; in addition to setting the background-image attribute. I then set the background-color attribute of container to inherit. That didn't help either, so that is why the background-color attribute is still listed in for the body tag)

Thanks,
M

[mran]

Hi,

I do not have a link to this page at this point. It is not live yet and is set up on my desktop.

Thanks,
Michael