1 reply [Last post]
trigger
Offline
newbie
Last seen: 15 years 40 weeks ago
Timezone: GMT-7
Joined: 2003-10-15
Posts: 4
Points: 0

I have a div called 'navcontainer', the css is---

#navcontainer{
	position: relative;
	width: 100%;
	background: #88C9F6;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	padding-top: 1em;
	clear: left;
}

and nested inside this div is a unordered list called 'navlist', the css for the ul and the li is---
ul#navlist
{
	white-space: nowrap;
	display: inline;
	margin: 0 auto;
	width: 98%;
	left: 1%;
	font-size: 0.7em;
	text-align: center;
	list-style-type: none;
	clear: right;
}
ul#navlist li{
	display: inline;
	margin: 0;
	padding: 0;
	float: left;
	width: 12%;
}

so, basically I'm trying to center this unordered list into this div container block. The design is at http://www.nasi.com/test.htm and the css is at http://www.nasi.com/test/style.css. The centering shows up in IE fine, but not Firebird, Mozilla, or Opera. What am I doing wrong? I've tried with and without the width of 98% and left: 1% properties, and it doesn't matter. It shouldn't be this hard, should it? How about centering that Business Partner menu at the top of my page vertically with that container div?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 15 hours 46 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Horizontally centering a block unordered list into a div

Hi trigger,
If you comment out or remove the display inline in ul#navlist and set an acurate width, the list should center.

Hope that helps.