Hello i am new to the forum and can't wait to read other posts. I have an issue with a template im designing for my website. The plain text navigation is exactly 7px from the header and the content underneath in FireFox but it changes differently in IE Safari and Google chrome.

I would like it to be the same as it is in Firefox for all browsers.

Thanks allot for any help, here is my css code. Page is in my sig

#shoplinks {
    width: 200px;
    height: 21px;
    color: #8595a2;
    font-size: 10px;
    font-family: tahoma;
}

#container {
    width: 920px;
}
#header {
    height: 170px;
    width: 920px;
    background-image: url(images/big_palm.jpg);
}

#topnav
{
    position: relative;
    font-weight: bold;
    top: -5px;
    background-color: #FFFFFF;
}

#content {
    width: 556px;
    padding-top: 12px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    margin-right: 140px;
    margin-left: 203px;
}
#leftnav {
    float: left;
    width: 182px;
    height: 1480px;
    background-image: url(images/leftnavbar.jpg);
    padding: 10px;
}

#leftnav ul
{
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

#leftnav a
{
    display: block;
    width: 170px;
    padding-top: 3px;
    padding-right: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    border-bottom-width: 1px;
}

#leftnav a:link, .navlist a:visited
{
color: #ffffff;
text-decoration: underline;
font-weight: bold;
}

#leftnav a:visited
{
   color: #ffffff;
   text-decoration: underline;
   font-weight: bold;
}

#leftnav a:hover
{
    text-decoration: none;
    color: #0000ff;
}

#sidebar {
    padding: 10px;
    float: right;
    width: 120px;
    background-image: url(images/rightnav2.jpg);
    height: 1480px;
}

#footer {
    background-color: #bfcad0;
    padding: 10px;
    clear: both;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    position: relative;
    top: 5px;
}


h1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: #1A2373;
    line-height: 24px;
}
h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: bold;
    color: #2F77F1;
    line-height: 20px;
}
h3 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bolder;
    color: #000000;
    line-height: 20px;
}

p {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    line-height: 11pt;
    margin-top: 3px;
    margin-right: 0;
    margin-bottom: 3px;
    margin-left: 0;
    padding-bottom: 9px;
}

a {
    color: #8C9FB0;
    font-weight: bold;
    text-decoration: none;
}
a:visited {
    color: #8C9FB0;
    text-decoration: none;
    font-weight : bold;
}
a:hover {
    color: #E82525;
    text-decoration: none;
}

.smalltext {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    padding: 3px 0;
    margin: 3px 0;
    line-height: 12pt
}
#container #header #header {
    font-family: Verdana, Geneva, sans-serif;
}
#container #topnav a {
    height: 21px;
    width: 920;
    font-size: 10px;
    text-decoration: bold;
    padding: 0px 0px 5px 0px;

}
#shoplinks p a {
    font-size: 10px;
}
#container #topnav a {
    font-weight: bold;
}

.resize
{
    font-size: 10px;
    top: -1px;
    color: #E82525;
    font-weight: bold;
    font-family: Verdana, Geneva, sans-serif;
    
}

Use a floated list instead of the bunch of divs and spans, and use a right border on the <li>s instead of all that extra code just to place a pipe symbol. Or you could float the <a>s instead and set a width and border on them.

fix the width/doubled margin issue with the centre content, it suffers from "float:drop"