DIV background colors

[Perseus]

I am having trouble getting my <div> for the main content of the page to have my specified color. Whenever I start adding the <ul>, the background color for the <div> disappears. I am trying to avoid using paragraph tags. But then I decided to add them in with the <li>s. So here is my code so far:

(im just including the content section)
<div id="content" class="copy">
<ul>
<li><p>This is a sample sentence in order to test out the background color.</p></li>
</ul>
</div>

and my CSS for this section is:

#content {background: #F7F0E1; width: 579px; position: absolute; left: 32px; top: 122px; padding: 0px; margin: 0px;}
.copy {width: 579px;}
#content ul {list-style: none; padding: 0px; margin: 0px; position: absolute; left: 10px; top: 50px;}
#content li {list-style: none; font: 11.5px/1.0 Tahoma, Verdana, serif; color: #4c4c4c; text-align: left;}

You can see I made the background color for <div id="content"> #F7F0E1.
How can I create a solid background color for the div without having to greate background colors and padding for the ul in order to have the background color? I have tried "background-color" instead of "background" and still nothing! What can I do? Thanks!

 

[Perseus]

Im just asking for something fairly simple.....how can I get a div with a width of 570px to have a certian background color, (its height would be however long the content is).....when I add my ul for some reason the color disappears.

 

[Gnomo]

Okay, I think I see your problem.

1st, remember <div> tags are only as big as they 'need' to be, unless sized by CSS.
2nd, in your <li> and <ul> tags have styles containing "position: absolute;". This changes they way that elements are rendered by the browser. Basically it takes the element out of the space that it would be rendered in and all of the code shrinks in to fill the space left by it. So, to the browser you <div> tag is empty and therefore has not height;

So, to fix this you could do several things.

One option would be to use relative positioning for the <li> and <ul> tags. You can use negative numbers in the top and left if you need to move the element past where it is normally placed.

A second option would be to give the <li> and <ul> elements and "z-index" and give the <div> a height. This would make the <li> and <ul> elements float above the other elements on the page and the <div> would just be sized behind them.

One other note worthy thing about <div> heights: Sometimes <div> tags are rendered smaller than the content inside them calls for (especially with IE). To fix this problem, you can place a "<br clear="all" />" at the end of the <div> to force some extra space.

 

[mdnky]

Get rid of the absolute positioning on every element to start with. From the limited amount of 'code' you posted, it's not needed. A link to an example of the entire site would make it easier to figure out. A drawing or mockup would be even better.

Gnomo nailed it...since you're absolutely positioning everything you're "container" (in this case the content tag) tags don't have any real content in them, so they're not displaying.

On a side note...you need to remove that P tag within the LI to ensure it's valid code. What was the purpose of this?