Dynamic layouts and font sizing in IE
35

Dynamic layouts and font sizing in IE

Kommentarer inaktiverade för Dynamic layouts and font sizing in IE

Web designers likes pixels. End users likes em’s. In order to make peace there has been some buzz around how to make things easy for the designer while still keeping relative sizes in CSS. And there has been a lot of buzz.

If you like elastic or dynamic CSS layouts, you’d want to use em’s to specify meassurements in your layout instead of pixels. So let’s start by taking out your calculator. 1em in almost every browser is rendered as 16px. So, 1/16 = 0.0625 right? Considering this, it’s not a coincidence that using the CSS:
body { font-size: 0.625em; }
has become the de-facto standard for designers who wish to put their calculator away and start coding, since it enforces the convenient relation 1em = 10px. As long as you enlarge the meassurements for texts, you should be fine using this.

Hey guess what? IE6 Win has it’s own calculator! That is basically because IE for Windows’ relative font size inheritance cascade is broken. If you try the following code in FF versus IE:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. body { font-size: 0.625em; }
  6. #blue { width: 300px; height: 20px; background: blue; }
  7. #red { width: 30em; height: 2em; background: red; }
  8. </style>
  9. </head>
  10. <body>
  11. <div id="blue"></div>
  12. <div id="red"></div>
  13. </body>
  14. </html>

You’ll find that the blue area is 2px wider in IE like this:

pixels

A minor flaw you might think, but highly annoying when it comes to exact positioning. It’s actually the red that is 2px short. So to compensate this we can feed a special rule for IE: * html { font-size: 101%; }. This works surprisingly well in IE6, so try this code (I changed the width to 10000px to make my point):

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. * html { font-size: 101%; }
  6. body { font-size: 0.625em; }
  7. #blue { width: 10000px; height: 20px; background: blue; }
  8. #red { width: 1000em; height: 2em; background: red; }
  9. </style>
  10. </head>
  11. <body>
  12. <div id="blue"></div>
  13. <div id="red"></div>
  14. </body>
  15. </html>

So there you have it, now you can safely start using em’s for you designs.

Note: This article is not about how to create a font-sizing consistency throughout UA’s, even though that question is related. But I’ll deal with that in another post.