please review my website...I can't figure out the display issues

[Jago6060]

http://www.caironewyorkrotary.org

 

It does have some issues displaying entirely accurate on FF or Safari.  I would greatly appreciate anyone who could help me with it.  the most noticable things are the lack of the 1px right-margin on the very top bar, and the misplacement of the word "Home" on the first nav button.

 

here is my external style sheet

html            {
                margin: 0px;
                padding: 0px;
                }
body		{
	padding: 0px;
                margin: 0px;
	background-image: url(crc_bg.png);
	background-attachment: fixed;
	background-position: top center;
	background-repeat: repeat-x;
	scrollbar-highlight-color: #FFFF99;
	scrollbar-shadow-color: #FFFF99;
	scrollbar-track-color: #FFFF99;
	scrollbar-face-color: #000060;
	scrollbar-arrow-color: #FFFF99;
	}
#topbar	{
	background: #000060;
                color: #FFFF99;
	width: inherit;
                margin: 1px;
	position: relative;
	}
#console	{
	background: #FFFF99;
                width: 750px;
	position: absolute;
                top: 4px;
                left: 260px;
	font-family: "Lucida Handwriting";
	height: inherit;
                margin-bottom: 4px;
	}
#button 	{
                background: #000060;
	font-size: small;
	font-family: "Tahoma";
	width: 212px;
	height: 24px;
	padding-top: 12px;
	padding-left: 10px;
                padding-bottom: 8px;
	margin-left: 1px;
                margin-top: 1px;
                margin-bottom: 1px;
	}
#leftbar	{
	background: #000060;
	position: relative;
	font-size: x-small;
	font-family: "Tahoma";
	color: #FFFF99;
	width: 212px;
	height: inherit;
	margin: 1px;
                padding-left: 5px;
                padding-top: 3px;
                padding-right: 5px;
	}
#logo		{
	background: #FFFF99;
                color: #000060;
	position: relative;
	height: 80px;
	width: inherit;
                padding-bottom: 3px;
	font-family: "Times New Roman";
	}
#bottombar	{
	background: #000060;
	font-family: "Tahoma";
	font-size: x-small;
	color: #FFFF99;
	height: 12px;
	margin: 1px;
                padding-bottom: 3px;
	width: inherit;
	position: relative;
	}
#text		{
	font-family: "Tahoma";
	font-size: small;
                overflow: scroll;
	background: #FFFF99;
	color: #000060;
	width: 524px;
	height: 653px;
	float: right;
	position: absolute;
                left: 225px;
                top: 306px;
	}
#slideshow	{
	background: #FFFF99;
	margin: 1px;
	float: right;
	position: relative;
	width: 524px;
	}
p		{
         	text-indent: .50in;
	}
#trans		{
	height: 300px;
	width: 300px;
	float: right;
	position: fixed;
	filter:alpha(opacity=10);
	}
#motto		{
	height: 393px;
	width: 45px;
	position: absolute;
	left: 224px;
	top: 125px;
	}
#banner		{
	width: 195px;
	height: 94px;
                position: relative;
                left: 6px;
	background-color: #000060;
	background-image: url(banner.png);
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	color: #FFFF99;
	font-family: "Tahoma";
	font-size: small;
	margin: 1px;
	}

a.one:link	{color: #FFFF99; text-decoration: none;}
a.one:visited	{color: #FFFF99; text-decoration: none;}
a.one:hover	{color: #000060; text-decoration: none;}
a.one:active	{color: #FFFF99; text-decoration: none;}

a.two:link	{color: #FFFF99; text-decoration: none; font-size: small;}
a.two:visited	{color: #FFFF99; text-decoration: none; font-size: small;}
a.two:hover	{color: #FFFF99; text-decoration: none; font-size: small;}
a.two:active	{color: #FFFF99; text-decoration: none; font-size: small;}

a.three:link	{color: #000060; text-decoration: none;}
a.three:visited	{color: #000060; text-decoration: none;}
a.three:hover	{color: #000060; text-decoration: none;}
a.three:active	{color: #000060; text-decoration: none;}

a.banner:link	{color: #FFFF99; text-decoration: none;}
a.banner:visited{color: #FFFF99; text-decoration: none;}
a.banner:hover	{color: #FFFF99; text-decoration: none;}
a.banner:active	{color: #FFFF99; text-decoration: none;}

[syclonefx]

You will need 2 css file the first for FF and Safari and the second for IE 6 and above.

 

ref.css is for Internet Explorer.

ffref.css is for Firefox and Safari.

 

place this in your header.

 

<link rel="stylesheet" type="text/css" href="ffref.css" />

<!--[if gt IE 5.5000]>

<link rel="stylesheet" type="text/css" href="ref.css" />

<![endif]-->

 

 

Now to fix the logo.

 

#logo {

background: #FFFF99;

color: #000060;

position: relative;

height: 80px;

width: inherit;

font-family: "Times New Roman";

margin-bottom: 40px;

}

 

In the css for Firefox and Safari change the #logo section the margin-bottom  has to be 40px.