PDA

View Full Version : CSS Not Working

Quietus
07-15-2006, 01:22 PM
Okay, I am using tables on this page for the layout - thisawkwardsilence.frih.net, but I am using a stylesheet to format text and links. If you look at the left navigation bar, the text just isn't picking up the style I want it to be. I want it to be red, arial, 9 pt. In AOL it looks red, but it's times I think, at 12 or 14 pt. In Firefox, it's black, and totally too big and the wrong font. I am not sure why my CSS isn't working, did I write it wrong? I even threw some span styles in there, but that doesn't work! Could you guys look at my code please?

<html>
<head>
<title>This Awkward Silence :: My Chemical Romance Fansite</title>
<style type="text/css">
<!--
body {background: #000000;
font-family: Arial;
font-size: 9pt;
font-color: #921116;
text-decoration: none;

table, tr, td .nav {font-family: Arial;
font-size: 9pt;
color: #921116; }

A:link { text-decoration: none; color:#921116; font-family: arial; font-size: 9pt; font-weight: normal; }
A:visited { text-decoration: none; color:#921116; font-family: arial; font-size: 9pt; font-weight: normal; }
A:hover { text-decoration: underline; color:#921116; font-family: arial; font-size: 9pt; font-weight: normal; }
A:active { text-decoration: none; color:#921116; font-family: arial; font-size: 9pt; font-weight: normal; }
-->
</style>
</head>

<body>

<table width="800" border="0" bgcolor="#000000" align="center">

<td colspan="3" valign="top"><center><img src=header.jpg></center></td>

<tr>

<td align="left" valign="top">

<table width="125" border="0">
<span style="font-family: Arial; font-size: 9pt; font-color: #921116; text-decoration: none;">
<tr><td align="center">My Chemical Romance</tr></td>
<tr><td align="center">The Band</tr></td>
<tr><td align="center">Gerard Way</tr></td>
<tr><td align="center">Mikey Way</tr></td>
<tr><td align="center">Frank Iero</tr></td>
<tr><td align="center">Ray Toro</tr></td>
<tr><td align="center">Bob Bryar</tr></td>
<tr><td align="center">Photo Gallery</tr></td>
<tr><td align="center"><a href="quotes.php">Band Quotes</a></tr></td>
<tr><td align="center">Random Facts</tr></td>
<tr><td align="center">Rumors</tr></td>
<tr><td align="center">Equipment</tr></td>
<tr><td align="center">Awards</tr></td>
<tr><td align="center">Articles</tr></td>
<tr><td align="center">Interviews</tr></td>
<tr><td align="center">Magazine Scans</tr></td>

<tr><td align="center">The Music</tr></td>
<tr><td align="center">Discography</tr></td>
<tr><td align="center">Song Listing</tr></td>
<tr><td align="center">Song Meanings</tr></td>
<tr><td align="center">Lyric Database</tr></td>
<tr><td align="center"><a href="albumreviews.php">Album Reviews</a></tr></td>
<tr><td align="center">Music Videos</tr></td>
<tr><td align="center"><a href="charthistory.php">Chart History</a></tr></td>

<tr><td align="center">For The Fans</tr></td>
<tr><td align="center">Avatars & Icons</tr></td>
<tr><td align="center">Wallpapers</tr></td>
<tr><td align="center">Contests</tr></td>
<tr><td align="center">Quizzes</tr></td>
<tr><td align="center">Polls</tr></td>
<tr><td align="center">Fan Art</tr></td>
<tr><td align="center">Fan Music</tr></td>
<tr><td align="center">Fan Of The Month</tr></td>
<tr><td align="center">Fan Experiences</tr></td>
<tr><td align="center">Concert Reviews</tr></td></span></table></td>

</table>
</body>
</html>
Arwen
07-15-2006, 01:59 PM
In the body style replace font-color: #921116; with color: #921116;
Quietus
07-15-2006, 02:40 PM
Thanks! But the font style and size is still wrong...any ideas on that? And the links are still blue and underlined, uglyness. :(

So do I even need this:

table, tr, td .nav {font-family: Arial;
font-size: 9pt;
color: #921116; }
J to the izzosh
07-15-2006, 02:52 PM
You seem to be missing a closing curly brace after your body selector. Watch your syntax:

body {background: #000000;
font-family: Arial;
font-size: 9pt;
font-color: #921116;
text-decoration: none;}

So do I even need this:

table, tr, td .nav {font-family: Arial;
font-size: 9pt;
color: #921116; }

Not if you want your styling to be handled by the properties in your body style. Those styles will cascade to child elements of the <body> element, thus, "Cascading Style Sheets". If you don't want all of the text in your body to look like that, though, then generally it would be best to remove those properties from the body style, and allow them to be handled by more specific selectors like td and .nav. You really wouldn't need the "table" and "tr" there either way, though, as they would be covered by td. Or th, should you use it.

Also, you should remove the HTML comment tags (<!--, -->) from your CSS as they are not valid CSS and can cause errors.
Cherchezlafemme
07-15-2006, 02:59 PM
Beat me to it! lol
J to the izzosh
07-15-2006, 03:23 PM
Muahahaha... *pets kitty on lap*
Quietus
07-16-2006, 02:28 PM
You seem to be missing a closing curly brace after your body selector. Watch your syntax:

body {background: #000000;
font-family: Arial;
font-size: 9pt;
font-color: #921116;
text-decoration: none;}

Oh, thanks for that! But it's still not working...now the color is correct, the links are correct, but the non-links are still the wrong font/size. :/

Page is here: thisawkwardsilence.frih.net

Any more ideas?
Arwen
07-16-2006, 02:48 PM
Try using pixels instead of pt.
Quietus
07-16-2006, 02:53 PM
No change, :(
J to the izzosh
07-16-2006, 03:04 PM
No, there seems to be a bug where the font-size property isn't inherited properly in tables, so your body style isn't cascading to your <td> elements. You can get around it easliy by moving your font stylings to a selector for the <td> element, instead of <body>.

Also, you may want to change the colour of your links so that they aren't exactly matching that of your plain text. It makes it very difficult to find links on your page. At the very least, try changing the colour for a:hover.
Quietus
07-16-2006, 03:07 PM
No, there seems to be a bug where the font-size property isn't inherited properly in tables, so your body style isn't cascading to your <td> elements. You can get around it easliy by moving your font stylings to a selector for the <td> element, instead of <body>.

Also, you may want to change the colour of your links so that they aren't exactly matching that of your plain text. It makes it very difficult to find links on your page. At the very least, try changing the colour for a:hover.
So how would I make a selector for the TD element?

td {background: #000000;
font-family: Arial;
size: 9pt;
color: #921116;
text-decoration: none;}

A:link { font-family: arial; font-size: 9pt; font-weight: normal; color:#921116; text-decoration: none; }
A:visited { font-family: arial; font-size: 9pt; font-weight: normal; color:#921116; text-decoration: none; }
A:hover { font-family: arial; font-size: 9pt; font-weight: normal; color:#921116; text-decoration: none; }
A:active { font-family: arial; font-size: 9pt; font-weight: normal; color:#921116; text-decoration: none; }

Like that?
J to the izzosh
07-16-2006, 03:10 PM
Yep, just like that, though you may want to keep your background colour assigned to your body. Otherwise, you'll end up with a white page that has a lot of little black blocks where your TD elements are. :)
Quietus
07-16-2006, 03:14 PM
Yep, just like that, though you may want to keep your background colour assigned to your body. Otherwise, you'll end up with a white page that has a lot of little black blocks where your TD elements are. :)
Okay well I did that, but it's still not working. I really just don't understand what the problem is...here's the full, fixed coding:

<html>
<head>
<title>This Awkward Silence :: My Chemical Romance Fansite</title>
<style type="text/css">

body {background: #000000;
font-family: Arial;
size: 9pt;
color: #921116;
text-decoration: none;}

td {font-family: Arial;
size: 9pt;
color: #921116;
text-decoration: none;}

A:link { font-family: arial; font-size: 9pt; font-weight: normal; color:#921116; text-decoration: none; }
A:visited { font-family: arial; font-size: 9pt; font-weight: normal; color:#921116; text-decoration: none; }
A:hover { font-family: arial; font-size: 9pt; font-weight: normal; color:#921116; text-decoration: none; }
A:active { font-family: arial; font-size: 9pt; font-weight: normal; color:#921116; text-decoration: none; }

</style>
</head>

<body>

<table width="800" border="0" bgcolor="#000000" align="center">

<td colspan="3"><center><img src=header.jpg></center></td>

<tr>

<td align="left" valign="top">

<table width="100" border="0" bgcolor="#000000">

<tr><td align="center">My Chemical Romance</tr></td>
<tr><td align="center">The Band</tr></td>
<tr><td align="center">Gerard Way</tr></td>
<tr><td align="center">Mikey Way</tr></td>
<tr><td align="center">Frank Iero</tr></td>
<tr><td align="center">Ray Toro</tr></td>
<tr><td align="center">Bob Bryar</tr></td>
<tr><td align="center">Photo Gallery</tr></td>

<tr><td align="center"><a href="quotes.php">Band Quotes</a></tr></td>
<tr><td align="center">Random Facts</tr></td>
<tr><td align="center">Rumors</tr></td>
<tr><td align="center">Equipment</tr></td>
<tr><td align="center">Awards</tr></td>
<tr><td align="center">Articles</tr></td>
<tr><td align="center">Interviews</tr></td>
<tr><td align="center">Magazine Scans</tr></td>

<tr><td align="center">The Music</tr></td>
<tr><td align="center">Discography</tr></td>
<tr><td align="center">Song Listing</tr></td>
<tr><td align="center">Song Meanings</tr></td>
<tr><td align="center">Lyric Database</tr></td>
<tr><td align="center"><a href="albumreviews.php">Album Reviews</a></tr></td>
<tr><td align="center">Music Videos</tr></td>
<tr><td align="center"><a href="charthistory.php">Chart History</a></tr></td>

<tr><td align="center">For The Fans</tr></td>
<tr><td align="center">Avatars & Icons</tr></td>
<tr><td align="center">Wallpapers</tr></td>
<tr><td align="center">Contests</tr></td>
<tr><td align="center">Quizzes</tr></td>
<tr><td align="center">Polls</tr></td>
<tr><td align="center">Fan Art</tr></td>
<tr><td align="center">Fan Music</tr></td>

<tr><td align="center">Fan Of The Month</tr></td>
<tr><td align="center">Fan Experiences</tr></td>
<tr><td align="center">Concert Reviews</tr></td></table></div>
</td>

<td align="center" valign="top">

<table width="600" border="0" bgcolor="#000000">
</table></td>

<td align="right" valign="top">
<table width="100" border="0">

<tr><td align="center">The Site</tr></td>

<tr><td align="center"><a href="index.php">Home</tr></td>
<tr><td align="center">Contact Us</tr></td>
<tr><td align="center"><a href="webmasters.php">Webmasters</tr></td>
<tr><td align="center">Forum Staff</tr></td>
<tr><td align="center">Our History</tr></td>
<tr><td align="center">Our FAQ</tr></td>
<tr><td align="center"><a href="http://www.z13.invisionfree.com/this_awkward_silence">Our Forum</tr></td>
<tr><td align="center">Our Myspace</tr></td>
<tr><td align="center">Our Guestbook</tr></td>
<tr><td align="center">Available Positions</tr></td>
<tr><td align="center">Advertising Codes</tr></td>
<tr><td align="center">Become An Affiliate</tr></td></table></td>

</tr>

</table>
</body>
</html>
J to the izzosh
07-16-2006, 03:25 PM
Oh, right, sorry. Forgot to mention: "size" is not an actual CSS property. It should be "font-size".

Here's a fairly decent CSS reference: http://www.w3schools.com/css/css_reference.asp
Quietus
07-16-2006, 03:27 PM
Oh, right, sorry. Forgot to mention: "size" is not an actual CSS property. It should be "font-size".

Here's a fairly decent CSS reference: http://www.w3schools.com/css/css_reference.asp
You are my hero, I can't thank you enough! :)
J to the izzosh
07-16-2006, 03:33 PM
You're quite welcome.

I accept payments by certified cheque, money order, and all major credit cards. ;)
Quietus
07-16-2006, 03:35 PM
You're quite welcome.

I accept payments by certified cheque, money order, and all major credit cards. ;)
Good thing I have all three! :)