CSS - Ie Doing Its Thing

Say my page has this layout

<div class="newsheader"><a class="white" href="...">devshed.com</a></div>

and my sheet looks like this,

div.newsheader { font-family: Verdana;
color: white;
background-color: #EFBE56;
}
a:link {color: #C6930A;}
a.white: link {
font-family:Verdana;
color: white;
}

Couldn't the same be accomplished by

div.newsheader a {color: white}
and
<div class="newsheader"><a href="...">Devshed.com</a></div>

Notice I don't have to declare a class for the anchor tag. If I have a lot of these to change it could be a big time saver. But, which is better for CSS compatability, code readability, and possible future changes. Maybe its all about my personal preferences.

Thanks

Hey there I like making websites and for this one website i want to make it look really good and then buy a domain name when I'm done, but I can't figure the code in css to make an image appear at 500px down and 50px to the left when my mouse is over a link . If someone could help me with this I would be so happy! Thank you
and have a nice day

new to the world of css and now working on a shell for a website I'm doing.

here is the css
PHP Code:
 html, body{ 
 margin:0; 
 padding:0; 
 }
 
h1, h2, h3, h4, h5, h6 {
 color: #bf9060;
}

img {
    padding-bottom: 2px;
}
 
#pagewidth{ 
 width:100%; 
  min-width: 500px; 
  
} 
 
#header{ 
 height:88px; 
 width:100%; 
 background:#ccae8f; 
 background-image: 
 url("/images/pillowback3.jpg");
 background-repeat: repeat-x;
 }
#navcontainer
{
margin: 0;
padding: 0;
height: 25px;
width: 100%;
}

#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;

}

#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#navcontainer ul li a
{
background: #ffffff;
width: 125px;
height: 18px;
border: 1px solid #ccae8f;
padding: 0;
margin: 0;
color: #000000;
text-decoration: none;
display: block;
text-align: center;
font: normal 14px/22px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#navcontainer ul li a:hover
{
color: #ffffff;
background: #806c59;
}

#navcontainer a:active
{
background: #806c59;
color: #ffffff;
}

#navcontainer li#active a
{
background: #c60;
border: 1px solid #c60;
color: #fff;
} 





and the list
PHP Code:
<div id="navcontainer">
            <ul id="navlist">
            <li><a href="/pillows.php" title="Everything you need for your pillow needs">Home</a></li>
            <li><a href="/build/index.php" title="Start here for the Best Pillows the net has to offer">Build</a></li>
            <li><a href="/samples/index.php" title="Pick up to 8 samples ">Samples</a></li>
            <li><a href="/products/index.php" title="See our full line of Products">Products</a></li>
            <li><a href="/about/index.php" title="Meet our staff. How PillowWorks works.">About</a></li>
            <li><a href="/contact/index.php" title="Contact us for any reason">Contact</a></li>
            </ul>
            </div> 





as you can see i'm using px to style the size of the elements, but that isn't very liquid

This is, without a doubt, the weirdest think I've ever seen when dealing with IE and CSS. Have a look at this webpage in IE and Firefox:

http://atlbloggers.net

Looks fine in FF, no? But in IE, there's this giant white 'box' floating over the content in my #textarea tag. As near as I can tell, its being caused by this CSS:

Code:

#pageContainer
{
	border-color: #418ade;
	background-color: #fff;
}

specifically, the background-color item. Comment that out, the site looks fine in IE. Add it back in, it breaks in IE again. I'd like to be able to set the bg color on the pagContainer tag cause I want to set a different background color for the body...

Has anyone ever seen anything like this? Is it something I'm doing wrong? Please, HELP!!!!!