Can someone tell me why this happens? How can I vertically center the menu in a table?

Trying to get image to appear.

Can you provide the code your using?

Out of curiosity, why are you putting your menu in a table to begin with? Not the proper way to place a menu to be honest. Got a link so we can see what it is you're trying to accomplish?

The reason for using a table is that I want the navigation bar to be 100% of the web page width.
The css menu by itself is only about 2/3 the width of the page. If someone can tell me how to make the css menu fill from edge to edge I wouldn't need the table.

On an earlier project I wanted to horizontally center my css menu. After searching these forums it was clear that centering the menu in a table was the only solution I could find. I only used the table for centering. The web page and menu both used black backgrounds. If my current issue was there you couldn't see it.

This time I want the navigation bar to be a contrasting color to the page background. The table provides the colored background and 100% width. When I place the menu list in the table I just can't get the vertical spacing to be even. I've tried every "valign" option I can think of and the placement never changes.

If someone has ideas for creating horizontal navigation bars with nicely centered text I sure would like to know how.

Thanks,

Randall, some of what you are saying is confusing to me. You want the menu vertically centered and spread over the whole page width? Your image is showing a horizontal menu, and most people want to have those horizontally centered...

Or do you want each menu item vertically centered in the table cells or whereever you have put them? I see that the menu items have more padding below than above, so just increase the padding-top. If the table cells have a fixed height, then you may have to subtract some px from padding-bottom.

If you want a horizontal menu spread out the whole page width, that is a different thing, and it is usually done by creating a div 100% wide, using the same background colour as for the menu, and then placing the menu in another div on top of it. No need for tables in such a case.

Generally, it does not work properly if you mix old fashioned appearance markup with css. That might be the reason why valign doesn't work for you. But we won't know for certain if you don't let us have a look at your code. The help we are trying to come up with here can't be more specific than what I have written either.

I'm confused also.
Randall could you post a link or the html that your using so we can see what your truly after.

Sorry I wasn't more clear.

I do want a horz. nav bar the stretches the width of the page. Researching this some more I have discovered the "width:100%;" in the css accomplishes what I want.

I continue to have issues vertically centering the text within the horizontal bar no matter how I create it. Padding has worked but the results are that the nav bar gets very tall and the look is not very elegant.

I only tried the "valign" because the HTML editor suggested it in the hints bar.

I like the ease of the "CSS Menu Designer". I'd like to come up with some simple solutions for the centering issues that I can use over and over again.

Hiya Randall,

We could help you much better if you gave us a link to the page so we can see what you have done so far and suggest fixes for you. It's very hard to give advice when we don't really know how you have things incorporated.

This code will ultimately be placed using a text block into an existing template.

That said I attached the html and css file I'm playing with. The text is stuck on the top edge.

Thanks everyone.

(remove the .txt from the file name)