CODEWITHSUNDEEP
htmlcssbrowserzoomingstylesheet
Misagh
Misagh

Reputation: 121

Zooming out on Browser causes styling issues

When zooming out on Firefox (and most other browsers), the layout of the right side-bar and the top menu breaks. The side-bar jumps to the bottom of the page. To replicate this issue, please visit the site and:

  1. Find Zoom Out under the browser view menu and click it a few times.
  2. Pay attention to how it affects the menu and the sidebar.

The only solution that I found to this so far is to decrease the width of the sidebar with a few pixels and decrease the width of one of the menu list items. The problem with this dummy fix is that when the site is viewed on actual size, then it is visible that the menu is missing a few pixels on the width.

Surely, there must be a better solution to this issue. Do you know?

Upvotes: 10

Views: 9606

Answers (4)

JoReddy7
JoReddy7

Reputation: 1

in head tag try giving something like this:

<meta name="viewport" content="width=device-width, initial-scale=0.47, maximum-scale=1.0, user-scalable=1">

Upvotes: 0

danronmoon
danronmoon

Reputation: 3873

For the top menu, you can try setting the div wrapping the two ul's to position:relative, and then set the ul#mega element to position:absolute with an additional CSS declaration of right:0. Absolute positioning seems to be a good cross-browser way of fixing issues like this.

For the sidebar, you can set position:absolute and right:0 to div#sidebar.

Thought process 1 for Safari issue:

If the 'more' menu width is different in the top menu, try setting ul#secondary-menu to position:relative;z-index:11;. Then, you can add padding-left to the li.mmore child of ul#mega to compensate for different browser width evaluations at different zooms by sweeping the li under the other li's, so to speak. Then, to widen the colored line, transfer border-bottom declarations from the a child of li.mmore to li.mmore itself and adjust the height accordingly.

Upvotes: 0

Klemen Slavič
Klemen Slavič

Reputation: 19841

AFAIK, desktop browsers do not use subpixel-resolution for layouts (WebKit does currently have an implementation pending, but no word on other browser engines). That's the reason why you can't use fractions of a pixel when sizing boxes in CSS. Zooming only scales the CSS properties by a common zoom factor and the rounds off the remainder (I'm guessing it floors the values) so that the layout engine can work with integers instead of floating point numbers.

There is no hard solution to this apart from trying to pick pixel values that divide evenly between the zoom levels. Another approach would be to use a percentage-based width definition for the containers – that way, the browser will round off the numbers correctly for you and if the common width of both containers never exceeds 100% (you might need to subtract a tenth or hundreth of a percent due to rounding), you should be good to go on all zoom levels.

This is not to be confused with CSS3 scaling, which does allow you to scale arbitrarily (and indeed can result in edges that do not align to the screen pixels), since this does not affect layout in any way.

EDIT: Example: size the columns using percentages

#left-area { width: 66.3179%; /* 634/956 */ }
#right-area { width: 33.6820%; /* 322/956 */ }

Upvotes: 1

bookcasey
bookcasey

Reputation: 40413

When you resize the browser the pixel values are necessarily rounded, and this is leading to a problem where the sidebar and left-area don't have enough room to fit side-by-side, and you can see it drops to the bottom of the page.

The width of the main-content is 956px, left-area: 634px, sidebar: 322px.

634 + 322 = 956.

When you zoom in, the values are

633 + 321 = 954 > 953

Any hardcoded pixel values are going to have this rounding problem, consider using percents.

Upvotes: 0

Related Questions