No more fuzzy math
October 8, 2001
Want to dig even deeper? Post to the new MacEdition Forums (beta)!
In a perfect world, where browser manufacturers didn’t publish bug-ridden trash, where Web authoring tools always generated compliant markup, and where the Document Object Model reined supreme, maybe we wouldn’t need to read W3C specs. We could just design it as we see it, just as Tim Berners-Lee originally intended. And if sometimes we did have to read the spec, it would be easy to understand what the W3C meant. You just wouldn’t have to worry about the internals.
Padding up – it’s not cricket
The most important thing to understand about CSS is the box model. Unless you only create linear pages with no elements side by side, and probably even if you do, you must understand this part of the standard. Get a good book or tutorial on the subject: Either of Eric Meyer’s books will give a clear and accurate explanation, as does the book written by Hakon Lie and Bert Bos – all three have been involved in the development of the CSS standards at some stage. There are probably many other books (and online tutorials) that are just as good.
The main thing to remember is that margin, border and padding do
not count towards the width or height of an element. So if you
DIV to have a width of 400px, and then define another
DIV inside the first
DIV to have 10px of padding
and a width of 400px, something has to give – usually your sanity.
Elements fill up the available space of their parents, so assuming there
are no margins anywhere and no padding on the outside
DIV will have 380px of width (400px-10px-10px) without
you having to define a width explicitly.
Of course, you can get all your box model calculations right, and then find that the results are not what you expected in Internet Explorer. The reason is that IE5 for Windows and all versions of IE4.0 stuffed up the box model. In IE5/Windows, padding and borders count towards the width and height of the box, making the text area shorter and narrower than it would be on other browsers.
IE5 for Mac and IE6 get this right, unless you use the DOCTYPE switching trick to invoke “quirks mode” – that is, telling those versions of IE to behave like their cruddier siblings. IE4.5 for Mac also gets the box model right but doesn’t do the DOCTYPE switching.
Various proposals to get around this problem have been proposed, including
exploiting IE5/Windows’ lack of support for the direct-child selector
div > p ) in CSS2, and exploiting a bug in the way it
handles quotation marks. You already know what
I think of this – hacks to get around browser bugs will just
bite you back in the end.
Literacy and numeracy
Things add up. If your layout isn’t working, and the HTML and CSS both validate, check your arithmetic. Graphic designers in the print world are used to thinking carefully about layout grids and making things balance. Even though screen-based Web layouts are never going to be millimetre perfect, there are still right and wrong ways to define layouts. Plan your layout carefully, and don’t throw something together without thinking and then wonder why you get a horizontal scrollbar.
Consider the following layout: You have three columns, which you want to be flexible in width but have consistent proportions between them. For example:
All well and good, but what if you want some padding around the text in those areas?
Now you’ve managed to define a page that’s wider than your window, guaranteed. Sure, some browsers will try to second-guess you and save you from your own innumeracy, but outcomes may be very unpredictable. Try leaving out the width definition for the center column, and you’ll be back in business.
Shake it up, baby
Another thing that can get you into trouble is to mix your units up. I mentioned this in passing in an earlier column, but it’s essential to understand the problem. I’ve seen it before on many sites, and worse, the first place I even saw it was an HTML tutorial site. (No, I’m not telling who.) If you define a font size in ems, for example, don’t define the line-height or the height of the containing block in points or pixels. This will only lead you into trouble if the reader has his or her browser’s default font size set to something you weren’t expecting.
Grit your teeth and grid, girl!
By now, some of you are probably wondering if this isn’t in conflict with my view that HTML should not be hard. Well, not really. Word processors are easy to use, but it still takes a little bit of common sense to make something look good in Word or its competitors. DTP was pretty easy to do even without much formal training, but you still needed to think about layout grids and making your leading add up. This isn’t hard stuff. This isn’t chasing down fifteen browser bugs in seven versions of three different browsers on two platforms, with solutions that are mutually inconsistent. It’s just some storyboarding on a scrap of paper, some simple arithmetic and a little bit of common sense.