CSS Problems w/ Mozilla and Netscape

[tommychi]

i have a stylesheet which looks something like this:

<style type="text/css">
body { 
scrollbar-3dlight-color: #D3D3D3;
scrollbar-arrow-color: #35393D;
scrollbar-base-color: #E5E5E5;
scrollbar-darkshadow-color: #D3D3D3;
scrollbar-face-color: #E5E5E5;
scrollbar-highlight-color: ;
scrollbar-shadow-color: #D3D3D3; 
scrollbar-track-color: #E5E5E5;
}

a:link { text-decoration: none; font-family: Verdana; font-size: 10px; color: #3F586F };
a:active { text-decoration: none; font-family: Verdana; font-size: 10px; color: #3F586F };
a:visited { text-decoration: none; font-family: Verdana; font-size: 10px; color: #3F586F };
a:hover { text-decoration: none; font-family: Verdana; font-size: 10px; color: #35393d };

.secondary { text-decoration: none; font-family: Verdana; font-size: 10px; color: #FEFEFE };
.secondary a:link { text-decoration: none; font-family: Verdana; font-size: 10px; color: #FEFEFE };
.secondary a:active { text-decoration: none; font-family: Verdana; font-size: 10px; color: #FEFEFE };
.secondary a:visited { text-decoration: none; font-family: Verdana; font-size: 10px; color: #FEFEFE };
.secondary a:hover { text-decoration: underline; font-family: Verdana; font-size: 10px; color: #FEFEFE };

.main { text-decoration: none; font-family: Verdana; font-size: 10px; color: #35393d };
.textbox { background-color: #E5E5E5; font-family: Verdana; font-size: 10px; color: #35393d; border: 1 solid #4A4D4F };
.submit_button { background-color: #E5E5E5; font-family: Verdana; font-size: 10px; color: #35393D; border: 1 solid #35393D };
</style>

I call these styles wherever i need them using the class="something" coding. This works perfectly fine in IE, but in Mozilla and Netscape, they just appear as default font: Times New Roman, thus making the site look completely awkward. Im not really good at css stylesheets so if anyone can tell me why its doing this, and how to fix it, it would be appreciated. Thank you.

[Buddy Bradley]

Can you post an example of where you have used the class="something" code too.

[tommychi]

well lets say i have a table and display text.

<table width="100%" cellpadding="0" cellspacing="0" class="main"><tr><td>Text should appear here with the main stylesheet</td></tr></table>

[Buddy Bradley]

You should be doing this instead:

<table width="100%" cellpadding="0" cellspacing="0"><tr><td><p class="main">Text should appear here with the main stylesheet</p></td></tr></table>

i.e. Use HTML tags semantically, so text goes inside a paragraph tag (or a li, label, or whatever).

Not sure why you're having problems (Paul O'B will be along in a while to explain it in detail ), but I do know that some browsers don't like text styles to be applied to containing blocks like tables.

[tommychi]

errr, the problem is, the whole site was coded like that, so it'd be a BIG hassle to change everything. Is there another way?

[teboose]

Some browsers choke if you don't provide a generic font (or at least more than one font) ... try making your font-family: Verdana, sans serif;

Hope this helps.

[blufive]

a:link { text-decoration: none; font-family: Verdana; font-size: 10px; color: #3F586F };

See that trailing semicolon? You've got one on virtually every line in the stylesheet. It should't be there, and it's going to cause any standards-weenie browser to have small furry offspring. Delete the semicolons outside the curly brackets, and things should work much better.

[blufive]

And while I'm here...

.submit_button { [...] border: 1 solid #35393D }

1 what? point? pixel? mile? aardvark? Specify a unit, or the standards-weenie browsers will freak at that, too.

[Paul O'B]

Off Topic:

1 what? point? pixel? mile? aardvark?

Is this:

border:1aardvark solid #35393D

smaller than this.

border:1elephant solid #35393D

I think you're on to something there

Blufives right good browsers hate invalid code - so always run your css and html through the validator if somethings not right and chances are there be a few typos floating around.

Paul

[tommychi]

wow thanks guys for the help.. it works perfect now... However, there is another question i'd like to ask. I have this for scrollbars:

body { 
scrollbar-3dlight-color: #D3D3D3;
scrollbar-arrow-color: #35393D;
scrollbar-base-color: #E5E5E5;
scrollbar-darkshadow-color: #D3D3D3;
scrollbar-face-color: #E5E5E5;
scrollbar-highlight-color: ;
scrollbar-shadow-color: #D3D3D3; 
scrollbar-track-color: #E5E5E5;
}

This works for IE, but doesn't once again for other browswers. what's wrong with this part?

[Paul O'B]

This works for IE, but doesn't once again for other browswers. what's wrong with this part?

The thing thats wrong with it is that it isn't part of the css specs

Its IE's proprietary code so it only works in IE. The code won't validate but it won't do any harm either.

Paul

[blufive]

This works for IE, but doesn't once again for other browswers. what's wrong with this part?

Those CSS attributes are MS-proprietary and only work in IE. There's no way to do anything similar in other browsers, AFAIK.

Is this:
border:1aardvark solid #35393D


smaller than this?
border:1elephant solid #35393D

Prob'ly, but the browser support is TERRIBLE.