Zooming in + out x-browser

HTML & CSS
1

Hi - I’m getting a bit confused, are these 2 pages

and

saying that I should always have:

body {font-size:100%;}

p {font-size:0.875em;}

line-height: 1.1;

In other words, it’s best to always use em for font, no em for line-height, and always set body font-size to 100%?

This way it all zooms in and out perfectly x-browser?

Look at this, I’ve moved my draft template into wordpress:

http://www.greensmoothie.com/gs/

Description: A copyrighted WordPress theme by Val Archer with help from forum members at http://www.sitepoint.com/forums/

cool eh? Now all I have to do is move 100 pages of data over into WP!

Val

2

You never really need to se the body font size to 100% except to fix an IE bug, but it doesn’t hurt to specify it.

You should always specify either a relative unit for your font size. Aka em or %. Don’t use px because IE won’t allow for text resize.

3

Hi,

The percent in the body is to cure an IE zoom bug. If you use ems for the body the text resize gets all out of whack.

For other elements em or percent are exactly the same thing as far as font size is concerned and makes no difference which you use.

Unit less line heights are best but 1.1. would be a bit small for my liking.

4

Oh that’s a lovely link, thank you Paul - I’ll change all my line-heights to unitless.

best, Val

5

If you want to read up on that bug:

em font resizing bug

6

Hi - thanks for the link! What does s/he mean by “Note that this IE-bug can be re-triggered if font-size keywords are used anywhere in a document.”

What’s a keyword?

Back to limitless line-height, is, e.g.

(1) line-height:130% always 1.3?

so 120% is 1.2, 125% is 1.25 and so on?

(2) and is line-height:1.3em always 1.3?

so 1.2em is 1.2, 1.25em is 1.25 and so on?

(3) and line-height:50px; - to center txt vertically

should that be 50%, same way you do 50% for image to center it vertically?

thank you! - Val

7

These:

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

Back to limitless line-height, is, e.g.

(1) line-height:130% always 1.3?

It is equivalent to 1.3 times the parents font-size. It is a scaling factor that is passed on down to the children unlike percentages where a computed sized is passed to the children and the scaling factor effectively ends.

(2) and is line-height:1.3em always 1.3?

em and percent are the same thing when applied to font-size. 1.3em is exactly the same as 130%

(3) and line-height:50px; - to center txt vertically

line-height is added in the form of half-leading to the top and bottom of a font which means the font is more or less centred in the line-height that you set. If you have a block box 50px high and you want some non wrapping text centred vertically in that box you can set the line-height to the same height of the box causing the text to be centred. If the text wraps to another line then it won;t be centred within that element and indeed won’t fit.

should that be 50%, same way you do 50% for image to center it vertically?

No that would cause the line-height to be half the size of the parent font and therefore not big enough to contain the font at all and you would probably get strange results cross browser.:slight_smile:

8

Hi Paul - thank you! I took the plunge and deleted % and em next to every line-height and it all displays correctly.

If you can’t use keywords without triggering the IE bug, does that mean the css should contain font-sizes for

# x-small
# small
# medium
# large
# x-large

and then you span the word/s that you want smaller or larger?

thanks, Val

9

I’m not sure what you are asking there Val.

Just don’t use keywords and you will have no issues. Keywords vary in size between browsers anyway so there is no consistency.

Just apply the font sizes you require using em/percent (or px if you don’t care about ie6) and you are good to do. No need to use the larger or smaller keywords as that will be inconsistent also. You are the designer so set it at what you want it to be.

10

Hi Paul - thanks million, I got it!

best, Val