CODEWITHSUNDEEP
htmlfirefoxlayoutcss
Jack7890
Jack7890

Reputation: 1371

Zooming in Firefox Causes Page Layout to Break

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: Example broken image. 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?

Upvotes: 11

Views: 6133

Answers (4)

Will
Will

Reputation: 4386

For future reference those looking for a general answer to why zooming can cause layout breaks

http://dev.jeffersonscher.com/resolution.html

Also use relative units to size things

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

Upvotes: 1

windyao
windyao

Reputation: 11

Add the margin-right:-1px to the following css. This can fix the zoom out issue.

.team-show .static-sidebar {
    line-height: 22px;
    margin-right: -1px;
    position: relative;
    width: 255px;
}

Upvotes: 1

clairesuzy
clairesuzy

Reputation: 27634

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?

Upvotes: 2

MikeM
MikeM

Reputation: 27405

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

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

Upvotes: 1

Related Questions