Zooming in Firefox Causes Page Layout to Break

Question

I'm having trouble with this page: http://seatgeek.com/atlanta-hawks-tickets/. If you zoom out one level from the "normal" setting in Firefox, the page looks like this: . This happens with both versions 3.6 and 4.0 of FF. It does not happen with Webkit.

Clearly the problem lies in the elements within the "list_details" div. The problem can be fixed by decreasing the width of the "col1" or "col2" spans by 1px or by increasing the "vevent" li element by 1px, but these fixes cause the design to render improperly.

If you add up the width of "col1" and "col2", also taking into account their horizontal padding and border, the total width is 647px. But it only displays properly in Firefox (when zoomed out one level) when the "vevent" element, which contains the two, has a width of 648px. Why is that?

Answer 1

as this appears to have been bumped, but the original code is not available, I can say that the difference would have been caused by rounding (or sub pixels), the OP said the problem didn't happen when the div was 648px wide.. an even number can be halved, or split between 2 columns (OP also mentions 2 columns) quite easily no matter the zoom level

However the odd number647px will have been treated differently by Firefox

I cannot say exactly how as I can no longer see the widths of the two columns, but this blog post by John Resig, may explain better

Sub-Pixel Problems in CSS

one possible solution, or at least a helper, is to make sure the available width of the container is always divisible by the number of columns?

Answer 2

removing the margin-right from the following css fixed the zoom out issue

#left_container .search_details .list_details {
    margin-right: 1px;
}