WPDFD Issue #78 - September 01, 2004

Absolutely relative

The concepts of absolute and relative positioning in CSS can be quite confusing and are often misunderstood. Absolute positioning puts CSS boxes (divs) at specific pixel locations in the browser window, just like pinning cards on a notice board. Usually, the absolute position is measured from the top left corner of the page but it doesn't have to be, as you will see. For relative positioning, the analogy I often use is that of polystyrene blocks in a swimming pool – they float until they are pushed downwards by another one from above.

Last month, I started examining some of the vital differences between designing for print and for the Web and explained how a Web page has no specific dimensions. Now, we'll look at some other factors that seem equally nebulous but have to be understood and accommodated. Font sizes I covered type and font issues pretty extensively in the July editorial but one important aspect that I didn't go into was font size.

CSS Layout Books

I'm going to review two excellent new CSS books this month. They have a lot in common. Both are by prominent authors in this field and cover similar ground but they are quite different in approach and will appeal to slightly different audiences. Firstly, Eric Meyer on CSS is somewhat of a departure from his previous, more reference-oriented CSS books. This book is a hands-on layout tutorial pure and simple.

Debugging your Web pages

Every day, someone posts a plea for help on the WPDF Forum or one of the other mailing lists that I frequent. Their new Web page isn't working in some browser or another and they post the URL for people to check it out. The first thing that I do, is go to Chris Pederick's very handy Web Developer Toolbar in Mozilla and call-up a W3C validation of the HTML and CSS. Nine times out of ten, the page doesn't validate.