Member Avatar for suavedesign

If there's anyone that can help, I'd appreciate any suggestions with this issue: I created my site with an elastic layout, using all measurements in ems. However, the layout gets distorted when a user zooms in or out. The nav bar gets completely messed up, and on firefox when the option "zoom text only" is checked off, the entire site gets messed up.
Anyone have any idea what can be the problem? The url to the site is www.newstylesignsusa.com

  • 5 Contributors
  • 21 Replies
  • 701 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by cfajohnson

Dani AI

Generated

Short diagnosis and direction: the persistent breakage after the nav fix points to layout geometry that’s tied to type sizing. When browsers change text size (IE’s Text Size or Firefox’s “zoom text only”), any widths, paddings or gaps that are expressed in units that scale with the font will change, pushing floated/inline elements out of place. has already narrowed the symptom; ’s recommendation to move layout geometry away from font-scaled units is the right direction, while ’s minimum-width idea only masks the problem on narrower viewports.

Concrete approach (practical order of work):

  • Standardize typography to root-relative units (rem) so type scales predictably across the document, and reserve scalable units for type only.
  • Move structural geometry (column widths, main container sizing) to percent or to modern layout systems (flexbox/grid) so the layout responds to the viewport instead of the current font metric.
  • Make box calculations predictable with box-sizing: border-box so padding and borders don’t unexpectedly increase element boxes.
  • For the nav, use a single-row flexible layout (flex or grid) with non-wrapping items and sensible min/max for individual links so they shrink or overflow gracefully rather than wrapping the last item under.

Example snippets (concepts only):

html { font-size: 100%; }
*, *::before, *::after { box-sizing: border-box; }

.nav { display: flex; gap: 0.5rem; align-items: center; }
.nav a { font-size: 1rem; padding: 0.5rem 1rem; white-space: nowrap; }

Debug checklist:

  • Reproduce the bug with both full-page zoom and text-only zoom and watch computed values in devtools.
  • Temporarily outline elements to see actual boxes.
  • Flip single rules (swap an em to rem or % for width/padding) to confirm which property causes wrapping.
  • Convert a single component at a time (nav → header → content) and retest.

Quick conversion tip: compute percent from pixels with percent = (element_px / container_px) * 100 and apply that to flow-defining widths. Finally, prefer flexible/responsive layouts over a large fixed minimum width — that preserves accessibility (allowing enlarged text) while keeping the design stable.

Recommended Answers

All 21 Replies

Member Avatar for cfajohnson

Use percentages, not ems (except as max-width or min-width).

Member Avatar for suavedesign

What should be in percentages? Everything including padding, margins, etc? And is there a way to figure out the exact percentage from px or ems? Thanks

Member Avatar for teedoff

Try adding min-width: 1000px to your body style rule. That might be a quick fix, but you should look into using some percentages instead of ems.

Here is a great site with some good tutorials on ems, pixel, and percentage layouts,

Edited by teedoff because: n/a
Member Avatar for suavedesign

The 1000px min-width had no effect. Any other suggestions? Which elements should I change to percentages?

Member Avatar for teedoff

The 1000px min-width had no effect. Any other suggestions? Which elements should I change to percentages?

Hmmm it did when I tried it.

Did you replace the width:100%; on the body tag with min-width: 1000px;? I just tried it again and it works. When I resize the browser and drag the right border to the left making the page smaller and smaller, the nav bar doesnt float the last tab underneath. Everything seems to work fine after changing that one style.

Edited by teedoff because: n/a
Member Avatar for cfajohnson

You do not, indeed cannot, know the width of your viewers' browser windows.

One viewer may have a window that it 20 ems wide; another may be 100 ems.

If you want to have 5 objects side by side across the entire browser window, you need to give their widths as a percentage:

width: 20%;

(Or perhaps a little less to allow for padding, margins and borders.)

Member Avatar for teedoff

Thats why a standard practice is to design pages around 960 or 1024 that will accomodate MOST browsers and users screen resolutions.

Of course you can set your page to be 100% of whatever the users screen is set at, but if you dont design whats INSIDE that 100% wide element, then your page will surely break.

I would suggest making a back up copy of your site, then start playing around with all the em measurements, changing them one at a time to pixels or percentages. Each oen you change, check that its working properly. It will be a tedious process, but I think you will definately learn alot from this procedure. Good luck

Edited by teedoff because: n/a
Member Avatar for cfajohnson

I haven't had a monitor as narrow as 1024 for more than 8 years! Pages that narrow look silly, particularly on my current 1920px monitor.

I always use fluid designs that fit whatever width the viewer uses.

Member Avatar for teedoff

Statistics show that there are MANY ppl using screen resolutions of 1024x768 and even lower. For a web designer to build sites that dont exclude those users, 20% as of the beginning of the year, we have to abide by certain standards.

Not saying to build all your sites with a set width of 960px, but you cant build sites just because you have a 50" plasma hooked up to your pc either.

Ecommerce sites especially need to reach as broad a range of users as possible, which is why by todays standards, most ppl design for no more than 1024 res. Of course you can style it to stretch according to available user screen res, but that wasnt the initial question was it.

Member Avatar for cfajohnson

That is my point. There are people using browser windows (screen resolution is irrelevant) of all sizes. Designing for one size doesn't work. Use a fluid design that works for everyone.

The original problem is solved by using a flexible design.

Edited by cfajohnson because: n/a
Member Avatar for suavedesign

teedof:
when I changed width:100% to min-width:1000px and I zoom in and out of my browser- (IE and firefox) the nav bar still gets distorted! Also, when using firefox, if "zoom text-size only" is checked off in view, then the entire layout goes completely haywire.
Do you think the only solution for me right now is to play around with the measurements like you said?
Thanks for trying to help...

Member Avatar for suavedesign

cfajohnson:
The percentage is relative to the entire browser, or the element that is containing it? (I.e. An element inside a main wrapper div is 20% of the entire browser, or 20% of main wrapper div?)
Thanks

Member Avatar for JRM

cfajohnson:
The percentage is relative to the entire browser, or the element that is containing it? (I.e. An element inside a main wrapper div is 20% of the entire browser, or 20% of main wrapper div?)
Thanks

nested divs are relative to the closest outer div only, i believe.

Member Avatar for teedoff

Suave, you should do some reading here. This site explains how to design sites in fixed, fluid, and elastic styles with some links to good examples of each type. It also has the pros and cons of each type.

I guess there's no quick tip to tell you how to fix this short of someone else fixing your layout for you, which I'm sure you want to do yourself.

As JRM said, elements nested inside other elements, divs within a div, are relative to the containing div. Think of it like a box, which is what its called, that has a certain dimension to it. Anything you place within that box must be small enough to fit. Here is a good explaination of the box model. Hope that helps.

Edited by teedoff because: n/a
Member Avatar for suavedesign

Thanks for all your help, guys! I succeeded in fixing the nav bar, and now it looks fine when you zoom in or out. But a (big) problem still remains:
The entire website layout goes completely haywire when: On IE- you change "text size", and on Firefox- you check off "zoom text size only". The problem must have to do with text size, but how do I fix it??
Thanks in advance!

Member Avatar for almostbob

ems are user defined, they are the width of the M in the users basefont
screen layout in % , font in em
the window is always 100% wide regardless of size

Member Avatar for suavedesign

Almostbob,
are you saying that I should leave font sizes in em, and use percents for layout?

Member Avatar for almostbob

well it works for everybody else

Member Avatar for cfajohnson

ems are user defined, they are the width of the M in the users basefont
screen layout in % , font in em
the window is always 100% wide regardless of size


An em is the height of the current font. If the current font is 18px, 1em is 18px.

commented: amazing, conflicts with every resource -1
Member Avatar for almostbob


An em is the height of the current font. If the current font is 18px, 1em is 18px.

if you are going to suggest that someone has made an error in their definition,you should get it right,, http://en.wikipedia.org/wiki/Em_(typography)

An em is a unit of measurement in the field of typography. This unit defines the proportion of the letter width and height with respect to the point size of the current font. Originally the unit was derived from the width of the capital "M" in the currently used typeface.[1] This unit is not defined in terms of any specific typeface, and thus is the same for all fonts at a given point size.[2] So, 1 em in a 16 point typeface is 16 points. Note that this term is not an acronym or initialism and is pronounced the same as the letter it refers to, the letter "M".

Edited by almostbob because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.