Horizontal Menu elements fit 100% width evenly possible?

HTML & CSS
1

I’m playing around with testing this as a client asked if this was possible and to be honest I wasn’t sure so I created a test file to start playing around with it. Basically it’s 8 menu items with a hover rollover on the a element. Each a element has some padding applied so when you rollover it you see the highlight. The issue is, I can’t get the elements to fit evenly across the parent container.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Menu Sample</title>
		<style type="text/css">
		
		body {
			margin:0;
			padding:0;
			text-align: center;
			background-color: #ccc;
		}
		
		#content {
			text-align: left;
			margin: 0 auto;
			background-color: #fff;
			width: 920px;
			height: 22px;
		}
		
		ul	{
			margin: 0;
			padding: 0;
			list-style-type: none;
		}
		
		ul li {
			display: inline;
			float: left;
		}
		
		ul li a {
			padding: 5px 32px;
			color: #fff;
			text-decoration: none;
			background-color: #999;
		}
		
		ul li a:hover {
			background-color: #000;
			color: 000;
		}
		
		</style>
	</head>
	<body>
	<div id="content">
	<ul>
		<li><a href="#">Menu 1</a></li>
		<li><a href="#">Menu 2</a></li>
		<li><a href="#">Menu 3</a></li>
		<li><a href="#">Menu 4</a></li>
		<li><a href="#">Menu 5</a></li>
		<li><a href="#">Menu 6</a></li>
		<li><a href="#">Menu 7</a></li>
		<li><a href="#">Menu 8</a></li>
	</ul>
	
	</div>
	</body>
</html>

Doesn’t seem to matter what number I add into the padding for the a element, it never quite fits 100%. On top of that, when it does almost fit in Firefox, it’s different in Safari. I’ve tried some reset css rules but that hasn’t made any difference.

So is it possible to have a menu like this fit 100% of it’s width with the a elements padding being the same?

2

here you go:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- mad your doctype 4.01 strict.. you really should use this doctype-->
<html>
	<head>
		<title>Menu Sample</title>
		<style type="text/css">
		
		body {
			margin:0;
			padding:0;
			text-align: center;
			background-color: #ccc;
		}
		
		#content {
			text-align: left;
			margin: 0 auto;
			background-color: #fff;
			width: 920px;
			height: 22px;
		}
		
		ul	{
			margin: 0;
			padding: 0;
			list-style-type: none;
		}
		
		ul li {
			/* display: inline; floating automatically gives the element 'display:block'*/
			float: left; width:12.5%;
		}
		
		ul li a {
			display:block;/* needed to give your ul li a dispaly of block so that they cover  100% the width of the LI by defaul (do NOT give this rule  explicit width!!*/
			padding: 5px 32px;
			color: #fff;
			text-decoration: none;
			background-color: #999;
		}
		
		ul li a:hover {
			background-color: #000;
			color: 000;
		}
		
		</style>
	</head>
	<body>
	<div id="content">
	<ul>
		<li><a href="#">Menu 1</a></li>
		<li><a href="#">Menu 2</a></li>
		<li><a href="#">Menu 3</a></li>
		<li><a href="#">Menu 4</a></li>
		<li><a href="#">Menu 5</a></li>
		<li><a href="#">Menu 6</a></li>
		<li><a href="#">Menu 7</a></li>
		<li><a href="#">Menu 8</a></li>
	</ul>
	
	</div>
	</body>
</html>

rationale for my corrections in the comments… hope I have been able to help.
==:)

3

That’s awesome. I’ve never used percentages for widths so that makes more sense as well as your comments. Thanks for helping out.