Margin/column .css problem cross browser

[Blelisa]

Hi everyone,

I am building a site which consists of two columns in CSS and Html. I am checking cross browser capadability with IE7 and Firefox. When I am coding may page then save it then open it with a browser it looks one way, then when I ftp my site up to my hosting server and check it on the web, it looks totally different. What is happening?

Also my margins are off between Firefox and IE any one know of a work around?

Thanks in advance for any help.

PS I you want to see what I am speaking of and my code the path is:
http://www.hemisphere.net/testing/index.html

The code from my .css page is:
body {width: 850px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
font-family: arial, sans-serif;
font-size: small;}

.logo {float: left;
right-padding: 15px;
padding: 15px;}

.link {border: 0;}

#header {background-color: #FFFFFF;
padding: 0px;}

#left {float: left;
width: 100px;
padding: 10px;}

#right {float: right;
width: 200px;
padding: 5px;}

#center {margin-right: 265px;
margin-left; 265px;
padding: 8px;
border-right: #000000;
text-align: center;
background-color: #FFFFFF;}

#footer {clear: both;
text-align: center;}

#footer2 {clear: both;
background-color: #FFFFFF;
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
text-align: center;
padding: 5px;}

#ctext {text-align: center;}

.headingl1 {font-family: arial;
font-color: #FFFFFF;
font-weight: bold;
text-align: center;
background-color: #000099;
border-color: red;
padding: 2px;}


#headpic {width: 844px;
height: 180px;
align: center;}

.greet {font-size: large;
font-weight: bold;
color: red;
text-align: center;}

.greet1 {font-size: large;
font-weight: bold;
color: red;
text-align: left;}

.leftcolumn {float: left;
width: 100px;
margin-left: 0%;
margin-right: 5%;}

.middlecolumn {float: left;
width: 1%;
padding: 1px;}

.middlecolumn2 {float: right;
width: 1%;
padding: 1px;}

.heading1 {font-family: sans-serif;
color: red;
text-decoration: underline;
font-size: 16px;
text-align: left;
font-weight: bold;
margin-top: 12px;}

#lisa {text-indent: 1in;}

#lisa1 {text-indent: .50in;
float:left;}

.firstletter {color: #COCOCO;
font-size: large;
font-weight: bold;}

.pheading {color: navy;
font-size: large;
font-weight:bold;
border-bottom: 1px solid #000066;}

#menu {
float: right;
text-align: center;
}
#menu div {
display: block;
width: 70px;
float: left;
border-left: 1px solid black;
}

#menu a:link, a:visited, a:active {text-decoration: none;
color: #000000;
font-weight: bold;
}

#menu a:hover {color: #ff0000;
}

.bold {font-weight: bold;
font-size: medium;
text-indent: 1in;}

.indent {text-indent: 1in;}

#navcontainer a {color: #000066;
display: block;
padding: 3px;
text-decoration: none;
border-bottom: 1px solid #000066;}

#navcontainer a:visited {text-decoration: none;
font-weight: normal;}

#navcontainer a:hover {background-color: #000066;
color: #ffffff;}

[drhowarddrfine]

Validate your html and css. You are using some non-existent properties in your css along with closing non-open elements in your html.

[Moridin]

Follow the advice given above. Also, try to learn (X)HTML and CSS correctly. You are using <br /> (which is valid XHTML), but still use the font tag which is not. The CSS for links is in the wrong order.

Here are some links to text which might be good for you to read if you feel like it.

Using CSS to change font instead of HTML. (http://www.w3schools.com/html/html_fonts.asp)
CSS Links - The Links We LoVe to HAte (http://www.moridin.moved.in/blog/?p=210)
CSS Validator (http://jigsaw.w3.org/css-validator/)
HTML Validator (http://validator.w3.org/)
Fonts at W3 (http://www.w3.org/TR/REC-CSS2/fonts.html)
Practice correct use of padding syntax (http://www.w3schools.com/css/css_padding.asp)
HTML vs. XHTML (http://www.w3schools.com/xhtml/xhtml_html.asp)
Bye Bye Embed (http://alistapart.com/articles/byebyeembed)

Good Luck :)

- Moridin