CSS - Funny Prank - Need Help With Css

I don't know why my tables look so weird, in Firefox they look fine as you can see in http://info.mooseheadbeer.com/graphics/table2.jpg - http://info.mooseheadbeer.com/graphics/table1.jpg shows what it looks like in Firefox.

my CSS is as follows:

Code:

body {
	background-color: #FFFFCC;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 24px;
	color: #333333;
}

td, th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 24px;
	color: #330000;
}

a {
	color: #330000;
}

img { 
	border: 0px; 
}

form {
	background-color: #CCCC99;
}

.title {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	line-height: 30px;
  background-color: #990000; color: #FFFF66;
}

.subtitle {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	line-height: 20px;
	font-weight: bold;
  color: #660000; font-style: oblique;
}

.header {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 24px;
	background-color: #990000;
  color: #FFFF66;
}

.nav {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-weight: bold;
	background-color: #CCCC66;
}

.navLink {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	background-color: #DEDECA;
}
a:hover {
	color: #DEDECA;
	background-color: #330000;
}

.sidebar {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	line-height: 18px;
	padding: 3px;
	background-color: #FFFF99;
}

.sidebarHeader {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	line-height: 18px;
	color: #FFFF99;
	background-color: #999933;
 font-weight: bold;
}

.sidebarFooter {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	line-height: 18px;
	background-color: #FFFF99;
 color: #990000;
}

.footer {
  font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-weight: bold;
	line-height: 22px;
	color: #333333;
	background-color: #FFFF99;
}

.legal {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12pt;
	color: #333333;
}

.box1 {
	border-width: 2px;
	border-color: #CCCCCC #333333 #333333 #CCCCCC;
  border-style: dotted;
	}

.promo {
	font-family: "Times New Roman", Times, serif;
	color: #000033;
}

.titlebar {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #FFFFFF;
	background-color: #336699;
}

.dingbat {
	font-family: Georgia, "Times New Roman", Times, serif;
	background-color: #CCCC99;
 color: #660000; font-weight: bolder; font-size: medium;
}

input.big {
	width: 100px;
}

input.small {
	width: 50px;
}

I have delved into building websites using CSs instead of tables. It looks great in IE 7 and above and Firefox, but in IE 6 it is out of whack badly. Like all the divs are on one side, when all the measurements are correct and should fit.

Is there something I am doing wrong, it looks right even when I look at it in Dreamweaver.

Is there a special method you should always apply when building a CSS website, like always add border:none; on all divs, just the same way, that you always have to add border: 0; on all images otherwise a border will appear?

I have two column divs in my main div. They have the same margin setting but the second one mainright seems to be ignoring it... and both have width tags (that's doing something).
(URL address blocked: See forum rules)
and (URL address blocked: See forum rules)
my wrapper has a min-width of 780px
Is it margin doubling?

when i took the border and margin out of the mainleft div, it slammed to the wall of the container div. is there a hack for this? i want my 2 columns to have identical alignment...
Code:

#left {
	float:left;
	width:230px;
	text-align:left;
	font-size: 12px;	border:1px solid red;
}
#left p {/*	margin:10px;*/	padding:0;}	

#main {
	position:relative;margin-right:100px;
	text-align:left;
}
#main h1,h2,h3,h4 {margin:0; padding:0; display:inline;}
#main p {margin:5px; padding-left:5px;}
#mainleft {
	margin:5px;
	float:left;
	width:250px;
	border:1px solid red;
	text-align:left;
}	
#mainright {
	margin:5px;
	padding:5px;
/**/	position:relative;
/* float:right; only made it float right but still below the left */
	text-align:left;
	margin-left:490px;
		width:250px;
	border:1px solid red;
}
/*******  THE HTML  *********/
<div id="left">
	<div class="prop"></div>
<!-- the old createnavbar could go here or a photo -->
	<?php include 'leftcol.php' ?>
	<div class="clear"></div>
</div><!-- left -->
<div id="main">
	<div id="mainleft">
	 <h4>News</h4><br />
  	<p>copy.......</p>
  </div><!-- mainleft -->
  <div id="mainright">
  <h4>Features</h4><br />
  Many are free; Some have value.<p>&nbsp; </p>
  <ul>
  	<li>bunch of stufff</li>
	</ul>
	</div><!-- mainright -->
</div><!-- main -->

I am trying to work on a project from HTML Utopia: Designing without Tables Using CSS. It is from Chapter 9.

It should be a layout with a header and three columns. A footer was added to the bottom and floats were incorporated to the content and sidebars so that nothing interferes with the footer. So, the footer shows up okay, but the positioning of the sidebars is now screwed up.

It would be nice if I could show you an image of what this looks like, but this site won't let me do that because I am a new member. I will try to describe it the best I can. Instead of being a layout with a header and three columns on top with the footer on the bottom, it has the header and middle content div on top and the two sidebars are both on the bottom with lots of space above them. The footer is on the bottom as it should be.


Here is the code (this is not the whole code--this is the code I think would effect the layout):

body {
margin: 0;
padding: 0;
background-color: #050845;
color: white;
background-image: url(web_site_files/02_creating_the_layout/img/bg.jpg);
background-repeat: repeat-x;
font: small Arial, Helvetica, sans-serif;
}
#wrapper {
background-color: #fdf8f2;
color: black;
margin: 30px 40px 30px 40px;
padding: 10px;
}
#sidebar2 {
float: left;
width: 159px;
border-top: 1px solid #b9d2e3;
border-left: 1px solid #b9d2e3;
border-bottom: 1px solid #b9d2e3;
background-color: white;
color: black;
margin: 0;
padding: 0;
top: 1px;
}
#main {
width: 100%;
margin-top: 10px;
}
#sidebar {
float: right;
width: 220px;
background-color: #256290;
margin: 0;
padding: 0;
color: white;
}

Does anything look weird with the code above? If all of that looks right, then I can look and see if it is something else. I am seriously confuzzeled. I appreciate the help--I am trying to learn this on my own. (:

So this site is having a bit of trouble in WinIE 6.0. If you resize the window after you load the page, the dark brown area behind the content sort of gets stuck on the right.

I'm wondering if it might have something to do with the javascript I had to do to get IE to recognize fixed backgrounds.

Any ideas?

Site: http://dev.sabotagemedia.com/firstclass/
CSS: http://dev.sabotagemedia.com/firstclass/_css/style.css