Hey guys, if you go to www.sevendownload.com/ok/
you will see if you are on windows firefox or internet explorer everything seems to be ok but on the mac firefox and safari the layers are not in the right place. Its frustrating trying to get it right and i dont wanna use tables. Heres my css:

.wrapper {
position: relative;
width: 959px;
margin: 0 auto;
text-align:left;
}

.wrappercontent {
position: relative;
width: 959px;
height:auto;
margin: 0 auto;
text-align:left;
}

.top {
background-image:url(images/top.gif);
background-repeat: no-repeat;
background-position: 50% 0%;
}

.topcenter {
width: 959px;
height: 186px;
}

div.topbox {
width: 450px;
padding-left: 480px;
padding-top: 49px;
padding-right: 30px;
}

.input {
background-color: #cccccc;
border: 1px solid #666666;
}

input.send-btn {
width: 70px;
height: 25px;
background: url(images/login.gif) no-repeat;
outline: none;
border: 0px;
}

input.signup-btn {
width: 70px;
height: 25px;
background: url(images/signup.gif) no-repeat;
outline: none;
border: 0px;
}

div.menubox {
width: 181px;
position: relative;
float: left;
}

.teaser {
width:181px;
padding:0 0 18px 0;
background:url("images/menu3.gif") bottom left no-repeat;
}
.teaser h3 {
margin:0;
padding: 18px 10px 0px 10px;
background:url("images/menu1.gif") top left no-repeat;
}
.teaser p, .teaser a.more {
margin:0;
padding:0 10px 0px;
background:url("images/menumiddle.gif") top left repeat;
border-width:0 1px;
}
.teaser a.more {
display:block;
text-align:right;
padding:0 0px 0 0;
}
.teaser a.more:hover {
text-decoration:underline;
}

div.contentbox {
width: 776px;
position: relative;
float: left;
}

.content {
width:776px;
padding:0 0 18px 0;
background:url("images/maincontent3.gif") bottom left no-repeat;
}
.content h3 {
margin:0;
padding:7px 10px 3px 25px;
background:url("images/maincontent1.gif") top left no-repeat;
}
.content p, .teaser a.more {
margin:0;
padding:0 7px 3px;
background:url("images/contentmiddle.gif") top repeat;
border-width:0 1px;
}
.content a.more {
display:block;
text-align:right;
padding:0 24px 0 0;
}
.content a.more:hover {
text-decoration:underline;
}
/*- Menu--------------------------- */

#menu4 {
width: 163px;
margin: 0px 8px 0px 6px;
}

#menu4 li a {
height: 32px;
font-family: Century Gothic;
voice-family: "\"}\"";
voice-family: Century Gothic;
height: 24px;
text-decoration: none;
}

#menu4 li a:link, #menu4 li a:visited {
color: #CCC;
display: block;
background: url(images/menu4.gif);
padding: 8px 0 0 60px;
}

#menu4 li a:hover {
color: #FFF;
background: url(images/menu4.gif) 0 -32px;
padding: 8px 0 0 60px;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

img {
border: none;
}

/*/menu on top/*/

#container
{
width: 400px;
padding: 30px;
}

#tabnav
{
height: 40px;
margin: 0;
padding-left: 10px;
}

#tabnav li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#tabnav a:link, #tabnav a:visited
{
float: left;
font-family: Century Gothic;
background: #444243;
font-size: 16px;
line-height: 35px;
padding: 3px 20px 2px 20px;
margin-right: 4px;
border: 1px solid #505050;
border-bottom: #666666;
text-decoration: none;
color: #fff;
}

#tabnav a:link.active, #tabnav a:visited.active
{
border-bottom: 1px solid #505050;
background: #393939;
color: #000;
}

#tabnav a:hover
{
background: #393939;
filter:alpha(opacity=50);
opacity: 0.8;
-moz-opacity:0.8;
}

Anything i can do to keep this layout right? Thanx