Making a basic CSS (font stylings) compatible with MAC

[adamr1001]

Hi - novice HTML-CSS peson here.

I've got some a CSS file contained font stylings and I'd like to make sure htat its compatible with MACs.

What do I do?

Thanks in advance.





the code is posted below.

<style type=&quot;text/css&quot;>
<!--
a.nav:visited {font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; font-weight: bold; text-decoration: none;}
a.nav:link {font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; font-weight: bold; text-decoration: none;}
a.nav:active {font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #FF9900; font-weight: bold; text-decoration: none;}
a.nav:hover {font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #FF6600; font-weight: bold; text-decoration: none;}

a.sub:visited {font-family:arial, san serif; font-size: 12px; color: #009900; font-weight: bold; text-decoration: none;}
a.sub:link {font-family:arial, san serif; font-size: 12px; color: #009900; font-weight: bold; text-decoration: none;}
a.sub:active {font-family:arial, san serif; font-size: 12px; color: #FF6600; font-weight: bold; text-decoration: none;}
a.sub:hover {font-family:arial, san serif; font-size: 12px; color: #FF6600; font-weight: bold; text-decoration: none;}

td {font-family:arial, san serif; font-size: 11px; color: #000000; text-decoration: none;}
.songtext {font-family:arial, san serif; font-size: 12px; line-height: 18px; color: #000000; text-decoration: none;}

.lyrics { font-family:arial, san serif; font-size: 12px;
line-height: 14px; color: #000000; text-decoration: none;}

.head {font-family:arial, san serif; font-size: 16px; color: #000000; text-decoration: none;}

p.bodytext {text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold;}
.bodytextgreen {color: #009900;}
.bodytextred {color: #ff0000;}

.input_labels { font-family : Arial, Helvetica, sans-serif; font-weight : bolder; font-size : 10pt;}

.button_header { font-family : Arial, Helvetica, sans-serif; font-weight : bolder; font-size : 11pt;}

.input_values { border : 1 solid Black; width : 140px;}

.congrats_labels { font-family : Arial, Helvetica, sans-serif; font-weight : bolder; font-size : 12pt; color: #009900;}

.congrats { font-family : Arial, Helvetica, sans-serif;
font-weight : bolder; font-size : 12pt; color: #ff0000;}

.congrats_instasong { font-family : Arial, Helvetica, sans-serif; font-weight : bolder; font-size : 13pt; color: #00aa00;}

.required { font-family : Arial, Helvetica, sans-serif;
font-weight : bolder; font-size : 12pt; color: #ff0000;}

.description { color: #ff0000;}

.giftlyrics { font-family:arial, san serif; font-size: 12px; line-height: 15px; color: #ffffff; text-decoration: none; text-align: center;}

.gift_merry_christmas { font-family:arial, san serif; font-size: 18px; font-weight: bold; line-height: 15px; color: #ffffff; text-decoration: none; text-align: center;}

.gift_sender { font-family:arial, san serif; font-size: 14px; font-weight: bold; line-height: 15px; color: #ffffff; text-decoration: none; text-align: center;}

-->
</style>

 

[philote]

It should be compatible with Macs. For the font family you start specific and get more generic, that way if the user doesn't have the specific font, their browser will choose one from the family you specify. For example, in one spot you have Arial, Helvetica, sans-serif. The browser will use Arial font if it has it available, if not it will use Helvetica, and if it doesn't have that it will choose a font that it has available that is in the sans-serif family. See

http://www.w3.org/TR/CSS2/fonts.html#propdef-font-family

for more details.

Also, in some of your styles you have san-serif instead of sans-serif. You're also missing the hyphen between sans and serif in some of your styles.

Kevin
A+, Network+, MCP

 

[adamr1001]

thanks a lot for your reply - i'll look over those typose carefully.

the specific problem i am having with macs, is that after a link has been clicked, it shows up a being purple with an underline. i thought i addresss this issue but someone recommended to me that there is something specific i have to do to fix this with macs.

thanks for your help.

 

[Vragabond]

In order for pseudo classes link, :visited, :hover, :active) to work, you must specify them in the exact order (the one I just showed). If you do not wish to style a specific class you can skip it, but if you use them, always use them in the correct order.

You have :visited above :link and :hover below :active. Change these and it should work. Hope it helps.

 

[BillyRayPreachersSon]

*grin*

Here's one I posted earlier:

When using the :hover and :visited pseudo-classes, you should declare visited first, and then hover.

To quote the W3C website:

&quot;Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.&quot;.

There is a very, very good read on selectors, which I found numerous good tips in:

http://www.w3.org/TR/CSS2/selector.html

Hope this helps!

Dan

 

[adamr1001]

okay - i've got the correct order - but in netscape the text is coming out blue with an underline?... grr....

a.nav:link {font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; font-weight: bold; text-decoration: none;}
a.nav:visited {font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; font-weight: bold; text-decoration: none;}
a.nav:hover {font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #FF6600; font-weight: bold; text-decoration: none;}
a.nav:active {font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; font-weight: bold; text-decoration: none;}