Need help cleaning up a CSS style sheet

[Koinek]

I'm currently the admin for my program's website. Unfortunately, it was designed by somebody else. So there are sometimes some different approaches that I like to take to things that the existing structure doesn't support.

One is the CSS style sheet stuff that the last guy did. It messes everything up when I edit the pages in Dreamweaver. Fonts go haywire, formatting dies, etc. etc. I don't personally have much CSS experience so I'm not able to fix it well; I just make work-arounds.

I would appreciate if someone with some know-how could look at this style sheet and tell me if there is anything weird/awkward about it:

.linkbars {word-spacing: 10px; text-align: justify;}

font.langnavbar {font-family: geneva, arial; color: #5a6c94; font-weight: bold; font-style: normal; font-size: 10pt}
font.copy {font-family: verdana, arial; color: black; font-weight: normal; font-size: 10pt; font-style: normal}
font.navbar {font-family: geneva, arial; color: white; font-weight: bold; font-size: 11pt; font-style: normal}
font.quote {font-family: palatino, arial; color: #5a6c94; font-weight: bold; font-size: 10pt; font-style: italic}
font.quote1 {font-family: palatino, arial; color: black; font-weight: bold; font-size: 10pt; font-style: italic}
font.copyheading {font-family: verdana, arial; color: #5a6c94; font-weight: bold; font-size: 11pt; font-style: normal}
 font.bullet {font-family: wingdings; color: black; font-weight:normal; font-size: 11pt font-style:normal}
.content {font-family: geneva, arial; color: black; font-weight: bold; font-style: italic; font-size: 11pt;}
font..beloitlink {font-family: geneva, arial; color: #000000; font-weight: normal; font-style: normal; font-size: 10pt}


.redtype {font-family:geneva, arial; color: #990000 font-size: 10pt; font-weight: bold;}





A:link {color:#5a6c94; } 
A:visited {color:#3f8c84;}

.navbar a:link {font-family: geneva, arial; color: white; font-weight: bold; font-size: 11pt; font-style: normal; text-decoration:none;}

.navbar a:hover {font-family: geneva, arial; color: #003; font-weight: bold; font-size: 11pt; font-style: normal; text-decoration:none;}


.navbar a:visited {font-family: geneva, arial; color: white; font-weight: bold; font-size: 11pt; font-style: normal; text-decoration:none;}


.langnavbar a:link {font-family: geneva, arial; color: #5a6c94; font-weight: bold; font-style: normal; font-size: 10pt}
.langnavbar a:hover {font-family: geneva, arial; color:#003; font-weight:bold; font-size:11pt; font-style: normal;}
.langnavbar a:visited {font-family: geneva, arial; color:#3f8c84; font-weight:bold; font-size: 10pt; font-style: normal;}


.contentlinks a:link {font-family: geneva, arial; color: #5a6c94; font-weight: bold; font-style: italic; font-size: 11pt; text-decoration: underline;}

.contentlinks a:visited {font-family: geneva, arial; color:#3f8c84; font-weight:bold; font-size: 10pt; font-style: normal;}


.pagelinks a:link {font-family: geneva, arial; color: #003; font-weight: bold; font-size: 10pt; font-style: bold; text-decoration: underline;}

.pagelinks a:visited {font-family: geneva, arial; color: #003; font-weight: bold; font-size: 10pt; font-style: bold; text-decoration: underline;}


.lowbar a:link {font-family: geneva, arial; color: white; font-weight: bold; font-size: 10pt; font-style: normal; text-decoration:none;}

.lowbar a:hover {font-family: geneva, arial; color: #003; font-weight: bold; font-size: 10pt; font-style: normal; text-decoration:none;}


.lowbar a:visited {font-family: geneva, arial; color: white; font-weight: bold; font-size: 10pt; font-style: normal; text-decoration:none;}

Feel free to suggest fixes too.

 

[Starscape]

I dabble a little with CSS and I can spot one or two obvious problems with that code.

Make sure each statement in the braces (curly brackets) end with a semi-colon. On the several of the lines the semi-colon is missing on the very last statement before the right hand brace: i.e each line should end with ";}".

I'm not sure about this one, but "font..beloitlink" should probably only contain one period.

You could try a CSS validator, e.g. http://jigsaw.w3.org/css-validator/, which should tell you exactly where any problems are.

 

[Allyn Gibson]

Errors I see:

In the line that begins font.bullet you're missing a semi-colon. At the end, in this definition font-size: 11pt font-style:normal put a semi-colon after 11pt.

Already mentioned: font..beloitlink should be font.beloitlink

In the line that begins .redtype you're missing a semi-colon. In this definition in the line color: #990000 font-size: 10pt; you need a semi-colon after #990000

In the line that begins A:link, change that bit to a:link. Likewise, with A:visited, change that to a:visited. The stylesheet won't validate by XHTML with uppercase tags.

Everything else looks like it should work. The major criticism I'd level at the stylesheet is that the writer didn't understand the way inheritance works; the link definitions, for instance, are more complicated than they need to be. But that won't keep the stylesheet from working properly.

 

[Koinek]

Thanks a ton guys. Yea, it was written in 2003 or so. I've been struggling with it since. Dreamweaver hates the thing.

 

[GeneHunt]

Thanks a ton guys. Yea, it was written in 2003 or so. I've been struggling with it since. Dreamweaver hates the thing.

Dont trust what Dreamweaver design view says, its frequently wrong. Test in your browser (multiple ones if you can).

 

[Allyn Gibson]

Feel free to suggest fixes too.

Remember how I said, Koinek, that the original writer didn't need all that code, that he could have used inheritance?

Here's a cleaned-up version of the stylesheet:

a:link { color:#5a6c94; } 
a:visited { color:#3f8c84;}

font.beloitlink { font-family: geneva, arial; color: #000000; font-weight: normal; font-style: normal; font-size: 10pt; }
font.bullet { font-family: wingdings; color: black; font-weight:normal; font-size: 11pt; font-style:normal; }
font.copy { font-family: verdana, arial; color: black; font-weight: normal; font-size: 10pt; font-style: normal; }
font.copyheading { font-family: verdana, arial; color: #5a6c94; font-weight: 700; font-size: 11pt; font-style: normal; }
font.langnavbar { font-family: geneva, arial; color: #5a6c94; font-weight: 700; font-style: normal; font-size: 10pt; }
font.navbar { font-family: geneva, arial; color: white; font-weight: 700; font-size: 11pt; font-style: normal; }
font.quote { font-family: palatino, arial; color: #5a6c94; font-weight: 700; font-size: 10pt; font-style: italic; }
font.quote1 { font-family: palatino, arial; color: black; font-weight: 700; font-size: 10pt; font-style: italic; }

.content { font-family: geneva, arial; color: black; font-weight: 700; font-style: italic; font-size: 11pt; }

.contentlinks a { font-family: geneva, arial; font-weight: 700; }
.contentlinks a:link { color: #5a6c94; font-style: italic; font-size: 11pt; text-decoration: underline; }
.contentlinks a:visited { color:#3f8c84; font-size: 10pt; font-style: normal; }

.langnavbar a { font-family: geneva, arial; font-weight: 700; font-style: normal; }
.langnavbar a:link { color: #5a6c94; font-size: 10pt; }
.langnavbar a:hover { color:#003; font-size:11pt; }
.langnavbar a:visited { color:#3f8c84; font-size: 10pt; }

.linkbars { word-spacing: 10px; text-align: justify; }

.lowbar a { font-family: geneva, arial; font-weight: 700; font-size: 10pt; font-style: normal; text-decoration: none; }
.lowbar a:link, .lowbar a:visited { color: white; }
.lowbar a:hover { color: #003; }

.navbar a { font-family: geneva, arial; font-weight: 700; font-size: 11pt; font-style: normal; text-decoration: none; }
.navbar a:link, .navbar a:visited { color: white; }
.navbar a:hover { color: #003; }

.pagelinks a:link, .pagelinks a:visited { font-family: geneva, arial; color: #003; font-weight: bold; font-size: 10pt; text-decoration: underline; }

.redtype { font-family: geneva, arial; color: #990000; font-size: 10pt; font-weight: 700; }

You'll get the same result, but with leaner and meaner code.

 

[Koinek]

^Sweet! BTW can I use the above sheet w/o updating my pages, or will I need to go in and manually retool each one?

EDIT: I think I found the answer. Thanks all once again!