The Quagmire

Despite having seen what it's done to Owen's spare time in the past year, I'm jumping into the quagmire of public CSS testing, prompted by problems encountered by James. This testing was all done in a Mac environment, using Netscape 6.2, Opera 5 and Internet Explorer 5.1. Thanks to Codebitch for some timely tips. Further testing across platforms may happen as time allows... or it may not.

Test the First

This is James's original design (for a weblog), modified by me here to make it generic in appearance. To see what's going on, first have a look at the background image (1200x320). James has dropped a fade into the middle of the image stripe to serve as background to the text, and has put three headings into the image itself to get more control over their appearance. The top half of the image is white, to match the page background.

In this original trial page (and first style sheet) he has assigned a pale purple background colour to a couple of classes to better show what is happening to the boxes. I'll remove those at the end, but keep them for now.

To quote his plaintive email: "Why doesn't this work? i.e. Why does the second paragraph of each entry shift to the right? Why is there such a big gap after the layer and before the dotted line image? Why does the main text box expand to the right, messing everything up?" James uses IE5.1 as his browser of choice, as do many Mac users.

First things first: a validation reveals the need for a valid doctype, ALT tags on the images, letters at the start of id names in certain divs (they can't start with numbers), and a couple of missing semi-colons in the style sheet. All easily fixed (although I was quick-and-dirty with the ALT tags).

Next, the unwanted indenting of the paragraphs. This turns out to be a problem only in IE5.1; in Netscape 6.2 and Opera 5, no such indenting occurs. Experimenting with the CSS revealed that for some reason the <p> tags after the first one inside the textbox div were inheriting the 'left:40px' and adding it to the left:40px of the textbox div itself (confirmed by tweaking it to other values, like 60 or 80px).

The fix is to use 'margin-left:40px' instead, which works in all three browsers.

Next: change 'left:300px;' to 'left:299px;' in the whitebox div to account for the 1 pixel widths of the borders in lining up with the background graphic.

With this change the whitebox div looks properly aligned with the background (check here, and the style sheet), but the right border of whitebox is still 20px too far to the right. This is because the padding value is added to the width value of a box, not included in it.

There's an important caveat, however. If your HTML isn't valid, things can go haywire. Until I added a valid doctype to the page with a doctype url (in contrast to, say, the doctype declaration at the HTML4.01 spec itself), IE5.1 was including the padding within the width setting of whitebox—because it was operating in 'quirks' mode—whereas Opera and Netscape were both still adding it to the width setting (have a look).

Now that we have this all straight, we can change the width of whitebox to 330px, putting the right border in the correct place in all three browsers (check here; style sheet). But note the sting in the tail: in IE5.1's quirks mode (i.e., leaving out the doctype URL), this would cause the border to be 20px too far to the left—and quirks mode emulates IE5 for Windows. Because James has the 330px wide longbar.gif and the 290px-wide textbar div sitting inside the whitebox, though, they push the border over to the correct position even if IE5.1 is in quirks mode, fixing that problem—by chance.

Finally, the gaps between paragraphs that James dislikes. These look different in the different browsers: in Netscape 6.2 they're not too bad, in IE5.1 a bit wider, in Opera 5 very wide (this isn't a bug, by the way; there's no reason why the default settings of these browsers should be identical). I've shrunk them a bit by adding 'margin-bottom:-30px;' to the textbox div, and by explicitly specifying top and bottom margins for paragraphs to be 9px.

The final result of these tweaks is Test the Second (style sheet).

Test the Second

Looks like it's all there, but as soon as we pile extra text into the template, another problem arises: have a look at this intermediate stage in IE5.1. The right border has been pushed over by a single pixel simply by adding extra text (to confirm that this is what's happening, I added the text to the existing paragraphs, rather than adding new paragraphs.)

Both versions look fine in Netscape 6.2 and Opera 5, by the way; this is an IE5.1 bug only. I haven't explored a possible fix yet.

As soon as we add more text, the question of page-scrolling arises. James wanted the background stripe and the right-hand columns of links to stay fixed on the page, so he modified the style sheet to set the background to 'fixed' and the three right-column divs to 'position: fixed;', which gives us Test the Third (style sheet).

Test the Third

It works beautifully in Opera 5 and Netscape 6.2, but in IE5.1 it's all gone pear-shaped (or should that be <div style="shape:pear;">). Fixing the right-hand column divs has meant that none of the links appear to work in IE5.1, which kind of defeats the purpose of having a sidebar. But they actually do work; it's just that now the mouse isn't changing to indicate that they're clickable. Adding 'cursor:pointer;' to the hover properties, or to the sidebar divs, does nothing to fix this, either. The only solution would appear to be some sort of javascript hack, or letting it all scroll. A shame, from an aesthetic point of view at least, because this is one case where usability really does matter.

Let's have a look at this fixed version without the purple background colours to see the intended effect:

Test the Fourth

Nice. In Netscape 6.2 and Opera 5, anyway; in IE5.1 it's almost there, apart from that single pixel misalignment and the sidebar links cursor bug. (One last issue crops up: there's not much room to breathe at the end of the page in Opera and Netscape, where the whitebox border sits along the very bottom of the page; IE5.1 inserts some whitespace automatically. But I'll save that one for another day.)

 

15 March 2002
last modified 16 March 2002
·····

Front · Past · Detail · Found · Rory Central · Textuary · Walking West · Grinding Noises · Cartoon Lounge · The Stand-Up · The Twisted Bell · Pacific Islands Politics
©2002 Rory Ewins