21 replies [Last post]
aryastark
Offline
Regular
Last seen: 15 years 17 weeks ago
Joined: 2004-07-22
Posts: 18
Points: 0

i've got a webpage using css but i realised that the text looks different on a Mac and a PC. eeeps....is that normal?

arya Shock

co2
co2's picture
Offline
Leader
UK
Last seen: 11 years 31 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

~does css look different on a MAC and PC~

Depends on what you mean by different? Do you mean a totally different font on each system? Or the same font but looks to have different attributes (size etc.)?

The next sentence is true. The previous sentence is false. Discuss...

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

Re: ~does css look different on a MAC and PC~

aryastark wrote:
i've got a webpage using css but i realised that the text looks different on a Mac and a PC. eeeps....is that normal?

All versions of all browsers seem to have their own little peculiarities and unique problems, and Mac browsers are no exception. Having said that, most recent Mac browsers are a darn sight more standards-compliant than IE on a PC! I primarily use FireFox on a Mac and it is bl**dy brilliant!

Two things you need to bear in mind on a Mac are that the typical Mac monitor is set-up for graphics perfection and so the gamma setting ( usually 1.8 ) gives a lighter (but truer and with better tonal definition) picture than the typical PC monitor.

The other thing is that the typical Mac has superior font smoothing to the typical PC, so if like me you work on a Mac, you need to understand that many PC users (who won't know how to configure font smoothing) will see 'bitty' fonts that look horrid next to what Mac users are used to.

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

aryastark
Offline
Regular
Last seen: 15 years 17 weeks ago
Joined: 2004-07-22
Posts: 18
Points: 0

~does css look different on a MAC and PC~

sorry, was referring to the active links on the page. it's all working fine on a PC but on a Mac the active links are smaller in point size than the normal text, but the strange thing is i only have text size 12px specified.

i also used this tag:

.textbold
{
font-size: 12px;
font-color: #000000;
font-weight: Bold;
text-decoration: none;
font-family: Times New Roman,Arial,Verdana,Sans Serif;
}

but it dun work on a Mac.

are my font tags arranged correctly?

arya

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

~does css look different on a MAC and PC~

aryastark wrote:
are my font tags arranged correctly?

Without looking any deeper I can immediately see that you need to enclose Times New Roman in quotes, thus:

font-family: "Times New Roman",Arial,Verdana,Sans Serif;

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

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

~does css look different on a MAC and PC~

...and then you need to understand pseudo-classes. See > http://www.w3schools.com/css/css_pseudo_classes.asp

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

aryastark
Offline
Regular
Last seen: 15 years 17 weeks ago
Joined: 2004-07-22
Posts: 18
Points: 0

Re: ~does css look different on a MAC and PC~

Two things you need to bear in mind on a Mac are that the typical Mac monitor is set-up for graphics perfection and so the gamma setting ( usually 1.8 ) gives a lighter (but truer and with better tonal definition) picture than the typical PC monitor.

The other thing is that the typical Mac has superior font smoothing to the typical PC, so if like me you work on a Mac, you need to understand that many PC users (who won't know how to configure font smoothing) will see 'bitty' fonts that look horrid next to what Mac users are used to.

yeah i've noticed! the fonts looks super smooth on a Mac yum yum!

the prob i'm having now is - the Mac dun seem to read the BOLD tag. then again, i might had all the tags done wrongly...

aryastark
Offline
Regular
Last seen: 15 years 17 weeks ago
Joined: 2004-07-22
Posts: 18
Points: 0

~does css look different on a MAC and PC~

roytheboy wrote:
aryastark wrote:
are my font tags arranged correctly?

Without looking any deeper I can immediately see that you need to enclose Times New Roman in quotes, thus:

font-family: "Times New Roman",Arial,Verdana,Sans Serif;

dun hit me for asking but why are the quotes needed for 'Times New Roman'?

arya

co2
co2's picture
Offline
Leader
UK
Last seen: 11 years 31 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

~does css look different on a MAC and PC~

Try font-weight: bold; rather than Bold... CSS is case-sensitive, and all attributes need to be lower-case.

The quotes are needed because the browser cannot interpret the spaces in the font name as being part of the font name (so, expects it to another declaration after the word Times.

Smile Smile

The next sentence is true. The previous sentence is false. Discuss...

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

~does css look different on a MAC and PC~

Thanks co2, I had to pop out.

Another thing: why are you picking a primary font of TNR with other fonts that are sans-serif? This might be better > font-family: "Times New Roman", Times, serif;

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

aryastark
Offline
Regular
Last seen: 15 years 17 weeks ago
Joined: 2004-07-22
Posts: 18
Points: 0

~does css look different on a MAC and PC~

co2 wrote:
Try font-weight: bold; rather than Bold... CSS is case-sensitive, and all attributes need to be lower-case.

The quotes are needed because the browser cannot interpret the spaces in the font name as being part of the font name (so, expects it to another declaration after the word Times.

Smile Smile

this is really frustrating, working on a Mac...

i changed the "Bold" to "bold" but the following still doesn't work on a Mac:

.textbold
{
font-family: "Times New Roman",Arial,Verdana,Sans Serif;
font-size: 12px;
font-weight: bold;
font-color: #000000;
text-decoration: none;

}

the line of text that i've used the above tag on is displayed in the normal default Times New Roman font, with really huge font size and unbold.

halp.....

co2
co2's picture
Offline
Leader
UK
Last seen: 11 years 31 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

~does css look different on a MAC and PC~

Looks good to me... can you post your HTML and the rest of the CSS... something maybe afoot!?

Oops. Just spotted: it's Sans-serif, with a hyphen... not Sans serif.

The next sentence is true. The previous sentence is false. Discuss...

seb
Offline
Enthusiast
Last seen: 12 years 42 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

~does css look different on a MAC and PC~

replace Sans Serif with sans-serif.

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

~does css look different on a MAC and PC~

aryastark wrote:
the line of text that i've used the above tag on is displayed in the normal default Times New Roman font, with really huge font size and unbold.


Read my link. You probably need to specify formatting for the anchor like this, or it will be overruled by other instructions (css or browser):
a.textbold
{
font-family: "Times New Roman",Arial,Verdana,Sans Serif;
font-size: 12px;
font-weight: bold;
font-color: #000000;
text-decoration: none;
}

Also, learn about CSS shorthand.

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

co2
co2's picture
Offline
Leader
UK
Last seen: 11 years 31 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

~does css look different on a MAC and PC~

roytheboy wrote:
aryastark wrote:
the line of text that i've used the above tag on is displayed in the normal default Times New Roman font, with really huge font size and unbold.


Read my link. You probably need to specify formatting for the anchor like this, or it will be overruled by other instructions (css or browser):
a.textbold
{
font-family: "Times New Roman",Arial,Verdana,Sans Serif;
font-size: 12px;
font-weight: bold;
font-color: #000000;
text-decoration: none;
}

Also, learn about CSS shorthand.

Definitely, it'll make life much easier:

a.textbold
{
font: bold 12px/14px "Times New Roman",Arial,Verdana,sans-serif;
color: #000;
text-decoration: none;
}

Looks much nicer! Smile

Also, just noticed you've used font-color.... this should be color instead.

The next sentence is true. The previous sentence is false. Discuss...

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

~does css look different on a MAC and PC~

co2 wrote:
Also, just noticed you've used font-color

Isn't it amazing how many obvious things you can miss when they're staring you in the face :oops: Laughing out loud

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

co2
co2's picture
Offline
Leader
UK
Last seen: 11 years 31 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

~does css look different on a MAC and PC~

I know, countless times I've scoured my code for problems, and it's a pesky ';' instead of ':' or something. Human-error... always to blame. :roll:

The next sentence is true. The previous sentence is false. Discuss...

aryastark
Offline
Regular
Last seen: 15 years 17 weeks ago
Joined: 2004-07-22
Posts: 18
Points: 0

~does css look different on a MAC and PC~

hi all,
thanks much for ya tips - will try it out!

arya Laughing out loud

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

~does css look different on a MAC and PC~

You've specified a specific font size for the the anchor links - but have you done the same for the other text? If not, the user will have control of the sizing and it may be set higher than the 12px you have specified for the anchors. This could be true on PC or Mac.

takuhii
takuhii's picture
Offline
Regular
Last seen: 11 years 48 weeks ago
Joined: 2003-12-23
Posts: 19
Points: 0

~does css look different on a MAC and PC~

co2 wrote:
roytheboy wrote:
aryastark wrote:
the line of text that i've used the above tag on is displayed in the normal default Times New Roman font, with really huge font size and unbold.


Read my link. You probably need to specify formatting for the anchor like this, or it will be overruled by other instructions (css or browser):
a.textbold
{
font-family: "Times New Roman",Arial,Verdana,Sans Serif;
font-size: 12px;
font-weight: bold;
font-color: #000000;
text-decoration: none;
}

Also, learn about CSS shorthand.

Definitely, it'll make life much easier:

a.textbold
{
font: bold 12px/14px "Times New Roman",Arial,Verdana,sans-serif;
color: #000;
text-decoration: none;
}

Looks much nicer! Smile

Also, just noticed you've used font-color.... this should be color instead.

sorry I've already posted this query in another forum. Hush my mouth!

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

~does css look different on a MAC and PC~

it sets the font-size to 12px and the line-height to 14px

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Re: ~does css look different on a MAC and PC~

roytheboy wrote:
The other thing is that the typical Mac has superior font smoothing to the typical PC, so if like me you work on a Mac, you need to understand that many PC users (who won't know how to configure font smoothing) will see 'bitty' fonts that look horrid next to what Mac users are used to.

I set this up once, but it looked manky Laughing out loud I guess it will look superb once I get my TFT, but on a CRT at 1152, it made em look blurry.

Verschwindende wrote:
  • CSS doesn't make pies