CSS - 2 Ways To Do The Same Thing Which Is Better?

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!!!!!

Hi all,

http://www.jaysonsgroup.com/zpip2/z.html
- please see the bottom four links (home, glossary, contact, credits)

The HTML is as follows:

Code:

	<div class="centerlinks">

		<table align='center'>
		<tr>
		<td>
                     <ul>
                     <li><a href='#'>Home</a></li>
                     <li><a href='#'>Glossary</a></li>
                     <li><a href='#'>Contact</a></li>
                     <li><a href='#'>Credits</a></li>
                     </ul>
	         </td>
		</tr>
		</table>

	</div>

The CSS:

Code:

	.centerlinks {
		float: left;
		width: 550px;
		text-align: center;
	}

	.centerlinks ul {
		list-style-type: none;
	}

	.centerlinks li {
		float: left;
		padding-left: 10px;
		padding-right: 10px;
	}

As you can see, what I want is a simple UL list that is horizontal, plain text, and centers within the 550px div that surrounds it , even if I add a fifth <li> link in the future.

On Internet Explorer, the <table align='center'> hacks fixes the problem. But it doesn't work on Firefox. Any ideas how I can center this?

(I know I can use padding-left or margin-left but then this isnt a good solution when more menu items are added to that list)


Thanks in advance!!