position relative in firefox [duplicate]

by

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>

More Related Contents:

  1. How can I center an absolutely positioned element in a div?
  2. Custom CSS Scrollbar for Firefox
  3. Targeting only Firefox with CSS
  4. Understanding z-index stacking order
  5. How to remove Firefox’s dotted outline on BUTTONS as well as links?
  6. Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading
  7. Why does `overflow:hidden` prevent `position:sticky` from working?
  8. Content url does not display image on firefox browser
  9. If you specify `bottom: 0` for position: sticky, why is it doing something different from the specs?
  10. What are the default top, left, botton or right values when position:absolute is used?
  11. Background-image in keyframe does not display in Firefox or Internet Explorer
  12. firefox overflow-y not working with nested flexbox
  13. Set Google Maps Container DIV width and height 100%
  14. Font-size issues comparing chrome and Firefox
  15. position: absolute without setting top/left/bottom/right?
  16. Prevent flex item from exceeding parent height and make scroll bar work
  17. IE7 relative/absolute positioning bug with dynamically modified page content
  18. pure CSS multiple stacked position sticky?
  19. Firefox ignores padding when using overflow:scroll
  20. Scrollbar color change in Firefox
  21. Percentage padding / margin on grid item ignored in Firefox
  22. Absolute positioning ignoring padding of parent
  23. Preventing an image from being draggable or selectable without using JS
  24. background-attachment fixed with transform not working in Firefox
  25. SVG Fill not being applied in FireFox
  26. Have a fixed position div that needs to scroll if content overflows
  27. Firefox blurs an image when scaled through external CSS or inline style.
  28. How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
  29. Why magin:auto is not enough to center position absolute or fixed?
  30. Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?

Leave a Comment