It only looks right in IE!

This is the first CSS layout I've made, and I'm having a problem positioning things correctly. Can somebody take a look at my site www.thefrankinpress.com (http://www.thefrankinpress.com) and see what i'm doing wrong? Here's my stylesheet:

Body {
margin:15px 0px 15px 0px;
text-align: center;
background: url(background.gif);
}

h1 {
font-family : Comic Sans MS;
text-transform : uppercase;
font-style : italic;
letter-spacing : 0.4em;
}
h2 {
font-family : Comic Sans MS;
font-weight: Normal;
font-size: 16px;
}

p {
margin:10px 10px 10px 10px;
font-family: Helvetica;
font-Weight: 100;
}

a {
color:#587FBC;
text-decoration:none;
font-size: 16px;
font-weight:600;
font-family: Comic Sans MS, sans-serif;
}
a:link {color:#587FBC;}
a:visited {color:#587FBC;}
a:hover {color:#69B5D4;}

a:link img {border: 1px solid #000;}
a:visited img {border: 1px solid #000;}
a:active img {border: 1px solid #000;}

Li {list-style: circle;}

.main {
margin: 0px auto;
float: middle;
width:730px;
text-align: left;
background: #ffffff;
border-top: 1px solid #000;
border-Left: 1px solid #000;
border-Right: 1px solid #000;
}

.top {
float: top;
border-bottom: 1px solid #000;
height: 100px;
background: url(topbg.jpg);
background-color: #d1edf3;
}

.Footer {
Text-Align: Right;
width: 730px;
padding: 3px 5px 3px 0px;
border: 1px solid #000;
background: #e8ecec;
font-size:11px;
text-decoration:none;
font-weight:500;
Color: #f7f6e3;
font-family:verdana, arial, helvetica, sans-serif;
}

.hmenu {
padding: 3px 0px 3px 0px;
float: left;
width: 33%;
border-bottom: 1px solid #000;
background: #e8ecec;
}

.hmenu a {
color:#587FBC;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;
}

.hmid {
padding: 3px 0px 3px 0px;
float: left;
width: 34%;
border: 1px solid #000;
border-top: 0px;
background: #e8ecec;
}

.hmid a {
color:#587FBC;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;
}

.vmenu {
Margin: 10px 7px 7px 0px;
padding: 3px 3px 3px 3px;
float: Left;
border: 1px solid #000;
border-left: 0px;
background: #e8ecec;
}

.vmenu a {
color:#587FBC;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;
}

The code for my horizontal menu is pretty disgusting, but I couldn't figure out how to do it... so for some reason the middle link is separate from the other two. There's gotta be a better way to do this...

Also, I have no idea why the footer at the very bottom isnt centering??

And my bullets don't look right either! gah!! Any help?

Valid HTML is the first step in debugging CSS

Change the copyright symbol to "©" first of all!

It helps if you provide a link to the resource:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.thefrankinpress.com%2F&charset=utf-8+%28Unicode%2C+worldwide%29&ss=1&verbose=1

Fixing the copyright symbol problem will allow the validation to proceed at which time you'll find that you are missing things like the <ul> </ul> tags which should be around one of your menu lists and other problems in the html.

Once those problems are fixed then you've got a solid basis for fixing the problems with the CSS, until then though you can't count on anything because you can't be sure how the browser is handling the html problems and different browsers will handle those problems in different ways making it impossible to get the CSS to work right across those browsers.

Cool!

Oh yeah, I don't think anybody has said this yet:
Welcome to CodingForums.com!

Hmm... I changed the copyright symbol to "&copy;" and it's still saying

Sorry, I am unable to validate this document because on line 120 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.

I get validation errors (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.thefrankinpress.com%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&verbose=1).

I see you've got it looking pretty much the same now in Firefox as in IE and that you've eliminated all those html errors. So, did you have to change the CSS any or did it all work once the html was good?

Yea, I found out it was my "-" doing it so i replaced it with "&ndash;", was on my way back to here and my connection died.

Alright, it tentatively validates in HTML 4.0 and validates in CSS now. Rock on, thanks alot for the help and also for the welcome :D

I had to make some changes to the CSS. My original horizontal menu was pretty retarded, so I just looked up a tutorial on it and went with that.

you need a content type tag in your html

add this to your html above your stylesheet reference:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

then try and re validate it
-Jamie