picture
Individual

Standards that aren’t

Warning: Nitpicky coding discussion ahead.
The Internet (or, as our President says, the “Internets”—but at least he doesn’t claim he invented it like that sneaky Al Gore) succeeded because it was, and still is, based on open standards. The “browser wars” are over, though Microsoft’s acceptance remains grudging. Among other advantages, compliance with the standards (HTML, CSS, and now XML and its derivatives) ought to assure the authors of web pages that their documents will work in every reasonably up-to-date browser.
Would that this were true.
The list below will look the way it’s supposed to in Safari and Omniweb. The numbers at the right are in “inline” boxes the code for which is included inside the delimiters of the outline items that they correspond to. In Firefox the numbers at the right are displayed outside their “containing” boxes,
firefoxlayoutbug.png
with the result that they arrange themselves in a staircase from right to left. Getting inline display right isn’t arcane; it’s basic—part of the “box model” in CSS2. That standard is ambiguous in places, but it’s clear that inline boxes go inside their containers. (Explorer 5 does an even worse job: it sucessively indents both the right and the left margins of the list items, and fails to recognize the transparency of the boxes containing the numbers. To see what web designers have to contend with, see Tantek’s CSS Examples.)
  • Mary loves John but he doesn’t love her.
    1
  • Mary loves him but John doesn’t love her.
    2
  • ?She loves him but John doesn’t love Mary.
    3
  • *She loves John but he doesn’t love Mary.
    4
Here’s the CSS.
ul.exhibit {
margin-top: .5em;
margin-bottom: .75em;
margin-left: 2em;
margin-right: 2em;
padding-left: 1em;
padding-right: 1em;
}
ul.exhibit > li {
background-color: #f4e4dc;
padding-left: 1em;
padding-right: 1em;
}
.numright {
display: inline;
float: right;
color: #bb4433;
}
.numright:before {
display: marker;
content: "(";
}
.numright:after {
display: marker;
content: ")";
}
All the browsers I test on support the :before and :afterpseudoelements”. None of them fully supports the marker options in CSS. They all ignore counters (apparently Opera 7 recognizes them).()
It’s now six years since CSS2 became a W3C standard. CSS3 is in the wings, along with other standards like XML (“extensible markup language”). But web designers can’t even take it for granted that CSS2 is fully supported. The last version of Explorer for Mac OS X is 5.2.3. From comments on this site I have learned that whoever wrote Explorer 5 did a poor job in implementing the box model. Floating boxes in particular are handled in a way different from all the other browsers I test on. I’ve just revamped the templates for this site so that it looks the same on every browser except Explorer, which perversely ignores the percentage sizes of the two columns and inserts a space between them. My advice to readers who are using Explorer 5 (): update or switch browsers. Use Safari, Firefox, Omniweb (get the beta of 5.1) or Opera, all of which handle web standards better and all of which have fewer security issues.
() The browser compliance tables at the WestCiv Stylemaster site, though not quite up to date (no Firefox, no Omniweb) give an accurate picture of improvements and remaining gaps in CSS2 support. Opera claims to support all of CSS2.1. People think that website designers don’t know what they’re doing; but no design is likely to look good over a 50% variation in font size, or in both a 240-pixel and a 960-pixel window.
() If you are forced to use Explorer 5, these pages will display more or less correctly if you decrease the Text Zoom (which is in the View menu); on the Mac, command-hyphen does the trick. Added 22 Dec 04: It looks as if there is a simple fix for Explorer 5 (thanks to Tantek): if you eliminate the optional “?xml prolog” then CSS layout has a better chance of being displayed correctly.

LinkDecember 17, 2004 in Web/Tech