CSS1 Canvas

-as drawn by different browsers

-by Charles T. Low
-from: ctLow Home -> CSS1 Intercompatibility
-to: Canvas CSS1 - CSS1 Screenshots

Different browsers draw the canvas differently. I believe that the W3C doesn't altogether discourage this, but it does lead us to the issue of how accurately we can predict the appearance of web pages we design.

To help clarify this, I've done two things:

-written a simple web page, Canvas CSS1, with a few block-level elements in it -- further explanation below.
-posted a few screenshots of how the page appears in a few current and recent browsers.

Canvas CSS1

This web page illustrates several features of how any specific browser will display standard "block-level" structures. All of the blocks have both a 5 point margin and a 5 point padding (except the UL's -- I left their margins and paddings unaltered at the browsers' defaults). You will find them all listed by name on the page itself, with the color of their borders and backgrounds also listed, to compare against the actual display.

Once you display Canvas CSS1, you can examine both its HTML and CSS1 source codes, done on most browsers from the View menu. You will notice the following:

No browser draws the specified white border around the HTML element. IE5.5 doesn't draw the HTML element at all. (Some of the more recent browsers do, as of late 2002.) The HTML element could be considered the "canvas" on which everything else is drawn, althought the W3C admits that it doesn't expect even modern browsers to recognize this concept. So, the fact that some browsers at least do something with an HTML declaration is encouraging.
No browser puts the "HTML" label outside the BODY -- quite in line with W3C standards, which make the BODY tag optional -- all browsers should assume that everything after the HEAD is BODY, tag or none.
DIV's, P's and TD's all seem to handle margins and padding fairly well. You can copy the source code to your own web page program (I use WordPad and type everything in by hand), adjust them and see how the resulting page changes.
The UL in all browsers except N6.0 puts its bullets outside of its block. (Why?)
Modern browsers will draw a border on a TABLE, and give it a margin, but only N6 gives it padding. N6, however, doesn't give the padding its background color, but uses the color of the parent element (in this case, DIV). IE5.5 and Opera 5.02 find a tiny space for TABLE's background color, but beyond this don't recognize its padding value. The probable moral is: don't bother with TABLE padding.
The font size requires repeating for the TD element -- otherwise, it reverts from the BODY value to the browser's default -- and this occurs in all three browsers!

There are other minor display differences among the various web browsers, but nothing serious. N6 seems to require a window width of about 400 pixels before closing the right side of the various "containers" displayed on Canvas CSS1, even though none of them has text reaching even nearly that far -- not a big problem.

Screen shots

Here are a few screen shots of several web browsers displaying Canvas CSS1.

-by Charles T. Low
-from: ctLow Home -> CSS1 Intercompatibility
-to: Canvas CSS1 - CSS1 Screenshots