CSS - Unknown Css Problem Newbie

Hello, Ive been coding with CSS for about 2 weeks now. I have recently created this site and have tested it in IE and Firefox. Everything is fine but my Navigation. I have linked to a screenshot of the navs in each browser.

Internet Explorer:
http://panik.owphosting.com/nav1.jpg

FireFox:
http://panik.owphosting.com/nav2.jpg

Here is my CSS:
Code:

img { 
	border: 0px none;
	}
body{
	background-color: #ffffff;
	color: #000;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px; 
	font-family: Verdana,sans-serif;
	font-size:10px 
}
table { 
	color: #000; 
	padding: 0; 
	margin:0; 
	border: 0px none;
	font-size:11px 
}
h1 {
	font-family: arial;
	font-size:18px
	}
h2 {
	font-family: arial;
	font-size:16px
	} 
a:link {
	color: #000099; 
	font-weight: bold; 
	text-decoration: none;
}
a:visited { 
	color: #000099; 
	font-weight: bold; 
	text-decoration: none; 
}
a:active {
	color: #000099; 
	font-weight: bold; 
	text-decoration: none; 
}
a:hover {
	color: #99cc33; 
}
.cssnav{
	width: 144px;
	height: 25px;
	padding: 0;
	margin: 0;
}
.cssnav a {
	width: 144px;
	height: 25px;
	color: #fff;
	background: #99cc33;
	border-right: 2px solid #d6f0a3;
	border-left: 2px solid #d6f0a3;
	padding-left: 5px;
	padding-top: 5px;
	margin-top: 1px;
	margin-bottom: 1px;
}
.cssnav a:visited {
	width: 144px;
	height: 25px;
	color: #fff;
	background: #99cc33;
	border-right: 2px solid #d6f0a3;
	border-left: 2px solid #d6f0a3;
	padding-left: 5px;
	padding-top: 5px;
	margin-top: 1px;
	margin-bottom: 1px;
}
.cssnav a:hover {
	width: 144px;
	height: 25px;
	color: #000;
	background: #d6f0a3;
	border-right: 2px solid #d6f0a3;
	border-left: 2px solid #d6f0a3;
	padding-left: 5px;
	padding-top: 5px;
	margin-top: 1px;
	margin-bottom: 1px;
}

table#sidebar {
	background: #99CC33;
}
table#thetable {
}
table#thetable td.sidebar2 {
}
.sidebar {
	background: #99CC33;
	border-right: 2px solid #000;
}
table#sidebar td.blockhead {
	background: #c5e586;
	color: #000;
	text-align: center;
	font-weight: bold;
	font-size: 10pt;
}
.footer {
	background: #FF9933;
	color: #000;
	text-align: center;
	font-size: 8pt;
	border-top: 2px solid #000;
}
.footer a{
	color: #fff;
}
.footer a:visited{
	color: #fff;
}
.footer a:hover{
	color: #000;
}
.cat {
	color: #ff9933;
	font-size: 16px;
	font-weight: bold;
}
.lightgreen {
	background: #69A583;
}
.headbar {
	background: #FF9933;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	padding: 2px;
	text-align: right;
}

And Here is the code for the Dynamicly generated navigation (PHP):
PHP Code:
<TR>
              <TD>
              <div class="cssnav"><a href="index.php">Home</a></div>
              <?php
              $nav_query = "SELECT name FROM catagories ORDER BY id";
              $nav_result = mysql_query($nav_query) or die ("Navigation Query Error");
              $nav_numofrows = mysql_num_rows($nav_result);
              for($i = 0; $i < $nav_numofrows; $i++) {
                  $nav_row = mysql_fetch_array($nav_result);
                  echo '<div class="cssnav"><a href="catagory.php?id=' . $nav_row['name'] .'">' . $nav_row['name'] . '</a></div>';
              }
              ?>
              <div class="cssnav"><a href="http://panik.owphosting.com/wkforum/index.php" target=_blank>Forum</a></div>
              </TD>
            </TR> 

thanks

hi, just started with css and im having trouble centering 3 columns in a container.

Code:

<div id="container">
        <div id="content">
                <h1>Title Header</h1>
                <div id="top">
                    <div class="col">
                        <h2>Section Header</h2>
                        <p>Lorem ipsum est cu voluptatum efficiantur deterruisset, nec et solum lucilius argumentum, eum ei regione bonorum suavitate. Lorem nonummy suscipiantur sit cu, id eum soluta putant. Sale porro rationibus mei no. Vis ut primis virtute nostrud, sea an malis menandri definiebas, his agam ancillae delectus ei. Ei deleniti noluisse interesset quo, vis at quem scriptorem cotidieque. Sit an virtute gubergren expetendis, at ludus dolor accusam per.</p>
                    </div>
                    <div class="col">
                        <h2>Section Header</h2>
                        <p>Ferri docendi nec ut. Viris tamquam ad quo, nam admodum facilisis adolescens ut, usu meis iriure tractatos at. Ei duo eros qualisque elaboraret, paulo vivendo inciderint an duo, mea eius exerci constituam cu. Ne facer exerci appetere vis, id dicat malorum mel, an sed ferri ludus aliquyam. Ut omnis meliore praesent usu, te sit quas tempor moderatius, accusam voluptua eam at. Duo agam etiam facilisi eu, cum an aeque congue contentiones, id omnium persecuti sadipscing sit. Ne eum invidunt laboramus, eum error nostro ad.</p>
                    </div>
                    <div class="col">
                        <h2>Section Header</h2>
                        <p>Quem feugiat adipisci no sed, simul solet mandamus ut sea, no vocent corrumpit argumentum per. Cu iisque facilisi insolens est, posse nonummy adipisci vel ut. An has nibh natum dissentias, te lorem legere posidonium eam, te quodsi prompta euripidis sed. Ne noluisse petentium cum, sed utroque offendit recteque eu. Te cum petentium disputando, id duo oratio fuisset gloriatur, in sed timeam ponderum.</p>
                    </div>
                </div>
                <div class="clear"></div>
        </div>
        <div id="footer">
            <h3>Footer Header</h3>
        </div>
    </div>

css:
Code:

* {
    margin: 0;
    padding:0;
    border: 0;
}  

body {
    background-color: gray;
    text-align:center;
}

#container {
    width:  900px;
    background-color:white;
    margin: auto;
}

#content {
}

#top {
    margin: auto;
}

.col {
    margin: auto;
    width: 267px;
    float: left;
    text-align: left;
}

.clear {
    clear: both;
}

#footer {
    clear: both;
}

this obviously doesnt work. and has some serious issues. if not, coded wrong altogether.

im free to any suggestions as far as my div markups and what i should be doing to keep code efficient.

i also am wondering what the keyword 'auto' mean in css. ive searched all around and never found a good exp or example explaining what it is.

again, the css is pretty screwed. i added and deleted so much that i cant even remember what i did and getting a little frustrated in the process.

thanks in advance for the response.

Hi guys,

I have a small problem which is driving me crazy. I have a main container with two containers inside named left and right.

I want a border on the main container, but i do not know the height of the main container as this will depend on the content in 'left' and 'right'. So what should I set the height of the main container to?

I've tried 100% but this does not work and if I omit the geight property the main container does not show up.

Any ideas?

Thanks in advance,

Rob.