Browser text zoom problem.

[scskimmer]

Hey guys. I was just wondering if there is a proper way to deal with text zooming (such as using em's for size configurations on certain areas) between the different browsers. I say this because for the site I am making, I have a nav bar that fits perfectly inside of a div. However, once you defer from the default browser text size ( [cmd/ctrl] and [+/-] ) my layout starts to change for the worst. It becomes glaringly obvious once I shrink the text size a bit, because the
nav bar consisting of the unordered list items shrinks at a different rate than the surrounding div tag.

This problem is driving me nuts. Any solution to this? Or is this out of my hands?


if you want to see the site, it is www.scskiclub.com. (It's not the initial intro text, I am worried about, it's on the main page. Try shrinking the text when it appears)

Thanks a lot for the help guys. Definitely means a lot.

[Wickham]

You can set every element (divs, forms, tables, lists) with a width in ems and then when someone increases text size the divs, images and everything incraese in size as well.

However, this does cause problems with images as the height may change in height out of proportion to elements around them, or if you leave images in fixed sizes, they don't fit the changed containers.

Modern browsers have a zoom which increases the whole page including images, so I think it's better now to code font and divs and images in fixed sizes and widths and let a viewer use page zoom instead of text increase and then everything stays in proportion.