CSS Positioning Absolute within table cells not working in Firefox

Question

I cannot figure out this positioning problem in Firefox. It doesn\'t seem to follow the absolute positioning rule. Is there something I\'m doing that shouldn\'t be done, but

Answer 1

In case you want to position stuff at the top and bottom of a cell, also in Firefox, I made it work doing the following mix of CSS and (unfortunately) jQuery.

1. Use a wrapper div (div.inner) inside your td which has position=relative style in the td. Inside the wrapper I added 2 divs which are to be positioned at the top and bottom of the cell.

2. Positioning at the top (class=interval-start) is for free, via CSS positioning.

3. Positioning the div.interval-end at the bottom is done via script, which adds the styling shown in the picture. With variable td-heights and the wrapper div being 0-height by default, you need a way to tell the element how far it should go to the bottom. The script is as follows:

           $("table .inner .interval-end").each(function () {
               $(this).css({top: ($(this).parent().parent().height() - 10) + "px"})
           }).show()
   

4. I initially made the div.interval-end invisible, set the 'top' style, and then made it visible via jQuery show().

Hope this helps anybody trying to achieve the same. Let me know if there are better methods out there, specially if these methods do not require scripting. BTW: I tried setting the height style of the wrapper div.inner, but it messes with the table layout in Firefox.