« January 2004 | Main | June 2004 »
I’m off to San Francisco to speak at the Web Design track of Digital Design World. So updates may be even fewer and farther between than they have been over the past month or so. Maybe I’ll see some of you there. Please come say “Hi” if you are attending!
Posted by Mark at 11:36 AM
My blog uses a CSS2 pseudo-element and pseudo-class to create three centered bullets before each day of posts. But I don’t want them to appear before the first set of posts on the page, so I use another rule to eliminate them in that case. The CSS looks like this:
#content h2:before {
content: "\2022 \2022 \2022";
text-align: center;
font-weight: bold;
display: block;
margin-bottom: 1.5em;
color: #d0d3da;
font-size: small;
text-shadow: none;
}
#content h2:first-child:before {
content: "";
}
The first rule says that any second level heading inside of anything with an ID of content should have 3 centered light blue-gray bullets put in front of it. There should be no text-shadow applied to the bullets (which are indicated by their HEX equivalents, 2022). The display: block; declaration is important as it is what causes the bullets to be rendered above the heading rather than preceding it on the same line.
The second rule tells the browser to display nothing above any second level headings that are also a first-child.
This works in Mozilloid browsers and in Safari 1.1.1. I believe it also works as intended in Opera. All IE variants ignore it.
After downloading the latest update to Safari, however, I noticed that it was no longer rendering these bullets. I had also played with the template a bit, so I checked things out in Firebird as well. I had indeed created a situation where every instance of a second level heading was also a first-child by inadvertently nesting it inside of a DIV in the template. So the browsers were correctly following the second rule, and not rendering any bullets anywhere.
Once I fixed the template, I noticed the Safari bug. Instead of rendering the bullets above the heading, it renders them next to it, on the same line (click image for a full-sized screen capture):
Safari 1.1.1 (and Firebird) still does everything correctly (click image for a full-sized screen capture):
What appears to be happening is that the latest version of Safari is ignoring the all important display: block;, since it also adds the bottom margin to the heading and centers everything (note that the heading is left-aligned, as intended, in the second screen capture). Curiously, the first heading on the page is centered and has the extra bottom margin, but no bullets.
I’ve reported the bug to Apple...
Update: Dave Hyatt reports that he has a fix!
Posted by Mark at 11:39 AM
Jeffrey Zeldman points out that the CSS validator is incorrectly labelling sites that use Tantek Çelik’s Box Model Hack, and specify a media type of "screen", invalid. See, for example the CSS Validator’s report on A List Apart. At issue is the possible conflict of an aural declaration in the midst of a screen CSS file. Doug Bowman points out that it should not return an error, but rather a warning. He suggests we take the opportunity to be a bit rebellious. That may be fine for personal sites, like blogs and such, but clients to whom you’ve promised valid sites may not relish the thought.
Dave Shea points out that you can route around the CSS validator by sending it the URL to the CSS file, rather than the (X)HTML file that applies it. This works unless you use multiple CSS files.
Other, potentially labor intensive options are outlined in Jeffrey’s post, and when it gets posted to A List Apart tomorrow, I’m sure there will be other ideas about what you can do.
Personally, I try to avoid the hack as much as possible, designing around it where I can.
Posted by Mark at 01:50 PM