Horizontal CSS Navigation - width sizes?

[SteveB_NI]

I'm trying to set up a horizontal navigation menu using CSS - I have got a specified background image I want to use (124px wide) but I can't find a way of specifying how wide I want each tab to be.

Code is as follows:

#navlist {
	margin:0;
	padding-top: 4px;
	width: 100%;
	}
	

#navlist li {

	list-style-type: none;
	display: inline;
	margin: 2px 2px 0 2px;
	width: 100px;
	
	}
	
#navlist a, #navlist a:visited {
	border-top: 2px solid #015697;
	border-left: 2px solid #015697;
	border-right: 2px solid #015697;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	background-image: url(images/tab_bg01.jpg);
	width: 100px;
	color: #015697;
	padding: 0.25em;
}

As you can see I've put in width: 100px but this is not working at present.

Thanks

 

[Sic]

instead of display: inline on your li, float them left, then overflow: hidden on your ul, then you can define a width.

 

[SteveB_NI]

Thanks - tried that and yeah I can adjust the width but the background image (or even colour when I set it to a plain colour) is only the size of the actual text length, not the whole width of the list item if you understand what I mean.

New code:

#navlist {
	margin:0;
	padding-top: 4px;
	width: 100%;
	overflow: hidden;
	}
	

#navlist li {

	list-style-type: none;
	float: left;
	margin: 2px 2px 0 2px;
	width: 124px;
	
	}
	

	
#navlist a, #navlist a:visited {
	border-top: 2px solid #015697;
	border-left: 2px solid #015697;
	border-right: 2px solid #015697;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	background-color: red;
	background-image: url(images/tab_bg01.jpg);
	color: #015697;
	padding: 0.25em;
}

 

[Sic]

that's because you're putting the background image on the a tag, not the li - change your a to display: block or put the background image on the li.