CSS Not Working Properly On Safari Browser

Been having trouble with my webpage not showing properly on an Mac version Safari browser. Looks fine on IE 7, Firefox and even the Windows version of Safari. Originally this was a liquid layout and after some modifications I changed it to static. There is got to be something I am missing. I appreciate any suggestions.
Sorry for not editing the CSS for posting. Being a noob I am not sure what to edit out.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

body
{
margin: 0px;
padding: 0;
background: #EEF1E2 url('../background/back.bmp');
color: #000;
font-family: arial, verdana, tahoma, times new roman;
font-size: 80%;
}

a
{
text-decoration: none;
color: #FFF;
}

a:hover
{
text-decoration: none;
color: #6D7E34;
}

img
{
border: 0px none;
}

#container
{
margin: 0 auto;
width: 855px; // change
}

#image
{
width: auto;
height: 150px;
background: #D9E2BA url('../images/image-back.png') repeat-x;
}

#image h1
{
margin: 0;
padding: 40px 20px 0 0;
color: #FFF;
text-align: left;
letter-spacing: -4px;
font-size: 350%;
font-weight: normal;
}

#image h2
{
margin: -8px 0 0 0;
padding: 0px 17px 0 0;
color: #EAEFDA;
text-align: left;
letter-spacing: 1px;
font-size: 175%;
font-weight: normal;
}

#header
{
width: 855px;
height: 50px;
background: #CAD79F;
border-top: 1px solid #FFF;
}

#menu
{
float: left;
width: 855px;
height: 50px;
letter-spacing: -1px;
font-weight: bold;
font-size: 125%;
color: #FFF;
}

#menu ul
{
margin: 15px 0 0 0;
padding: 0 20px 0 0;
}

#menu li
{
display: inline;
padding: 0 0 0 15px;
}

#menu .active
{
text-decoration: none;
color: #6D7E34;
}

#content
{
width: 825px;
height: auto;
background: #FFF;
padding: 15px;
line-height: 160%;
}

#content h2
{
padding: 0 0 5px 0;
margin: 0 0 10px 0;
font-size: 140%;
letter-spacing: -1px;
font-weight: normal;
color: #6C7D33;
border-bottom: 1px solid #D3DEAD;
}

#content p
{
margin: 0 0 15px 0;
padding: 0;
}

#content img
{
float: right;
border: 1px solid #CCC;
padding: 5px;
margin: 0 0 0 15px;
}

#footer
{
width: 855px;
height: 100px;
background: #DDE3C4;
border-top: 3px solid #EEF1E2;
color: #B6C879;
}

#footerleft
{
float: left;
width: auto; // change this percentage to fit any text in either footer div - the below will auto change (width: auto)
text-align: left;
padding: 1% 2%;
}

#footerleft a
{
text-decoration: none;
color: #6C7D33;
margin: 0 5px;
}

#footerleft #nomarginleft
{
margin: 0 10px 0 0;
letter-spacing: -1px;
}

#footerright
{
float: right;
width: auto;
text-align: right;
padding: 1% 2%;
}

#footer p
{
margin: 0;
padding: 0;
letter-spacing: -1px;
color: #B6C879;
}

#footer a
{
text-decoration: none;
color: #6C7D33;
}

#footer a:hover
{
text-decoration: underline;
color: #6C7D33;
}

CSS Not Working Properly On Safari Browser

Cant figure this out

Stratton99

Marshall

Stratton99

Marshall

swa66

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week