It's not hard to get an appreciation for the things designers take for granted following Tantek's experiments with undohtml.css, Eric Meyer's extended thoughts on Mozilla's default styles, and 5 minutes of poking around the web without Firefox's html.css. A look at this site conjured feelings of guilt and laziness for having not created a more explicit stylesheet, one that more accurately specifies exactly the kind of look I'm going for.
It's not as bad as it looks.
It turns out that 90% of the ugliness caused by disabling html.css (on 90% of the non-table-based sites I visited, including this one) is due to the lack of styles explicitly specifying block elements, an oversight that causes everything to appear inline. It's a mess. The following CSS mimics Mozilla's default block-level settings:
/* block elements */
html, body, div, map, dt, isindex, p, multicol,
dl, dd, ul, menu, dir, ol, blockquote, address,
center, listing, plaintext, xmp, pre, hr, marquee,
h1, h2, h3, h4, h5 {
display: block;
}The above list contains non-standard and deprecated elements, but represents the full list of Mozilla's defaults. Add/remove elements to taste. I've created a file called default.css containing these rules, which I'm now importing into this site's primary stylesheet.
I've also included Mozilla's styles for elements hidden by default, taken directly from html.css:
/* hidden elements */
area, base, basefont, head, meta, script, style, title,
noembed, noscript, param {
display: none;
}There are several other things going on in html.css, but the above styles go a long way toward getting your pages to render as expected with the default styles disabled, which at least makes it easier to see what else you've taken for granted.
Update: Eric Meyer has some additional thoughts. His minimal stylesheet includes rules for tables and lists:
li {display: list-item;}
table {display: table;}
caption {display: table-caption;}
tr {display: table-row;}
col {display: table-column;}
colgroup {display: table-column-group;}
tbody {display: table-row-group;}
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
td {display: table-cell;}
th {display: table-cell;}I've moved li {display: list-item;} from my primary stylesheet, where I misplaced it before this entry, to my default.css. My current design makes no use of tables, but I've added Eric's table styles, too, just for the hell of it.
Evolt's "Ten CSS Tricks You May Not Know" is great stuff. The last of the ten tips describes a way of extending menu divs the length of neighboring content areas made popular by Dan Cederholm. But they get one thing wrong:
Unfortunately the only solution to this is to cheat, and assign the body a background image of exactly the same colour and width as the left column.
Not true. I've been using an alternative method to extend menu divs for over a year. The page you're looking at right now -- unless this site's design has changed since the day of this post, of course -- uses this technique.
It works by specifying the background color of body or a wrapper div to be the same as the desired background color of the menu, then offsetting the content div. No image necessary.