CSS question

Anon

Hi,

I have the following .css file for a new site I'm working on, http://www.technophiliac.com/:

h1 { color: #ff6633; font-style: italic}
h2 { color: #ff8a33; font-style: italic}
h3 { color: #000; font-weight: bolder; text-decoration: none}
h4 { color: #ff8a33; font-style: italic}
A:link {color: #ff8a33; text-decoration: none}
A:hover {color: #ff8a33; text-decoration: underline}
A:visited {color: #999999; text-decoration: none}
A:visited:hover {color: #999999; text-decoration: underline}
.new_article { font-weight: 500; font-size: 125%; line-height: 125%; text-decoration: none }
.section_header { font-weight: 500; font-size: 125%; line-height: 125%; text-decoration: none; background-color: #ff8a33 }
.text_main { font-weight: normal; font-size: 100%; }
.text_margin_nav { font-weight: normal; font-size: 100%; }
.text_top_nav { font-weight: normal; font-size: 100%; }
.text_header { font-weight: bold; font-size: 200%; color: #ff8a33; }
.text_footer { font-weight: normal; font-size: 75%; }

IE displays all my stuff very well. Netscape, including 6, does not.

The problem is with my .text_main and other rules that start with a period. The others (H1, alink, etc.) display nicely. The rules above that start with a . are referenced in my HTML with something like this: <span class="text_top_nav"> then the text, and then the </span> closing tag.

Netscape refused to display that stuff, and the results are not pretty.

This is really my first foray into CSS in any detail, wondering if someone can give me a clue here.

Anon

the format you showed for .text_main is correct.

as far as i know, netscape will only not show you the mouse over effects, if you have any. rest all works pretty ok. i am using css on my site too and its all ok, apart from mouse over effect not working on netscape. Also the font sizes are slightly different on IE and netscape. infact you will get different results with netscape on Windows platform than netscape on linux.

Anon

Daarius,

I still think I might have gotten my formatting wrong or something, because while the mouseover stuff is not working, as you mentioned, neither is the formatting:

size of <span class="title">
and the background color stuff in this css doesn't work either:
.section_header { font-weight: 500; font-size: 125%; line-height: 125%; text-decoration: none; background-color: #ff8a33 }

I'll keep checking sites, trying to find the right way to do it (assuming one exists!)
-john

Anon

You should check the CSS compatibility guides available from several places. Western Civilization (www.westciv.com) is one place. Netscape only has partial support for some of the properties.

Anon

You'll never believe what the problem was (I think).

My CSS class names were multiple words separated by underscores, like this:
.text_main_nav

On a hunch I changed them to class names like this:
.textMainNav

.... and now they work (sort of)

Netscape is now using the right font sizes and line widths, but it is giving some of the properties of . sectionHeader to .textNewArticle ...

I have totally lost faith in Netscape ...
:-)

Anon

Netscape is much more strict than IE. If you make one mistake somewhere, it ignores the whole line. Once, I put = instead of : in styles; it worked perfectly in IE, but not in Netscape. For your problem, maybe CSS RFC does not allow underscores in names.