Centering Text Menus

[yu217171]

Hi everyone,

I have a text menubar that goes horizontally across the top of my page with the margin-left at 0, margin-top at 0 and margin-right at 0. The text in the menubar is an unordered list.

The problem I'm having is centering the menu items (text links).

Here's my CSS.

This is my menubar include file.
---
<div class="menubar">
	<ul>
		<li> Navigation Menu >> </li>
		<li> <a href="main.aspx"> Add IT Requests </a></li>
		<li> <a href="view.aspx">View IT Requests</a> </li>
		<li> <a href="admin.aspx">Administrative Pages </a></li>
	</ul>
</div>


This is my CSS class definition
---
.menubar
{
	width:100%; 
	background: #969696;
	border-style: solid; 
	border-color: black;
	border-left: none;
	border-right: none;
	border-width:1px; 
	font-weight: bold; 
	font-family: Verdana; 
	font-size:9pt;
}

This is my listitem (LI) definition

li
{
	float: left;
	width: 21%;
	text-align: right;
	color: yellow;
	padding: 3px, 0px, 3px, 0px;
}

It seems centered at 1024x768 but is not higher or lower resolutions. I think I may have to mess with the LI CSS definitions.

Thanks in advance,

Keith.

 

[gohankid77]

With just that code, I tried it at 640x480, 800x600, 1024x768, and 1280x1024 in IE6. It all seemed centered (except "Administrative Pages" at 640x480: it ran down to the next line...) If it isn't centering still, try posting your entire code and CSS file (if you are using one) or give us a url to your site and CSS. Thanks.