need help with basic css page layout

[satyanaas]

[FONT=century gothic]I'm trying to impletment CSS to throw together a fairly simple site. However, the layout of the page varies considerably on different browers as well as macs and PCs. In particular, when the brower text size is changed (larger and smaller) my columns are distorted. I don't think I'm using very obscure CSS selectors but obviously I'm doing something wrong. My style sheet is linked so I've copied it below. I'd apprechiate if someone could give the site a quick look:
http://www.primax.com/ori ]

Thanks.

__________________


body
{ color: #000000; text-align: left; margin: 0px }

#content
{ font-size: 11px;
line-height: 20px;
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #FFFFFF;
text-align: left;
margin-right: auto;
margin-left: auto;
width: 700px;
height: auto }

#header
{
background-color: #49370E;
text-align: center;
width: 100%;
height: 21px;
}

#logoArea
{
background-color: #FFFFFF;
text-align: left;
padding-top: 10px;
padding-bottom: 0px;
width: 700px;
height: 113px;
border-bottom: 1px solid #C0A05D;
}


.col1
{
font-size: 7pt;
line-height: 11px;
text-align: left;
color: #999999;
background-color: #FFFFFF;
float: left;
width: 299px;
height: auto;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
}

.col2
{
font-family: times, serif;
font-size: 10pt;
line-height: 14px;
padding: 1px 10px 3px 15px;
background-color: rgb(255, 255, 255);
float: left;
height: auto;
width: 400px;
padding-bottom: 10px;
}


.rolloverbar
{
color: #999999;
background-color: #C0A05D;
width: 280px;
height: 40px;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
}

#footer
{
color: #49370E;
font-size: 10pt;
font-family: times, serif;
background-color: #FFFFFF;
border-top: 1px solid #C0A05D;
text-align: center;
clear: left;
margin-top: 10px;
padding-top: 4px;
padding-bottom: 4px;
width: 700px;
height: 50px;
}

a:link
{
color: #49370E;
background-color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}

a:hover
{
color: #C0A05D;
background-color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}

a:visited
{
color: #999999;
background-color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}

h3
{
font-weight: bold;
font-style: italic;
font-size: 11pt;
color: #C0A05D;
background-color: #FFFFFF;
}

.tiny
{
font-size: 7pt;
font-family: arial, sans-serif;
color: #000000;
}

[worksdev]

I just viewed it in Netscape and IE 6 on Windows XP. It did not appear to change much between browsers, and the columns looked fine.

I am not a CSS expert, but I have had a simular problem:

I would try setting an excact font size also in the body tag's CSS defintion. I ran into something simular in the past. Even though all my font sizes were defined in the different classes, the space on the page's body changed by what Font Size Selection was chosen in the browser.

Also make sure that you clear your cache when making changes and viewing them again. Some broswers aren't the best at clearing a style sheet.

best regards,
worksdev