Fonts, alignment, & Firefox

A few months ago I went to a web site that looked terrible in Firefox,
but fine in IE and Opera.

It turned out that because I had reset my default font size in Firefox
to be larger, that my larger fonts messed up the alignment of the CSS
elements on the web site.

Why does this happen?

More importantly, as a person using more and more CSS, how can CSS be
coded to avoid that happening?

In article
<f7e951d4-fb05-47cd-b4c5-fa991b12f14a (AT) a70g2000hsh (DOT) googlegroups.com>,
Steve <tinker123 (AT) gmail (DOT) com> wrote:

A few months ago I went to a web site that looked terrible in Firefox,
but fine in IE and Opera.

It turned out that because I had reset my default font size in Firefox
to be larger, that my larger fonts messed up the alignment of the CSS
elements on the web site.

Why does this happen?

More importantly, as a person using more and more CSS, how can CSS be
coded to avoid that happening?

The main reason that this sort of thing happens is because the boxes are
dimensioned in pixels whereas the fonts are dimensioned in eeither
percentages or ems. Naturally, they will then break out of a fixed pixel
box. The solution depends on the design. In general, it is better to
size your boxes in ems so that they too wax and wane with the user text
size.

Where it is not practical to do this, you must be careful not to put in
content like large unbroken text or very long words. So that for all
practical purposes, they will wrap within the pixeled box.

--
dorayme

Steve wrote:

because I had reset my default font size in Firefox
to be larger, that my larger fonts messed up the alignment of the CSS
elements on the web site.

Why does this happen?

Because many so-called web designers think a web page should be the same
as a print design. IOW they tend to be clueless about the media.

More importantly, as a person using more and more CSS, how can CSS be
coded to avoid that happening?

Don't try to make a pixel-perfect layout.

One of the worst things you can do is set a fixed height and width on a
text block. The tendency is fix the font size to stay within the
confines of the box, which doesn't work very well even when the box
dimensions are set in ems. Even worse though, is absolutely positioning
those fixed size boxes. Then things get really ugly really fast.

Setting a specific width (in %, em or px units depending on content and
design goals) is common, but leave the height at the default auto so it
adjusts as needed.

The mistake a lot of people make is trying to make complicated CSS
layouts without really understanding what CSS is *supposed* to do, or
the repercussions of various positioning methods. You need to start out
simple and work your way up, just like anything else. Practice makes
perfect, and all that. That's not to say your CSS will ever be perfect
(I know mine isn't), but if you study and practice it will be a lot less
imperfect than all those broken sites out there.

--
Berg