CSS layout and different browsers

[Brand]

This is the layout you guys have already helped me so much with so far. Today I looked at in Safari and then on IE & Firefox for the PC and all three looked different from each other and what it should look like (which it looks fine in Firefox for the Mac).

Here is what is should look like (FF MAC)
http://home.comcast.net/%7Ebrandchan/ub_ff_mac.png

Here is how it look in Fire Fox on the PC
http://home.comcast.net/%7Ebrandchan/ub_ff.JPG

Here is how it look in IE 6 for the PC

http://home.comcast.net/%7Ebrandchan/ub_ie.jpg

And here is how it looks in Safari for the mac
http://home.comcast.net/%7Ebrandchan/ub_safari.png

I'm honestly clueless on how to fix all the different problems since it's different on every browser I looked at.

Here is the relevant CSS code:

body {
background-color: #EBF3E3;
margin-top: 0px;
margin-left: 0px;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.bold {
font-weight: bold;
}
.topimage {
background-image: url(images/top_heads.jpg);
background-repeat: repeat-x;
height: 83px;
}
.toplogo {
position: absolute;
z-index: 2;
top: 5px;
left: 10px;
width: 101px;
height: 62px;

}
.toptitle {
position: absolute;
z-index: 3;
width: 520px;
height: 53px;
float: left;
top: 5px;
left: 225px;
}
.containerone {
top: 80px;
z-index: 1;
}
.date {
position:relative;
left: 5px;
font-family: Minion, Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
/*----------------- input button -----------------*/
input.button {
color:#333333;
font-size:small;
font-family: Arial, Helvetica, sans-serif;
background-color:#CCCCCC;
border:1px solid;
border-top-color:#333333;
border-left-color:#333333;
border-right-color:#333333;
border-bottom-color:#333333;
}
/*----------------- nav -----------------*/
.navholder {
position:relative;
font-family: Minion, Georgia, "Times New Roman", Times, serif;
font-size: 12pt;
color: #000000;
top: 10px;
left: 5px;
width: 92px;
z-index: 1;
}
#nav {
font-family: Minion, Georgia, "Times New Roman", Times, serif;
font-size: 12pt;
color: #000000;
background-color: #EBF3E3;
width: 92px;
margin: 0;
}

#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
}

#nav ul li {
display: block;
padding: 1px 1px;
}

#nav ul li a:link, #nav ul li a:visited {
background-color: #cccccc;
display: block;
color: #000;
text-decoration: none;
padding: 2px;
}

#nav ul li a:hover, #nav ul li a:active {
background-color: #333;
color: #fff;
}
/*----------------- bottom nav -----------------*/
.statement {
position:relative;
font-family: Minion, Georgia, "Times New Roman", Times, serif;
font-size: 16pt;
font-weight: bold;
color: #FFFFFF;
background-color: #14637A;
padding: 1px;
height: 44px;
width: 92px;
top: 20px;
z-index: 1;
}
.langchoice {
position:relative;
font-family: Minion, Georgia, "Times New Roman", Times, serif;
font-size: 12pt;
color: #000000;
background-color: #CCCCCC;
padding: 1px;
height: 45px;
width: 92px;
top: 40px;
z-index: 1;
}
.emailclub {
position:relative;
font-family: Minion, Georgia, "Times New Roman", Times, serif;
font-size: 10pt;
color: #000000;
background-color: #CCCCCC;
padding: 1px;
height: 75px;
width: 92px;
top: 45px;
z-index: 1;
}
.donate {
position:relative;
font-family: Minion, Georgia, "Times New Roman", Times, serif;
font-size: 12pt;
color: #000000;
background-color: #CCCCCC;
padding: 1px;
height: 65px;
width: 92px;
top: 50px;
z-index: 1;
}
.search {
position:relative;
font-family: Minion, Georgia, "Times New Roman", Times, serif;
font-size: 10pt;
color: #000000;
background-color: #CCCCCC;
padding: 1px;
height: 120px;
width: 92px;
top: 55px;
z-index: 1;
}
And here is the html code:

<div id="container_one" class="containerone">
<div id="dateholder" class="date">February 3rd, 2007</div>
<div id="nav_holder" class="navholder">
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Bolivia</a></li>
<li><a href="#">Analysis</a></li>
<li><a href="#">America</a></li>
<li><a href="#">World Wide</a></li>
<li><a href="#">Documents</a></li>
<li><a href="#">Stuff</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

<div id="opeing_statement" class="statement">Opening<br />Statment</div>

<form action="" method="get">
<div id="choice" class="langchoice">
<input name="radiobutton" type="radio" value="radiobutton" />
English<br />
<input name="radiobutton" type="radio" value="radiobutton" />
Espa&ntilde;ol</div>
</form>

<div align="center">
<div id="email_club" class="emailclub">
Mailing List<br />
<form name="form1" id="form1" method="post" action="">
<input name="emailclub" type="text" id="emailclub" size="10" />
<br />
<input type="submit" name="Submit" class="button" value="Join" />
</form>
unsubscribe
</div>
</div>

<div align="center">
<div id="don" class="donate">Donate Now!<br />
<img src="../images/paypal%20donate.png" width="63" height="32" />
</div>
</div>

<div align="center">
<div id="searchbox" class="search">Search<br />
<form name="form1" id="form1" method="post" action="">
<input name="search" type="text" id="search" size="10" />
<br />
<div align="left">
<input name="radiobutton" type="radio" value="radiobutton" />
General<br />
<input name="radiobutton" type="radio" value="radiobutton" />
Author<br />
<input name="radiobutton" type="radio" value="radiobutton" />
Location<br />
</div>
<input type="submit" name="Submit" class="button" value="search" />
</form>
</div>
</div>
</div>
</div>


Any help or ideas would greatly be appreciated.

[Buzz]

CSS will always appear different in different browsers.

Generally, I find a happy medium between FireFox and Safari because those two browsers are the hardest to code CSS specifically for. Safari will not allow CSS styling of form elements such as buttons. That's why you've got a different appearance in Safari. You can use images for form buttons, but you can't style them. Only positioning properties will work for form elements in Safari.

For IE you need to filter the CSS specifically for IE, especially IE6. This means you'll have a special style sheet that on IE6 will see, allowing you to code CSS specifically for that browser. If you do a Google search for "Filtering CSS for IE" you'll find several articles describing different methods for doing this.

You should also be aware that IE7 is going to make the CSS appear different than every other browser as well. IE7 is generally much more on target than IE6 is. IE6 had a broken box model that causes many, many CSS issues. The box model was fixed for IE7, but things still are exactly the same when comparing other browsers.

Overall, using px or em to specify type sizes rather than pt will help a great deal for most of the issues. Points are a nebulous measurement to browsers, they each read 1 point differently, using pixels will help because 1 pixel is 1 pixel. Using ems can help sometimes but may also present some interesting issues because IE will read an em as being larger than other browsers.

[Brand]

Thank you for clearing that up. I'll have to take a look at in in IE7 but we don't have a computer that runs IE7 in the office, so I'll have to wait until tonight.

I understand px, but what is an em? And about how big is it as a unit of measurement?

[Buzz]

em is a traditional type measurement used since the dawn on hot type and printing. An em refers to the size of the uppercase M. So by setting ems you set it in reference to the size of an M in a particular fonts. For web design ems can be terribly confusing. Generally browsers see ems as larger than other measurements.

For type, I really stick to px most of the time just to keep things easier and clear.