Question

Firstly let me just say I know you shouldn’t use tables for layout – I’m fixing someone else’s code here.

I have a menu that is actually just a table with 2 rows. The top row is a banner and the bottom row is a <ul> with a bunch of menu items in it.

Now for some reason this works perfectly in IE, but it doesn’t work in Chrome. The problem is that if you have more menu items than can be displayed on the page, Chrome seems to not render these items at all, where IE wraps the items and displays the extra items on the next line. The IE behavior is what I am looking for.

<table id="menu_table" width="100%" style="border:collapse" cellpadding="0" cellspacing="0" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
    <tr>
        <td valign="top" colspan=2>
            <!-- iframe with banner -->
        </td>
    </tr>
    <tr>
        <td class="header>" valign="top" style="textweight:normal; " >
            <!-- ul with lots if li items -->
        </td>
        <td class="header" >
            <!-- another control -->
        </td>
    </tr>
</table>

If I use the Chrome feature for ‘inspect element’ I can see the table rows are taking up more than 100% of the page – the highlighted area extends to the side of the screen. If I use a div around the table I can see the div leaves a bit of margin around it, but the table inside the div still insists on rendering more than 100% it seems.

You can see this in action on jsfiddle – if you view this in IE it will wrap over to the next line, if you view it in Chrome it will just disappear off the page

Answer 1

Try removing the white-space: nowrap; from the td style (from the example you posted here: http://jsfiddle.net/8KbPF/12/)