CSS Woes

Associate
Joined
13 Nov 2003
Posts
1,567
Location
Manchester
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

Code:
#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
 
Back
Top Bottom