The differences between IE and Firefox (css related)

I'm sure books can be written, but I'm trying to design a site, for people who mostly use IE and Firefox on the PC.

I'm on a mac.

So far it's looking perfect in Safari, nearly perfect in Firefox (mac and PC) and bad in both IEs. Although I don't care about mac's ie cause it's so old.

I'm trying to do a layout similar to Zeldmans (zeldman.com), as opposed to something like the main page here.

Container
Top Header
Bottom Header
Horizontal Nav
Left/Vertical Nav
Content
Right/Vertical Nav
Footer



The Horizontal Nav is just a box, wide enough to span the width of the page, with a margin on the left side. No float.

The leftVertNav is floated left with a left margin of 13.

The Content is floadted left with padding of 30 on the right and left, and a top margin of 5.

I'm thinking that the padding is what's screwing me over in IE.

The right vertNav has no float, and has no padding, and has a left margin of 615, placing it 615 pixels to the right, where it's supposed to be. I did that because Zeldmans right bar is done much the same way. Plus, when I float the rightmost bars, I get into some problems that I can't fix.

Like I said, it looks fine in Firefox, but in IE, the Horizontal nav, vertical navs, and the content are pushed to the right by 30-50 pixels. And my background image (shadow on both sides of page) isn't showing correctly.

[CODE]body {
text-align: center;
margin: 0;
padding: 0;
border: 0;
background: #EDEEF0 url(/holder.gif) top center repeat-y;
color: #663;
font: small/18px "Lucida Grande", "Trebuchet MS", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
}

.container {
width: 742px;
background: transparent url(images/containerBack.gif) repeat-y left top;
margin-right: auto;
margin-left: auto;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
text-align: left;
}
.topHeader {
background-color: #FFFFFF;
height: 35px;
width: 725px;
margin-left: 8px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #990000;
background-image: url(images/topHeader.gif);
background-repeat: no-repeat;
}
.bottomHeader{
height: 150px;
width: 725px;
background-color: #666666;
margin-left: 8px;
margin-top: 0px;
background-image: url(images/contentbackground.gif);
padding: 0px;
margin-right: 0px;
margin-bottom: 0px;

}
.topNav {
height: 25px;
width: 725px;
margin-top: 0px;
margin-left: 8px;
background-color: #FFFFFF;
padding: 0px;
margin-right: 0px;
margin-bottom: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #EDEDED;
}

.topNav ul
{
list-style-type: none;
text-align: left;
margin: 0px;
padding: 3px 5px 0px 10px;
height: 25px;
width: 725px;
}

.topNav li
{
display: inline;
list-style-type: none;
list-style-image: none;
}

.topNav li a
{
text-decoration: none;
color: D5D7DC;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 18px;
font-weight: bold;
padding-top: 0px;
padding-right: 18px;
padding-bottom: 6px;
padding-left: 15px;
margin: 0px;
}

.topNav li a:hover
{
text-decoration: none;
color: #000000;
}

/*leftBar stuff */

.leftBar {
height: 650px;
width: 140px;
margin-top: 5px;
margin-left: 13px;
float: left;
margin-right: 0px;
margin-bottom: 0px;
}
.leftBar a:link, .leftBar a:visited {
color: #333333;
text-decoration: none;
font-size: 13px;
}
.leftBar a:hover {
color: #990000;
text-decoration: none;
}
.leftBar dl {
margin-top: 5px;
padding-top: 0px;
}
.leftBar dl dt {
padding-bottom: 2px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-bottom-style: solid;
border-bottom-color: #990000;
text-transform: uppercase;
color: #FFFFFF;
background-color: #650000;
margin-top: 15px;
padding-top: 2px;
padding-right: 5px;
padding-left: 5px;
letter-spacing: 5px;
font-size: 12px;
}
.leftBar dl dd {
text-align: justify;
padding: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
.leftBar dt, .leftbar dd {
line-height: 17px;
margin-bottom: 4px;
margin-left: 0px;
padding-left: 0px;
}

/* content stuff */

.content {
width: 395px;
float: left;
padding-right: 30px;
padding-left: 30px;
margin-top: 5px;
}

.content a:link {
font-family: "Trebuchet MS", "Gill Sans", "Helvetica Neue", Arial;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
background-color: #650000;
}
.content a:hover {
font-family: "Trebuchet MS", "Gill Sans", "Helvetica Neue", Arial;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
background-color: #990000;
}
.content a:visited {
font-family: "Trebuchet MS", "Gill Sans", "Helvetica Neue", Arial;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
background-color: #650000;
}

/*Right Bar (ads mostly) */

.rightBar {
width: 120px;
margin: 0 0 0 615px;
padding: 0;
border: 0;
height: 650px;
}
.footer {
width: 725px;
margin-left: 8px;
background-color: #999999;
clear: both;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-position: left top;
padding: 0px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #666666;
border-right-color: #666666;
border-bottom-color: #666666;
border-left-color: #666666;
height: 25px;
}
.activePagelink {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
line-height: 18px;
padding-top: 1px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
margin: 0px;
text-decoration: none;
}
.clockContainer {
height: 50px;
width: 140px;
background-color: #FFFFFF;
float: left;
}
h1 {
font-family: "Trebuchet MS", "Gill Sans", "Helvetica Neue", Arial;
font-size: 18px;
font-weight: bold;
color: #000000;
text-decoration: none;
}
img {
margin: 0px;
padding: 4px;
border: 1px solid #CCCCCC;
}
[/CODE]

[code] "http://www.w3.org/TR/html4/strict.dtd">









[/code]