[fourstarcltv]

evening all,

i'm just trying to load an external css file by platform (in order to load a different font and size for pc and mac), i've set up the seperate
external css files, however i can't seem to get it to work. i've tried using massimo's css on platform extension for dreamweaver (http://www.massimocorner.com/dw/commands.htm) but to no avail.

the page in question is up here: http://www.fourstarcollective.com/to...rame_test.html

any help getting this working will be most appreciated.

cheers,

[malson]

Instead of two independent css files, would it be possible to put both declarations in a single css file and then decide which rule to apply by doing browser detection within an if...else statement? For a twisted and in no way functional example:

if (browser=mac), {td class="mactext}...

else {td class="pctext}...

Then continue with your page. Don't know the best way to implement this though. Maybe you'll get some ideas...

[fourstarcltv]

hmmm... i tried this also, but no luck.

i'm stuck.

anyone ?

[ilukas]

1) use some scripting language like php or use server side includes.

2) use a font that's cross-platform compatible (i.e., displays the same) like arial.

sorry to be of no help.

[Raman]

O.K. this is real easy to do in client side javascript. I'm doing it on my http://www.texacostationfinder.com website.

[script]
if (navigator.userAgent.indexOf("MSIE") != -1){
document.write("[link REL='stylesheet' HREF='/stationfinder.css' TYPE='text/css']");
}else{
document.write ("[Link Rel='stylesheet' href='/stationfindernn.css' type='text/css']");
}
[/script]

***Replace [ and ] with greater than and less than

Basically it asks if theres MSIE in the string. If so then it's probably IE so write out the Internet Explorer CSS. Otherwise assume it's Netscape so write out that CSS.

You will want to take it farther and check to see if it says "Windows" or "Mac" or "PowerPC" or something..

[Macola]

If font sizes are the main concern, why not just use pixels for the units instead of points? There really shouldn't be any compelling reason to have platform-specific CSS.

[fourstarcltv]

Originally posted by Macola:
If font sizes are the main concern, why not just use pixels for the units instead of points? There really shouldn't be any compelling reason to have platform-specific CSS.

the main reason is that i'm wanting to specify 'geneva' to be used on a mac, and 'arial' (or something similar) for pc.

geneva pixel size 9 renders quite differently on pc and mac.

thanks for the tip anyway.

cheers,

[Simon Mundy]

Originally posted by fourstarcltv:


the main reason is that i'm wanting to specify 'geneva' to be used on a mac, and 'arial' (or something similar) for pc.

geneva pixel size 9 renders quite differently on pc and mac.

thanks for the tip anyway.

cheers,

I reckon you've got buckley's chance of seeing Geneva on a PC! If you just put something like this:-

p { font-family: geneva, arial, sans-serif; font-size: 10px }

then you should have no dramas at all.

Geneva will always be your first choice, then since no PCs have it, the next choice will be Arial, if Arial's not available then the browser will determine the best sans-serif font to use from the user's preferences.

[Raman]

Originally posted by Simon Mundy:


I reckon you've got buckley's chance of seeing Geneva on a PC! If you just put something like this:-

p { font-family: geneva, arial, sans-serif; font-size: 10px }

then you should have no dramas at all.

Geneva will always be your first choice, then since no PCs have it, the next choice will be Arial, if Arial's not available then the browser will determine the best sans-serif font to use from the user's preferences.

The good thing about that is *if* the PC user somehow has the geneva font then they'll have the pleasure of seeing the site the way the designer *really* wanted!

[york28]

I would say that the list of fonts in the definition followed by the family type is the best way to go. I would try to avoid designing a site around a certain font, however, if you know that the majority of your visiters will not have it installed.

But the code posted above differentiated between MSIE and others, which isn't going to always be enough. IE on the Mac and IE on the PC display certain CSS differently.

Luckily, tho, the frame you're dealing with is just text, or mostly text, so a little bit of difference won't kill anything. I might be wrong, but I think the biggest problem with fonts is that different fonts displayed in the same point size will sometimes be different sizes.

Does anyone know of a page that lists what fonts are usually available on both platforms? For a while I had thought that Verdana was, but it's not. What about Myriad?

[hyperizer]

I believe the <a href="http://www.fontscape.com/explore?8HR">Microsoft Web fonts</a> are installed by default on both Wintel and Mac machines (but generally aren't on Linux boxes). Unfortunately, Microsoft <a href="http://www.microsoft.com/typography/fontpack/default.htm">recently discontinued</a> their free distribution as a download.

[Millennium]

Originally posted by hyperizer:
I believe the <a href="http://www.fontscape.com/explore?8HR">Microsoft Web fonts</a> are installed by default on both Wintel and Mac machines (but generally aren't on Linux boxes). Unfortunately, Microsoft <a href="http://www.microsoft.com/typography/fontpack/default.htm">recently discontinued</a> their free distribution as a download.

Although Microsoft has discontinued their distribution, you can still get them legally from other places, if you know where to look. I think someone has them on SourceForge.

In general, the fonts which come with Word are also semi-safe bets, given Word's ubiquity, but do be sure to have a good fallback font that's more widely available. Bickley Script and Bradley Hand (which come with both Word and AppleWorks) are great replacements for BrushScript and Comic Sans, but here you need to be very careful because they go by slightly different names in Word and AppleWorks (you'll need to use both, listing the AppleWorks name first) and you should have BrushScript and Comic Sans ready as fallbacks.

In general, you can do pretty much whatever with fonts, as long as you have a chain of fallbacks in mind to get a good approximation for users who don't have your fonts. Here's what I tend to go with, though the list is simplified since I don't actually have any of my CSS on hand at the moment...

• Times, Times New Roman, serif
• "Nu Sans", Helvetica, Arial, Verdana, sans-serif
• "Bickley Script", "New Berolina MT", BrushScript, cursive
• "Bradley Hand", Tekton, "Comic Sans MS", fantasy
• Monaco, Courier, "Courier New", monospace

That's the basics of my chain, anyway. This method isn't for everyone, of course, but it can let people who don't have your exact fonts get a pretty good approximation, without bloating your page via the use of text images.

As for font sizes, you're in trouble, I'm afraid. Specifying in terms of pixel size will screw up Opera (which doesn't have the sense to call a pixel a pixel on the Mac) and IE (which can't resize fonts if you specify their size in pixels). If you do decide to go with pixel-based font sizes, I would define only the main font with pixels, and then specify all the other font sizes relative to that. This way, if you decide to make the page a bit bigger or smaller, it's much easier to get it all in one go while keeping the proportions the same.

[t_hah]

Here is another useful CSS info page for different browser types out there:

http://www.webreview.com/style/css1/...stergrid.shtml

t