CSS Beginner Question – the header didnt adopt the assigned color

Question

Hi Guys, I hope you can help my with a exercise I have been stacking. I am wondering why the header is not appears in blue - as I actually have assigned: Please not the header area. I have assigned color "blue". BUt I have tried any color as well. The header keeps white

This is the CSS Code. (HTML is ok according to Dreamwaver)

Thanks a lot! Best regards from Berlin, Germany.

* {
 margin: 0; 
 padding: 0;
}

body {
 background-color: #eeeeee;
 font: 1.1em/1.3em Georgia, "Times New Roman", Times, serif;
 /*1.1em/1.3 typischer Code für: Schriftgröße 1.1em und Zeilenhöhe 1.3em*/
}

h1, h2, h3 {
 padding: 0.7em 0;
}

p {
 padding: 0.3em 0; 
}

/*-------- CONTAINER POSITION (#CONTAINER)----------*/

#container {

 margin: 1em 6%;
 background-color:#ffffff;
 border:1px solid #1166cc;
}

/*-------- TOP AREA POSITION (#HEADER)----------*/
#header {
 background-color: blue;

}

#header h1 {
 color: white;
 float: left; 
 width: 65%;
 padding: 0.5em 2%;
}

#header form {
 padding: 0.4em 1%;
 float: right; 
 background-color: #77aadd;
 width: 20%;
 margin: 0.5em;

}

#header input {
 padding:5px;
 background-color: #ffffff;
 border: 2px solid;
 font-size: 1em;
 color: #999999;
 width: 70%; 
}


/*-------- CONTAINER NAVIGATION POSITION (#NAVBAR)----------*/

#navbar {
 clear:both; 
 background-color:#77aadd;
 padding: 0.1em;
} 

#navbar ul {
 padding: 0.6em;
}

#navbar li {
 display:inline;
 list-style:none;
}

#navbar li a {
 padding: 0.3em;
 color: #fafafa;
}

/*-------- CONTENT POSITION (#CONTENT)----------*/

#content {
 float: left;
 width: 65%;
 padding: 0.5em 3%;
}

/*-------- INFOBAR DESIGN (#SIDEBAR)----------*/


#sidebar {
 float:right;
 padding: 0.5em 3%;
 font-size: 0.95em;
 background-color:#cceeff;
 width: 23%; 
}

/*-------- FOOTER POSITION (#FOOTER)----------*/

#footer {
 clear:both; 
 background-color:#5599dd;
 text-align: right;
 color: white;

}

#footer p {
 padding: 0.5em;
}

Answer 1

Double check your use of ID's and Classes.

Make sure your Header container has a height value (Use Firebug). If you are using floating elements in your Header, remember to place <div style='clear:both'></div> just before closing Header Container.

Answer 2

Use firebug to debug it. Select the elemnt (with the arrow icon) then see the CSS style panel. It will tell you all css styles and where they were defined for the element.

Answer 3

Add position, width and height to #header, for example:

#header {
  background-color: blue;
  position: absolute;
  width: 80%;
  height: 20%;
}

If you don't, the browser have no way of knowing how big #header is supposed to be.

Also, use http://validator.w3.org to check that your code is OK. It's much more reliable than Dreamweaver. At least Dreamweaver 8, that I'm using; later versions may be better.

By the way, if you're learning HTML, CSS or one of several other computer languages, http://www.w3schools.com is a great resource.