A strange bug in rendering engine
I am probably doing something wrong, but this page displays correctly in Opera 12 (Opera 11 is also fine, but it makes the last 2 checkboxes unclickable) and Chrome 21+, and it is for some reason messed up in the latest version of Firefox. I'm very dissapointed.
First I thought it is because of the column-count rule. But then I compared the results with another page without multicolumn. It's also messed up. Why?..
I'm not going to include the markup of the second page for shortness, but it is much the same - just remove some checkboxes in the left cell and remove the column-count rule optionally.
What was meant: two-cell table with outlined blocks inside of each cell. Checkboxes are contained in those outlined blocks. What's happening: the cells sit on each other directly and overlap each other.
Modified by popov654
All Replies (5)
There is a problem using position:absolute in a table cell. The <td> element is not considered a parent node for purposes of positioning, so the element is positioned relative to the table (or possibly tbody, I'm not 100% sure, but in this case, they have the same origin).
Removing position:absolute from .outline does collapse the boxes to their content height. I'm not sure whether there is a clean solution for that.
If you posted with Firefox 24, you may need to clear the preference that is misreporting your version number. See: How to reset the default user agent on Firefox.
Corrected, thanks
Tried to use margin property, but now the height of outlined boxes is set as small as possible to contain the contents of them (height property is ignored without absolute positioning), which is not acceptable in this design. Also, in this case I need to move the lable nodes inside of the boxes' elements. If the second problem can be solved, I'm not sure about the first one. What would you suggest about height?
And, the main question: is such behavior planned to be fixed somewhen? Of course I can completely remove the table and use side margins and center-alignment, but...
Modified by popov654
I don't think Firefox will change how position:absolute works in table cells, unless there is a standard (e.g., something in CSS3) saying it should work a different way. That's usually what you need to see a change go through.
In Firefox, I think the height of a td element is always auto, so since % height is a function of the parent element height, it doesn't work in a td.
As you can tell, the developers long ago decided not to support the use of tables for layout purposes, and given the opportunity to comment, they probably would suggest using a block container such as a div element instead of a table.
If you want to pursue alternate designs, a better forum would be the unofficial mozillaZine Web Development board.