1 reply [Last post]
Last seen: 16 years 38 weeks ago
Timezone: GMT-7
Joined: 2003-10-15
Posts: 4
Points: 0

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

	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---
	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's picture
Last seen: 1 week 4 days ago
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

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.