Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

A strange bug in rendering engine

  • 5 replies
  • 11 have this problem
  • Last reply by jscher2000

more options

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)

more options

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.

more options

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.

more options

Corrected, thanks

more options

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

more options

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.