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 Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s