Quantcast
You are not logged in, click here to log in.
10 Replies Last post: Feb 5, 2004 7:54 AM by Christian_Jack  
Click to view Christian_Jack's profile Member 451 posts since
Oct 11, 2001
Reply

Feb 3, 2004 5:44 AM

Safari & CSS, not rendering?

I have a website that uses CSS.

When I view my site in Safari, it does not render the h2 headings with the Apple Chancery font. I know the CSS is coded right because it aligns h2 header in the center as stated in the CSS and i also get the background image.

I also know that it works because Firebird, IE render the pages as they should.

Also on Windows IE, Netscape and Firebirds all render it with a Windows specific font.

I thought Safari was standards compliant or am i doing something wrong!!!


thanks CJ
Reply
Click to view AKS9's profile Member 281 posts since
Jan 25, 2002
1. Feb 3, 2004 10:25 AM in response to: Christian_Jack
Re: Safari & CSS, not rendering?
The only way for us to help you is if you post the (X)HTML and CSS here for us to see (just the h2 parts).
Click to view AKS9's profile Member 281 posts since
Jan 25, 2002
3. Feb 3, 2004 2:15 PM in response to: Christian_Jack
Re: Safari & CSS, not rendering?
All font names with whitespace must be enclosed in "". If it doesn't have any whitespace, there is no need to, so you should have this:

<pre>code:<hr>
h2 {
color:black;
font-family: "Monotype Corsiva", "Apple Chancery";
}</pre><hr>


It's also a good idea to include a generic font family at the end, incase the UA doesn't have any of the fonts:

<pre>code:<hr>
h2 {
color: black;
font-family: "Monotype Corsiva", "Apple Chancery", cursive;
}</pre><hr>


Also, although this probably isn't related to your problem,

<pre>code:<hr>
h2 {text-align: center}
</pre><hr>

Should be combined with the previous one, to make

<pre>code:<hr>
h2 {
color: black;
font-family: "Monotype Corsiva", "Apple Chancery", cursive;
text-align: center;
}</pre><hr>

Work?
Click to view AKS9's profile Member 281 posts since
Jan 25, 2002
5. Feb 4, 2004 11:30 AM in response to: Christian_Jack
Re: Safari & CSS, not rendering?
I tried it out - and I think you're right, it is Safari's fault. I tried a bunch of font names, and some worked, some didn't, and I can't figure out why some work and why some don't. Another annoying thing I found out is that Safari doesn't support the generic font families "cursive" and "fantasy". You should write a bug report about it (I will).
Click to view CountZero's profile Member 336 posts since
Jan 24, 2002
6. Feb 4, 2004 2:33 PM in response to: AKS9
Re: Safari & CSS, not rendering?
You can try removing the space between the words in the font name. I've read a thread on the TypePad User forum about it but can't find it right now...
Click to view griffman's profile Macworld Editorial 8,100 posts since
Jan 9, 2001
8. Feb 5, 2004 5:15 AM in response to: Christian_Jack
Re: Safari & CSS, not rendering?
They didn't use the Mozilla rendering engine because it was a big, bloated mess -- Mozilla admitted as much with Firebird, their new browser-only product with greatly cleaned up code.

Whatever the bug is, it goes beyond Apple Chancery -- try putting Apple Casual or Apple Chancery in any H-level CSS tag ... they all fail. I created a test case that I've sent off to Apple:
<pre>code:<hr><HTML>
<HEAD>
<TITLE>
testing
</TITLE>
<STYLE TYPE="text/css">
<

-rob.
Click to view AKS9's profile Member 281 posts since
Jan 25, 2002
9. Feb 5, 2004 6:51 AM in response to: Christian_Jack
Re: Safari & CSS, not rendering?
It's not like Apple created a new engine just for Safari, and made a huge mess in the browser world. They modified an existing one, it just didn't happen to be Gecko (KDE or Konqueror or something). It's not like Safari's CSS support is crap, it is one of the best, far better than any version of IE, tons better than Opera 6, and around as good as Gecko. It even supports some CSS that Gecko doesn't (the text-shadow pseudo selector doesn't seem to work in any browser apart from Safari). So

We just found a bug, that's all.

---

Ah cool. I tried out the cursive and fantasy generic font families on some <span>s, and they worked great, so yeah, the bug only affects <hn> tags; cursive and fantasy do work.