CSS Woes

[fluiduk]

Hi Guys

Working on a site for a mate and having some major issues with CSS and UL/LI's.

I have 2 <ul>'s on the page, and for some reason they are inheriting styles from each other. For example the top nav is taking the width of the left hand nav.

Here is the CSS

#primary_nav {
	width: 900px;
	background: url(images/primary_nav_bg.jpg) no-repeat;
	height: 30px;
	margin-left: 0px;
	padding-left: 145px;
	line-height: 30px;
	margin-top: 0px;
	margin-bottom: 0px;
	}
	
#primary_nav ul {
	list-style: none;
	margin-top: 0px;
	margin-bottom: 0px;
	}
#primary_nav li a:link,a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: .75em;
	font-weight: bold;
	margin-top: 0px;
	color: #ffffff;
	display: block;
	float: left;
	text-decoration: none;
	height: 30px;
	border-left-color: #FFFFFF;
	border-left-style: solid;
	border-left-width: 1px;
	width: 125px;
	text-align: center;

	}
#primary_nav li a:hover {
	color: #e993c7;
	}

#secondary_nav {
	width: 145px;
	background: url(images/secondary_nav_bg.jpg) repeat-x;
	background-color: #c4388f;
	margin-top: 5px;
	min-height: 500px;
	float:left;
	}

#secondary_nav ul {
	list-style:square;
	margin: 0;
	padding: 0;
	}
	
#secondary_nav li a:link,a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: .75em;
	font-weight: bold;
	margin-top: 0px;
	color: #ffffff;	
	text-decoration: none;
	height: 30px;
	border-bottom-color: #FFFFFF;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	width: 145px;
	text-align: left;
	display: block;
	float: left;

	}
#secondary_nav li a:hover {
	color: #e993c7;
	}

The page is at http://dev.damngood.co.uk/template.html

I have tried it in various browsers, all of which are broken in some way. It is very very broken in safari.

Any help would be greatly appreciated as I am stumped

Thanks
Aaron