|
CSS Tip:
Netscape Ate My Style Sheets!
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
Web designers who avoid using Cascading Style Sheets (CSS) frequently cite browser incompatibility as the reason. As you may already know from bitter experience, pages that look great in Explorer may not display at all in some Netscape versions. We'll look at some common browser incompatibility problems and show you how to avoid them.
JavaScript Is Required
Netscape 4.x browser versions ignore style definitions if the user has JavaScript turned off.
Why? We'll have to go back several years - the equivalent of a geologic age in the browser world - to when Netscape released something called JavaScript Stylesheets (JSSS). These were similar to standard CSS, but intricately bound with JavaScript. As a result, when users disable JavaScript in Netscape 4.x browser, they're also disabling style sheets.
This problem may linger for a long time. Although Netscape released version 6.0 almost a year ago, many Netscape users continue to use 4.x versions.
Unfortunately, the only way around the problem is to use JavaScript to detect whether the browser understands JavaScript. If so, use a redirect script to take the visitor to your CSS page. Visitors with JavaScript disabled would see a non-CSS page.
So who might have JavaScript disabled? Probably two main groups: visitors using some type of assistive technologies or visitors surfing with the WebTV browser. WebTV supports only a limited version of JavaScript called JellyScript.
Look at your server logs to see what percentage of visitors use Netscape or WebTV. Remember that only a small percentage of Netscape users will have JavaScript disabled. You'll have to determine if that number is worth the effort you'll put into creating duplicate pages and updating them.
One Error Breaks The Whole Thing
When it comes to CSS, Netscape is an all or nothing kind of browser. If the style specification syntax isn't completely correct, Netscape ignores it completely. Explorer is much more forgiving: a simple syntax error may break one section of a specification, but not disable the whole style.
The first thing you should do when you have problems with styles is to use a CSS validator to check for errors. Use these free tools to check a single page or an entire URL. Both cover both CSS1 and CSS2 specifications:
No Importing Allowed
There are two ways to attach external style sheets to your document: the LINK element or @import. LINK is far more reliable because most versions of Netscape ignore @import when you use it to link a stylesheet.
Use LINK in the HEAD section of your HTML document:
<LINK rel="stylesheet" type="text/css"
href="styleSheet.css"> |
There are other attributes allowed with the LINK tag, but these are all you need to attach your style sheet to the document.
Uneven Background Colors
At times, you want an element to have a different background color than the rest of the document. It's a good way to add contrast and draw visitors' attention to important information.
The standard way to add background color is like this:
When you apply that style definition in the document, you expect the entire paragraph to have a yellow background. That's what you get in Explorer and Netscape 6.x, but Netscape 4.x versions only put the background color behind the text.
Avoid this ragged effect by adding a 1 pixel border to the style declaration and setting the border color to the same color as your background.
P.contact {background:yellow; border:1px yellow} |
That will give you the effect you want in both Netscape and Explorer.
Names Don't Count
Be careful what you name your CLASS and ID selectors: you can run into trouble if you start them with a number. For instance:
<style>
P.author {font-style:italic}
P.1name {size:12pt; font-family:arial}
</style>
<body>
<P class="author">Mark Twain</P>
<P class="1name">Quote Text Here</P>
</body> |
All versions of Netscape ignore the P.1name style definition because it begins with a number, while Explorer displays it as you expect. Under CSS1 specifications, selectors can't start with a number, but CSS2 rules do allow it. Just follow the CSS1 naming conventions to avoid problems.
The Table Is Uncovered
Netscape treats tables almost like they're completely separate from the main document. Therefore, you may be surprised to find that styles you applied to the BODY section aren't inherited by your tables.
Avoid the problem by including the TR and TD definitions when you define your BODY styles. Check out our August 2001 newsletter article for a complete description of the technique.
Careful About Browser Problems
CSS is just one area where browser incompatibility is a problem. Even some common HTML techniques can break a page in one browser - or even in a particular browser version. NetMechanic's HTML Toolbox alerts you to techniques that may cause browser display problems while Browser Photo shows you actual screen shots of your Web page in 14 different browser and operating system combinations.
Use both tools to find browser problems before your visitors do!
|
