CSS - Dividing remaining whitespace in horizontal layed-out UL

Dear Reader,

I'm trying to make a text-based menu which has a drop-shadow effect.
I've accomplished this through a list for which the items consist of
two p's: one for the normal text, and one (with a negative margin,
thank you alp.com) for the shadow effect.

That all works pretty well, but now the different list-items are layed-
out so that they all have an equal space within the horizontal menu. I
would like the whitespace between them to be equal (so the menu
becomes more or less fluid).

link: http://beautifulcity.de/menutest.htm

In the css from the above link I've set the width's in the menu to
fixed px's, just as I had it before I started experimenting. I
understand this is for sure not gonna work, but it's just to have a
clear stylesheet.

Thanks & best,

Joris Lindhout

jorislindhout wrote:

Dear Reader,

You do know you're posting to Usenet, not some google forum, don't you?

I'm trying to make a text-based menu which has a drop-shadow effect.
That all works pretty well
http://beautifulcity.de/menutest.htm

The positioning of the "shadow" doesn't look so nice to me. It impairs
readability, especially with the middle link because it wraps to 2
lines. If you don't see that, zoom text up some in Firefox.

It is also an accessibility issue, since the text for each link is there
twice. It won't sound good to a screen reader, or look "right" when CSS
isn't applied.

If you want shadows, I suggest using graphics. There isn't any benefit
to the user trying to do this with plain text.

--
Berg