24 replies [Last post]
rhianwheeler
Offline
Regular
London
Last seen: 15 years 24 weeks ago
London
Joined: 2005-04-05
Posts: 13
Points: 0

Hello,
I've built a website in css but apparently the text in the left-hand navigation bar appear blurred on safari. I haven't been able to have access to a mac but was wondering if anyone had any ideas why this could be happening?
Many thanks in advance - it's all been done in css so I just can't undestand why it would look different.

http://www.yhsen.org.uk/who/who.html

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 26 weeks 3 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

safari and css

Rhian, please do not cross post. It infuriates me, and makes it difficult to answer your question.

Verschwindende wrote:
  • CSS doesn't make pies

rhianwheeler
Offline
Regular
London
Last seen: 15 years 24 weeks ago
London
Joined: 2005-04-05
Posts: 13
Points: 0

safari and css

sorry - I only realised I put the message in the wrong place to begin with.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

safari and css

Looks fine in Safari 1.3 here:

rhianwheeler
Offline
Regular
London
Last seen: 15 years 24 weeks ago
London
Joined: 2005-04-05
Posts: 13
Points: 0

safari and css

really - thankyou. Two people have told me it looks wierd.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

safari and css

Keep in mind that there are different Safari versions, with different CSS support. 1.3 is only available to Panther users. Safari 2 is only available to Tiger users. So users of Jaguar may have a lesser version of Safari and be seing things strange - I don't know for sure.

Ciryaquen
Ciryaquen's picture
Offline
Enthusiast
Last seen: 3 years 42 weeks ago
Timezone: GMT-8
Joined: 2005-03-15
Posts: 74
Points: 0

safari and css

It looks weird in Safari 1.2.4 compared to the way it looks in Firefox 1.0.4. I'll try to attach a screenshot. The letters look all blurry and like an outline font gone wrong.

I have no idea why though.

edited p.s. I'm using Panther aka X.3.8.

Total newbie and purely amateur webmaster...

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 8 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

safari and css

The text is not blurred; it has doubled-up. This is a known bug with Safari 1.2 but the good news is that most Mac OSX users keep up-to-date with browser versions.

I've got to go out now but I just found this with a very quick search > http://www.momathome.com/viewfromhome/2004/07/interesting_saf.php

Life's a b*tch and then you die!

rhianwheeler
Offline
Regular
London
Last seen: 15 years 24 weeks ago
London
Joined: 2005-04-05
Posts: 13
Points: 0

safari and css

I've just had a look on my mac mini and yes can see the problem. does anyone know of any hacks to solve this problem?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

safari and css

That's very interesting. What version of safari are you running on that mini?

Ciryaquen, you should upgrade your Safari - you'll have better compliance and performance.

rhianwheeler
Offline
Regular
London
Last seen: 15 years 24 weeks ago
London
Joined: 2005-04-05
Posts: 13
Points: 0

safari and css

I've only just bought it so I assume the latest version.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 26 weeks 3 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

safari and css

Incorrect Laughing out loud

For example, graphics card drivers on a CD become out of date as soon as the card leaves the factory.

Verschwindende wrote:
  • CSS doesn't make pies

rhianwheeler
Offline
Regular
London
Last seen: 15 years 24 weeks ago
London
Joined: 2005-04-05
Posts: 13
Points: 0

safari and css

ok I'll have to check. I'm not actually a mac user and it's my client that's alerted me to the issue. But even so it can't be that old a version which is worrying me. I've asked a few mac users and they seem to be seeing the same thing.

rhianwheeler
Offline
Regular
London
Last seen: 15 years 24 weeks ago
London
Joined: 2005-04-05
Posts: 13
Points: 0

safari and css

it's safari 1.2.4

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

safari and css

Okay, you must be running Panther then (OS 10.3). You'll want to upgrade to Safari 1.3 (free ugrade from Apple). You also may qualify for a free upgrade to Tiger (OS 10.4). It may cost around $19.95 for the DVD - but believe me it's well worth it.
But, none of this solves your problem. It does prove however, that Safari's CSS compliance is getting better. Have you tried changing the font size to pixels instead of points?

rhianwheeler
Offline
Regular
London
Last seen: 15 years 24 weeks ago
London
Joined: 2005-04-05
Posts: 13
Points: 0

safari and css

no it doesn't solve the issue. I need to have it in points because it's a goverment website for people with special educational needs so it's really important that the fonts aren't hard coded. Also where do I get the free safari 1.3 upgrade from? When I go onto apple the latest version they have is 1.2. The annoying thing about this is that the client is a mac user although the users will be pc users.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 8 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

safari and css

You don't want to be sizing text in points - seriously you don't! Read up on the advantages and disadvantages of the different methods of sizing text and you'll find out that points is one of the worst, especially where Macs are concerned.

Points are a unit of print and were what old-school designers like me used to use in the days of cow-gum and galley-proofs. They are meaningless on the web and are subsequently calculated by the browser according to many differing variables, which means that the end-result is very hit-and-miss from your point-of-view. Worst still, whilst PCs use a base-reference of 96 points per inch, the Mac OS has always worked to 72 points per inch (since before Windoze was first released), so you in particular are asking for trouble! Points are part of the CSS spec so that designers can set up stylesheets for printed output, that's all.

As for the Safari 1.2 bug: have you tried searching for more information? A quick look at the link I gave you last night suggests that you might be able to resolve the issue by changing the way your elements are positioned, nestled or floated. Surely you can google your way out of this one.

And one other thing: you should consider using lowercase for your CSS selectors, and validating all your HTML and CSS code as when you eventually switch to XHTML, things will be so much easier for you if you get into good habits now.

Life's a b*tch and then you die!

rhianwheeler
Offline
Regular
London
Last seen: 15 years 24 weeks ago
London
Joined: 2005-04-05
Posts: 13
Points: 0

safari and css

Thankyou. Yes it seems that points are the problem.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

safari and css

just change to ems then. Let us know how you make out.

Regarding the Safari upgrade, I just looked into it and you're right there's only a 1.2.4 upgrade available. But I'm betting that your system is 10.3.8 or lower. If it is then upgrade the system to 10.3.9 and Safari will be updated as well. The easiest way to do this is to use the Software Update option under the Apple menu.

rhianwheeler
Offline
Regular
London
Last seen: 15 years 24 weeks ago
London
Joined: 2005-04-05
Posts: 13
Points: 0

safari and css

Thanks .
I'll try it with ems and let you know. The curious thing is that it's only happening in the left-hand nav bar and not in the main text itself.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

safari and css

I'm guessing it has something to do with nested floats... But I have nothing to back my theory. Can you try taking the float off the #menu ul? Is it really needed? You've floated the #menu div for obvious reasons, but the ul will take up only the #menu width anyway. So there's no reason to float and declare a width on the ul - unless I'm missing something here.

rhianwheeler
Offline
Regular
London
Last seen: 15 years 24 weeks ago
London
Joined: 2005-04-05
Posts: 13
Points: 0

safari and css

thankyou - I'll try this - i'm not actually at my computer at the moment but will try this and let you know if it works.

rhianwheeler
Offline
Regular
London
Last seen: 15 years 24 weeks ago
London
Joined: 2005-04-05
Posts: 13
Points: 0

safari and css

Tried this an doesn't make any difference - also tried searching in google and no luck! This is so wierd.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

safari and css

You still have the point sizes in there...

Anonymous
Anonymous's picture
Guru

safari and css

rhianwheeler wrote:
...Also where do I get the free safari 1.3 upgrade from?..
Try the apple menu: