Fonts, alignment, & Firefox
in [CSS]
|
Prev: Getting a DIV to cover a whole PAGE instead of just the SCREEN
Next: One <P> fonts setting controlling another <P>
From: Steve on 12 Apr 2008 16:44 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?
From: dorayme on 12 Apr 2008 17:45 In article <f7e951d4-fb05-47cd-b4c5-fa991b12f14a(a)a70g2000hsh.googlegroups.com>, Steve <tinker123(a)gmail.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
From: Bergamot on 12 Apr 2008 17:50
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 |