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