Safari problems

Boris told me that this site does not render well in Safari [Think KHTML]. It seems to be a problem in styling the first-letter psuedo-element of a heading-level block element. I style my <h2> using these css rules:

.post h2 {
clear: right;
}
.post h2:first-letter {
font-family: tahoma, arial, verdana, sans-serif;
text-transform: lowercase;
font-size: 2.7em;
}

Safari seems to reproduce the entire h2:first-letter again as h2. It frankly looks very odd as my headings overflow all around the page. This seems to be a bizzare variation of the bug described by diveintomark here: Safari information for web designers (Scroll down to CSS Rendering bugs, no.2) and demonstrated here.

Some screenshots that Boris sent me: [Safari Bug SS 1, Safari Bug SS 2]

Leave a Reply

Create a website or blog at WordPress.com