字段集背景色会影响网站背景色

Question

I am designing a website where its whole background color is light green (#F5FFF6 to be exact), and now I need to create a fieldset who's background color is white (#FFFFFFF). My CSS markup is below:

#page_content {
width: 100%;
height: auto;
min-height: 100%;
position: relative;
background-color: #F5FFF6;
}

#fieldset {
background-color: #FFFFFF;
}

It kinda worked on the "light-green page background color" and my fieldset's color is white which what I wanted too. But I noticed that the area where my fieldset is positioned, the background color of the page was white too instead of that light-green. The rest were all light-green except to that area. So I tried creating another fieldset and boom! The same thing happened to the first fieldset - the area behind my fieldset was white again.

Answer 1

I do not understand the exact problem.
If you don`t want the whole width of the page to be white just give the fieldset a width and so the background color of the page will remain green.

#fieldset {
background-color: #FFFFFF;
width: 100px;
height: 150px;    
}

i made an example: http://jsfiddle.net/aKGmc/2/ if this does not help you please upload a jsfiddle with it so i can take a look at the problem

Answer 2

Ids (selectors prefixed with a #) should be unique to one single element.
If you want to target more than one element of a category, use a class and the appropriate selector ( <div class="something"> and .something {} ) or a generic selector ( div {} ).

Answer 3

That behavior is normal. You chose to apply the white background to an element (Fieldset) and you got the white background relative to that area. So if that is not ok, you probably want to achieve something else.