Table Width Vs. DISPLAY: block?

I have a menu that is currently using a fixed width. The menu items are set up using DISPLAY: block. This works just fine unless the elements in the menu are longer than the width in the table and then they wrap around appearing over the menu item below. However if I change the width to a % then the menu crushes in on its self.

Is there a trick to solve this? A % based menu width would be ideal since I can remove the white space but I don't want to have to add a white image behind the scenes to stretch out the menu since that just defeats the entire value of using a % based menu to begin with.

I don't understand the problem, can you post some screenshots and code?

The menu crushes in on itself when you use a % based width because it's taking x% of the width of either the parent object or the page itself.

Example:

<div id="ParentBlock" style="display: block; width: 300px !important;"> <div id="MenuBlock" style="display: block; width: 100% !important;"> <!-- Menu items go here --> </div> </div>

In this example, the menu width will adjust to 300px wide because the div in which it has been placed is a block. If this isn't the case, then the menu will use the page's width as the parent and become as wide as the entire page.

I recommend NOT  using CSS and Tables for layout on the same page. If you want to use both, use the CSS to style things like buttons and text ... Even paragraphs, but not object placement on the page. All you're doing by using both for layout is taking a one way trip into annoyance and failure.

Here's what looks like a decent tutorial on CSS menus, although it might contradict what I've just said.

http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml

HTH