WPDFD Issue #54 - September 01, 2002

As a designer, none of the Cascading Style Sheet tutorials I've seen on the Web reflect the kinds of things I want to do on a Web page. The whole concept seems so document-centric, more akin to what a word processor will do rather than a page-layout program. I realise that this probably covers most people's requirements for regular 'documents' and delivering information but I want more - quite a bit more.

The principle I used is that I would pull no punches, well not exactly, there is no point in using CSS features that are not supported in any browser. I took Mozilla 1.1 as my 'base' as it is the most advanced browser where CSS is concerned, and it is my main browser of choice anyway. If what I was doing didn't work in Mozilla 1.1, I backed off. I should point out, in case you don't know, but Mozilla 1.x and Netscape 7 are almost identical twins.

CSS for Layout

One of the things that you can't do with a tables-based layout is put text or images on top of other images, so the first thing I wanted to explore was the layering of graphic images to get a 'look' to a page that you just can't get with conventional HTML. Normally you can use a repeating pattern as a background for a Web page. This page, for instance, is a good example of a tiny GIF file that is stepped and repeated to fill the entire page with negligible file size overhead.

Absolute necessities

Absolute positioning with CSS is fairly easily understood and works in browsers as far back as Netscape 4.x - that is, provide that the elements are positioned relative to the top, left corner of the page. CSS allows you to set the absolute position of element using 'bottom' and 'right' too so, for instance, you can have a navbar that sticks to the bottom edge of the browser window. It's like having a constant 'footer' on the page, in fact, this principle makes the use of frames, and all their many disadvantages, virtually redundant.

Relatively speaking

Relative positioning in CSS is one of those concepts that confuses even the most experienced of designers - and the browser programmers too it would seem. The big question is 'relative to what?' In theory, when you place a box using relative positioning, it 'relates' to whatever is above it and to the left margin so, if you put one box on a page, it floats to the top like a block of polystyrene in water.

Padding anomalies

The other major 'gotcha' you have to watch for is with box padding, which is counter-intuitive by specification - and most browsers get it wrong. Unlike table cells, padding for CSS boxes goes 'outside' the box size you specify, according to the official specs. Mozilla/Netscape 7 and Explorer handle this quite differently. For best multi-browser compatibility, I found that I had to avoid using padding altogether.

CSS boxes generally want to stack one on top of the other. When you need to produce multi-column layouts, you can use 'float-left' and they should end up side-by-side instead. Giving each box a 'margin' value takes care of the column gutters. If you wrap the whole lot inside an outer containing box of an appropriate fixed pixel or percentage width and specify 'auto' for its left and right margins, the whole thing should centre nicely on the page - but set the body text-align property to 'center' too for best compatibility across browsers.

How did the browsers do?

Having designed and marked-up all my pages and tested them in Mozilla, I tried them in Internet Explorer 5.1.5 on my Mac. Luckily, most things worked right off and if they didn't, my previous tips about avoiding the 'margin' property of boxes and not assuming default behaviours of nested boxes took care of the nasties. Browsers used for testing Netscape 4.78 Mac Netscape 7 PR1 Mac Mozilla 1.1 Mac Mozilla 1.0 Windows Explorer 5.1.5 Mac Explorer 5.5 Windows Explorer 6.0 Windows Opera 6.05 Windows iCab Preview 2.8.1 Mac I then moved over to Explorer 6.0 on my Windows XP machine and was pleasantly surprised.

The Crunch!

If you really need to reach Opera, iCab and Netscape 4.x surfers, it is best to stick to conventional table-based layouts and use CSS only for specifying type within the table cells. Netscape 4.x is too long in the tooth to worry about and getting rarer by the day, but the other two are current versions and really should be able to render CSS a lot better than they do. CSS gives designers many new possibilities, and lots of new headaches.

Testing method

Each of the twenty pages of the site was viewed in the various browsers three times over a period of one week and then given the following scores. The best possible score is twenty times five (100). Except for minor tweaks and avoiding some known browser bugs as mentioned above, no attempt was made to cater for substandard CSS rendering. 5 – for a perfectly rendered page 4 – near perfect rendering but minor cosmetic glitches 3 – rendered but with elements in the wrong place 2 – broken, but readable 1 – too badly broken to be of any use As Mozilla 1.x (Mac and PC) and Netscape 7 produced identical results, only one is included.

Adobe GoLive 6.0

WPDFD was put together with GoLive mostly. I like its drag and drop interface and I feel that it has a more 'sympathetic' interface for people who are visually inclined 'right brainers'. Sure, it won't suit everybody, but it's nice to have a choice. GoLive has a very good interface for creating CSS-based pages, I've always preferred it for that over Dreamweaver. GoLive has the ability to drag 'floating boxes' onto the page, reposition them and resize them.

Macromedia Deamweaver MX

Dreamweaver faired a lot better than GoLive when it came to displaying pages laid out with CSS but it's still some way behind what modern browsers are capable of. It uses the term 'layers' to describe CSS boxes, which is a little confusing as these elements behave quite differently from 'layers' in any drawing program or Flash. They are all on the same 'layer' unless you assign a different z-index value to them.

Zapping Cached Pages

Okay, you are certain that you have uploaded an updated page to the server but your browser still displays the old one, what's going on? You know about the browser's cache and you have gone into the preferences dialog and cleared the cache files - but the browser still shows the old page when you know you've changed it. You close down the browser and launch it again, that should get rid of the old page - but it doesn't - it still shows up!