Firefox can not layout nested tables properly?

css, firefox, html, javascript

Solution

Wrapping tables in divs seems to solve the issue:

<html>
<body>
<div id="menu" style="position:absolute; left:150px; top:100px; z-index:1">
  <table width="200px" height="90" border=1 cellpadding="0" cellspacing="0">
    <tr>
      <td colspan=2>Money</td>
    </tr>
    <tr>
      <td colspan=2>Tool</td>
    </tr>
    <tr>
      <td>Food
        <div style="position:absolute; left:200px; top:60px; z-index:1">
        <table width="200px" height="60px" border="1" cellpadding="0" cellspacing="0">
          <tr>
            <td>Cookie</td>
          </tr>
          <tr>
            <td>Fruit
              <div style="position:absolute; left:200px; top:30px; z-index:1;">
              <table  width="200px" height="60px" border="1" cellpadding="0" cellspacing="0">
                <tr>
                  <td>Apple</td>
                </tr>
                <tr>
                  <td>Banana</td>
                </tr>
              </table>
              </div>
            </td>
          </tr>
        </table>
        <div>
      </td>
    </tr>
  </table>
</div>
</body>
</html>

In fact it would be better not to use tables at all, but only divs with proper borders.

Problem

I want to implement a collapsible menu. I plan to use table component to simulate a menu, and nest a sub table into a table cell to simulate a sub menu. Below is my code, it works as expected in IE, Chrome and Safari, but it doesn't work well in Firefox: ``` <html> <body> <div id="menu" style="position:absolute; left:150px; top:100px; z-index:1"> <table width="200px" height="90" border=1 cellpadding="0" cellspacing="0"> <tr> <td colspan=2>Money</td> </tr> <tr> <td colspan=2>Tool</td> </tr> <tr> <td>Food <table style="position:absolute; left:200px; top:60px; z-index:1" width="200px" height="60px" border="1" cellpadding="0" cellspacing="0"> <tr> <td>Cookie</td> </tr> <tr> <td>Fruit <table style="position:absolute; left:200px; top:30px; z-index:1" width="200px" height="60px" border="1" cellpadding="0" cellspacing="0"> <tr> <td>Apple</td> </tr> <tr> <td>Banana</td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </div> </body> </html> ``` It seems that Firefox think the "left" and "top" attribute for the level 3 menu is relative to the level 1 menu, so it layout the level 3 menu incorrectly. Other browsers will calculate the offset base on the level 2 menu, that works as expected. Is it a bug in Firefox? If so how can I work around it? I want my code to have the same behavior in all major browsers.

Original source