trouble with my CSS

adamr1001 · Dec 15, 2003

hi, novice programmer here.
i cant seems to get it to work on all platforms and browsers...

specfically, a.nav & a.sub

help!!

thanks a bezillion in advance!

<style type="text/css">

</style>

MikeBronner · Dec 15, 2003

Does a.giftlink work? I might be wrong, but that doesn't look like valid syntax to me.

Instead it should be:

Code:

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


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

giftlink a:link {font-family:arial, san serif; font-size: 12px; color: #ffffff; font-weight: bold; text-decoration: none;}
giftlink a:visited {font-family:arial, san serif; font-size: 12px; color: #ffffff; font-weight: bold; text-decoration: none;}
giftlink a:hover {font-family:arial, san serif; font-size: 12px; color: #ff6600; font-weight: bold; text-decoration: none;}
giftlink a:active {font-family:arial, san serif; font-size: 12px; color: #ffffff; font-weight: bold; text-decoration: none;}

Take Care,
Mike

Vragabond · Dec 16, 2003

Basically, I could not find anything drastically wrong with your CSS. But here are a few pointers:

1. CSS are cascading style sheets. That means that attribute values are inherited. The first thing that defines how the element looks is the default html value. That basically means that <a> elements are rendered as blocks, their font-family is serif and so on. When you define a style, you overwrite these default values with yours and that is what the style the element will be using until you change it again. For making the code easier to read, you do not need to assign values to the attributes that do not change. When assigning pseudo classes

link, :visited, :hover, :active) to the link, you only need to specify the attributed you plan to change.

2. When assigning font-families and you are using font names that are a construct of two or more words you need to put them in quotes. font-family: Times New Roman is wrong while font-family: "Times New Roman" is correct. This could be throwing off your style sheet.

3. Still with font-families, it is a good practice to assign a general value at the end. This means if none of the fonts specified is found with the user, a default value for that font style will be used. I suppose you were trying to do this already (with san serif) but note that the correct generic name is sans-serif. Other generic names include serif, monospace, fantasy and cursive.

4. Another error appeared in the font-families. Your style sheet specified font-familiy instead of font-family in the click_here class.

5. Defining your styles inline (the way your link classes are) vs. block (the way the rest of them are). Both are ok, both work but I find the block presentation much easier to read, follow and find mistakes. Not to mention if you need to comment out certain attribute. I use inline only in the event of only one attribute.

6. Here's the slightly revised version of your style sheets to reflect what I was just babbling about:

Code:

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

a.nav:hover {
	color: #FF6600;
}

a.sub:link, a.sub:visited {
	font-family: Arial, Helvetica, &quot;san serif&quot;, sans-serif;
	font-size: 12px;
	color: #009900;
	font-weight: bold;
	text-decoration: none;
}

a.sub:hover {
	color: #FF6600;
}

a.giftlink:link, a.giftlink:visited {
	font-family: Arial, Helvetica, &quot;san serif&quot;, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
}

a.giftlink:hover {
	color: #ff6600;
}

td {
	font-family: Arial, Helvetica, &quot;san serif&quot;, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
}

.songtext {
	font-family: Arial, Helvetica, &quot;san serif&quot;, sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #000000;
	text-decoration: none;
}

.gifttext {
	font-family: Arial, Helvetica, &quot;san serif&quot;, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight: bold;
}

.click_here {
	font-family: Arial, Helvetica, &quot;san serif&quot;, sans-serif;
	font-size: 14px;
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
}

.lyrics {
	font-family: Arial, Helvetica, &quot;san serif&quot;, sans-serif;
	font-size: 12px;
	line-height: 14px;
	color: #000000;
	text-decoration: none;
	font-style : normal;
}

.lyrics_greeting {
	font-family: Arial, Helvetica, &quot;san serif&quot;, sans-serif;
	font-size: 16px;
	line-height: 18px;
	color: #000000;
	font-weight: bold;
	text-decoration: none;
}

.lyrics_signature {
	font-family: Arial, Helvetica, &quot;san serif&quot;, sans-serif;
	font-size: 14px;
	line-height: 16px;
	color: #000000;
	text-decoration: none;
}

.head {
	font-family: Arial, Helvetica, &quot;san serif&quot;, sans-serif;
	font-size: 16px;
	color: #000000;
	text-decoration: none;
}

p.bodytext  {
	text-align: center;
	font-family: Arial, Helvetica, &quot;san serif&quot;, sans-serif;
	font-size: 13px;
	font-weight: bold;
}

.bodytextgreen {color: #009900;}

.bodytextred {color: #ff0000;}

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

.input_labels_red {
	font-family: Arial, Helvetica, &quot;san serif&quot;, sans-serif;
	font-weight: bolder;
	font-size: 10pt;
	color: #ff0000;
}

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

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

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

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

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

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

.description {
	color: #ff0000;
}

.big_or {
	font-size: 15pt;
	font-weight: bolder;
	color: #ff0000;
	vertical-align: middle; 
}

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

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

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

-->
</style>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

trouble with my CSS

adamr1001

MIS

MikeBronner

Programmer

Vragabond

Programmer

Similar threads

Part and Inventory Search

Sponsor