0

Possible Duplicate:
Does Firefox support position: relative on table elements?

Here is an example: full-width menu as a table and ul-s as dropdown menus. http://cssdesk.com/dW7WS

Works fine in ie and opera, but in firefox dropdown uls streched on whole screen!

Any help?

Community
  • 1
  • 1
JohnSmt
  • 23
  • 1
  • 3

2 Answers2

7

position: relative does not work on table cells (<td> or display: table-cell).

From the spec: http://www.w3.org/TR/CSS21/visuren.html#propdef-position

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

So, Firefox is doing nothing wrong, although I do wish it would copy other browsers and make this work.

To make this work, you need to add a wrapper div inside each td (and adjust your CSS selectors):

<table id="mainmenu">
    <tr>
        <td>
            <div style="position: relative;">
                <a href="#">..</a>
                <ul>
                    ..
                </ul>
            </div>
        </td>

        ..
    </tr>
</table>
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • thank you, thirtydot - you answer is most helpful. can you tell me, what style must be applyed to that container div? – JohnSmt Oct 02 '11 at 22:36
  • You're welcome. You should move the `#mainmenu td` stuff to `#mainmenu td > div`. You should also change `#mainmenu td:hover > ul` to `#mainmenu td:hover > div > ul`. I've done it here for only the first one: http://cssdesk.com/hmWSd. That's the idea, anyway. – thirtydot Oct 02 '11 at 22:40
  • https://bugzilla.mozilla.org/show_bug.cgi?id=63895 – thirtydot Aug 24 '13 at 15:01
1

Like @Jared Farrish said using tables for layout is bad practice and the problem here.

#mainmenu ul li {
    width: 100%;
}

Is causing the li elements to display 100% of the screen. I would suggest you wrap the menu in a container div, there is absolutely no need for a table here you should put the menu in an unordered list something like: -

<ul>
   <li class="parent_node"> Menu Header 1
        <ul class="sub_node">
             <li> Sub item 1</li>
        </ul>
   </li>
   <li class="parent_node"> Menu Header 2
        <ul class="sub_node">
             <li> Sub item 1</li>
        </ul>
   </li>  
</ul>
KryptoniteDove
  • 1,278
  • 2
  • 16
  • 31
  • i used table because i need full-width menu, with divs i can only make it with display:table-cell, wich is unsupported in ie6. – JohnSmt Oct 02 '11 at 21:56
  • i must add, i need full-width menu with menu items _streched_ on whole width. – JohnSmt Oct 02 '11 at 22:06