trouble centering menu

[winawanus]

I am at my wits end trying to center a menu (menu for 'Workshops Available').
Would someone please look at my coding?
http://lindaconover.com/kris/workshops.html
Thank you, Wina

[Medyman]

oooo, ouch! <font> tags. That hurts my eyes :-p

CSS:

#menu_ws {
	margin:0 auto;
	text-align:center;
}

#menu_ws ul {
	color:#fff;
}

#menu_ws h1 {
	margin:0;
	font-size:16px;
}

HTML:

<div id="menu_ws">
	<ul id="tablist">
		<li>
			<a class="tab" href="#" onclick="return expandcontent('sc1, this)"><h1>Workshops Available</h1></a>
		</li>
		<li><a class="tab" href="#" onclick="return expandcontent('sc2', this)">&ldquo;Serendipity In A Cup&rdquo;<br />
			Color  Essence for Hand Weaver</a></li>
		<li><a class="tab" href="#" onclick="return expandcontent('sc3', this)">&ldquo;Esoteric Cloth&rdquo;<br />
			Surface Design for  Handweavers</a></li>
		<li><a class="tab" href="#" onclick="return expandcontent('sc4', this)">"Arashi!"</a></li>
		<li><a class="tab" href="#" onclick="return expandcontent('sc5', this)">“Chroma Rhumba!”<br />
			Technicolor Dance Around the Color Wheel</a></li>
	</ul>
</div>

Add that CSS to the bottom of your stylesheet. Replace your entire menu block with the HTML above.

[winawanus]

Thank you so much Medyman for looking at my code. (I checked and couldn't find anymore font tags to remove.. teehee)

I did as you suggested and in Firefox the block is left aligned. And in IE7.0 it didn't make any difference?

A confused, self-taught beginner ~ Wina

http://lindaconover.com/kris/workshops1.html

[Medyman]

Ahh, I see what's happening.

You can either changed the width of the #menu_us div, or center the unordered list inside.

So do either of these:

#menu_ws {
    width:300px //  you'll have to set this to w/e the width of your menu us, trial and error :)
}

or

#menu_ws ul {
    margin:0 auto;
}

I *think* those should work. The 1st one definitely will.

[winawanus]

The first one did the trick.
Thanks, Wina