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

 

[davetherave2]

well have had a quick go at fixing this and this seems to work in firefox.

css code for the lists

#primary_nav {
	width: 900px;
	background: url(images/primary_nav_bg.jpg) no-repeat;
	height: 30px;
	margin-left: 0px;
	[color=red]padding-left: 100px;[/color]
	line-height: 30px;
	margin-top: 0px;
	margin-bottom: 0px;
	
	}


#secondary_nav ul {

	list-style:square;
	[color=red]margin-left:0px;
	padding-left:140px;[/color]
	}
	
#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;
	[color=red]margin-left:-140px;
        padding-left:10px;
	display: inline-block;[/color]

now there may be a more elegant way of doing the same thing but this was the first thing that seemed to work for me.

 

[HungryHippos]

To be honest I think your floats don't help you much, you seem to have a lot of them. You also have a lot of padding and margins set which further complicates things.

Within the container div all other divs should automatically be 100% of the width so you don't need to specify the width if it's already going to be 900px anyway for example.

You should also consider setting background colours to your divs for layout purposes to ensure everything is going where you want.

Also - test in several browsers along the way if you want to maintain compatability, check everything looks the same in IE and Firefox at least, i've had some problems in the past with the way the browsers handle things differently

 

[nolimit]

do you have an image of the layout?