February 06, 2004
Safari Bug
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 on February 6, 2004 11:39 AM