CSS-guide, Extra pages: P What CSS-implementation errors are in Netscape/Mozilla browsers: Netscape 4.x related problems

	Table of topic groups> Front page of CSS-guide > Extra pages > P What CSS-implementation errors are in Netscape/Mozilla browsers > Netscape 4.x related problems (section 1/2)

Sections of page:

Netscape 4.x related problems

Passing Netscape 4.x

Giving direct CSS (style="...") is problematic. In one respect it is bad, because certain CSS might crash Netscape 4.x or create some other serious problems. On the other respect it is necessary, because linked CSS doesn't always work. I found the latter matter, when I designed dynamic menus. If the direct CSS doesn't fit for other browser, they can get different CSS in linked files, if declarations have the !important rule. The rule should not however unnecessary overload, because all browser don't accept many times overloaded rules.

In many situations it is reasonable to pass Netscape 4.x. In principle one way to pass Netscape 4.x is to use import rule and combine it with JavaScript encoding. Because Opera 4.x+ has the mode Identify Mozilla 4.x, the script should have a condition, which prevents Opera to read the CSS for Netscape 4.x. The code should write for example at the following way:

<script language="JavaScript" type="text/javascript">

</script> <style type="text/css">  </style>

I got the basic hint from Sam Marshall, but I changed it concerning the browser detection. The system works in all browsers. Users of MS IE, Opera and new Netscape/ Mozilla Gecko browsers it doesn't matter anything, if the JavaScript-support has been turned off. The JavaScript is only needed for the Netscape 4. series and style sheets don't work at all in Netscape 4.x browsers, if JavaScript has been turned off. If all browsers get the style sheets with JavaScript, when the the JavaScript is turned off, CSS don't work at all. In some conditions a part of the CSS might be reasonable to give by using JavaScript-encoding. I handle these kinds of situations in the extra page, which handles dynamic menus.

The problem of the previous example is that media blocks and that way media types can't be used, if the purpose is that pages works well also in Mac browsers. MS IE for Mac (concerns at least to the version 5.0) namely doesn't support media blocks (@media {...} but skip all CSS, which is inside them.

Opera has another special problem. It reads always the @import at-rule to all media types, if there is not told, which media type is used (this concerns at least until the version 5.11). The media type specifier (for example @import url(...) screen;) works in few browsers. @media and @import at-rules should not be used at all, if the purpose is to create CSS-code for all media type supporting browsers!

A better variation of the same basic idea is to generate for the Netscape 4.x series own CSS-files and comments around files, which Netscape 4.x should not read. The way of the following example makes possible the functionality of media types also in Mac browsers (the following code is for XHTML-documents):

<script language="JavaScript" type="text/javascript"> 
</script> <script language="JavaScript" type="text/javascript">

</script> <link rel="stylesheet" type="text/css" href="../Css/CssSitePrint.css" media="print" /> <link rel="stylesheet" type="text/css" href="../Css/CssSiteProjection.css" media="projection" /> <link rel="stylesheet" type="text/css" href="../Css/CssSiteScreen.css" media="screen" /> <script language="JavaScript" type="text/javascript">

</script>

I have found that the difference between first and last Netscape 4.x series is quite big concerning the reliability of browsers. Netscape 4.04 crashes very easily but Netscape 4.79 is quite stable. Presumably also Netscape 4.6x is quite stable. If necessary it is possible to make own CSS for different Netscape 4.x series browsers. In the example below Netscape 4.0x-4.5x and newer Netscape 4.x series browsers get different CSS:

<script language="JavaScript" type="text/javascript">  </script> <script language="JavaScript" type="text/javascript">  </script>

Note. It is also possible to use JavaScript in order to identify other matters than the name and the version number of some browsers, for example the size or the color depth of the screen and the create screen dependent CSS-files. Instead only few browsers have the possibility to switch between default and alternative style sheets. You can search JavaScript examples by using in common search engines (like Altavista and Google) for example keywords javascript+window+color depth and javascript+window+size.

The alternative of JavaScript is to use serve side encoding, which it is not dependent, if JavaScript support is in use. But server-side encoding can't test, which features the JavaScript interpreters of different browsers support, when method-based detections can't work. At least Opera can easily get incorrect CSS. By using JavaScript it is also easier to take account situations, where the JavaScript-support has been turned off. I handle however PHP-based detections in mixed information technology pages.

Webreference (the color depth), Javascripter (the size of the window), Sam Marshall (United Kingdom; The writer of the first hint).

Without linking

You can use these without linking:

Basic font styles to common block and inline level elements.
Definitions for text properties of table cells and table headers.
Background properties for the element BODY without background image position (oldest versions don't tolerate elements, which are inside the BODY much multi-level background definitions).

I give you two examples, how to define CSS for Netscape 4.x browsers:

These definitions can give to Netscape 4.x .
These should not give for them , because they don't work properly with Netscape 4.x.

Especially problematic features

Trying to get good presentations, following matters are especially problematic:

The usage of the element SPAN must test, because the behavior of the browser with it is incorrect. The worst matter is, that texts might overlap each others. Sometimes however works.
The background-color property for block elements work incorrect. If borders are not set, background colors cover elements only partial. By using borders Netscape 4.x makes always transparent padding between the borders and the content (there is however some possibilities to find solutions to this problem and I handle them later).
If image have border and width properties, they behave quirky.

Because you can't do anything to these, I recommend to define following properties so, that Netscape 4.x doesn't read them or it gets them only in some circumstances:

The horizontal alignment text-align:justify can used only in very simple documents.
To the elements BODY and HTML borders, because the browser crash easily using them to these elements. Also, borders to other elements might crash Netscape 4.04 - in overall Netscape 4.04 has serious problems in handling complex CSS-definitions. The problem lies on multi-level nested elements, which have borders (newest 4-series browsers, for example Netscape 4.79, don't crash because of this reason). Single level borders don't crash it. If the page has simple structure and pages are short, borders to element BODY can be used. One additional problem is the fact that it doesn't support different colors to each borders.

Some other hints

If you want solid background colors for block level element without visible borders define full transparent GIF-images as the background image. In principle the another possibility is to set border:none. Old versions of Netscape 4.x might crash with it. For them also multi-level backgrounds are problematic, when also transparent GIF solution doesn't work. If necessary, make several CSS-versions for the Netscape 4.x series. Instead of CSS-solutions it is possible to use nested tables. With them can create nice bordered blocks. Indeed background image works better with ILAYER and LAYER elements. Because they are proprietary, I have used LAYER elements on the top of the pages in my dynamic menus generated by short scripts.
Because the important rule doesn't work it is possible to define first CSS for most other CSS-supporting browsers and then to the Netscape 4.x series.
If font properties have been defined for BODY, it also necessary to define at least elements TD and TH (also some other elements might need definitions), because the inheritance doesn't work properly. Because the inheritance works very limited, it is necessary in some cases to define exact matching patterns, for example p code, blockquote cite {font-size:small} (I have found, that p, blockquote, code, cite {font-size:small} didn't gave the desired result).
I tested pixel-defined (on screen) absolute font sizes in Netscape 4.x for Windows with the font-face Verdana at the range 8px-16px. According that sample only every fourth pixel-defined font size is correct (in the test font sizes 8px, 12px and 16px). The consequence is also that every fourth pixel-defined font size is totally missing (in the test font sizes 11px and 15px). Other values are one pixel too small.
Use always termination tags to paragraphs, because horizontal alignment definitions don't work without them! (Even if termination tags have been used browsers make howerver sometimes errors.)
If you define your own list style image, define also list-style-type systematic so, that in every list level has different list-item, because Netscape 4.x can't use list-images. But just anything doesn't work in list. It is only possible to exchange the color of list-item in the first level lists.
Test carefully the usage of the property float (simple definitions work - test with the CSS1 Test Suite).
Make relative references to background images according hints in another page .
Matching patterns work only partially in lists. If the text properties to the element LI doesn't work, use the element DIV surround the text. Define then properties to the element DIV or define font-related properties to the parent-element (OL or UL).
Padding and margin values to the element LI don't work, you can define first margin and padding to OL and UL. Then you must pass them by using the import rule, when newer browsers can use other values.
I found that the margin and padding properties with images might move the position of images inconceivable way.
In forms work only some text properties. Border properties to SELECT and OPTION elements destroys the functionality of drop-down menus and in most cases crash browsers.
If you use simple properties, the only irritating feature is the element A. Netscape handle <A name="anchor_name"> as a pseudo-class even if it should not to do so. Only the attribute href (for example <A href="some.html">) should match to link pseudo-classes. It is possible to do this error following (the easier solution is to set the id attribute to nearest start-tag of some element (other than A); Unfortunately Netscape 4.x series browsers don't understand the attribute id as identifiers of anchors but just as identifiers of CSS or JavaScript encoding):
1. If you don't want to links at all underline, just define the element A (a {text-decoration:none}), when also <A href="some.html"> don't have underline.
2. Use old-fashioned way attributes like <BODY link=""...>. All pseudo-classes are then linked only for other browsers.
3. Connect the start-tag and end-tag together, for example < A name="anchor_name"></A>. The problem is, that this should always remember to do! Indeed anchors without any content doesn't work in some older browsers.
4. Use always a certain class like class="name", which define so, that there is no underline (text-decoration:none). Also this method has the same problem as in previous case (this should always remember to do).

W3C: CSS1 Test Suite: 5.5.25 float

A list of errors in the CSS1 Test Suite in my Finnish page is terrible long and in fact I should be longer, but I was not sure of some pages and I don't put them into the list.

Remember. The CSS-implementation of Netscape 4.x is in many matters very bad. Certain in many matters about the same level as MS IE 3.02 (the most important difference is to support most features of CSSP (P = position), which is today part of CSS2). The basic structures documents should base on HTML 3.2. Netscape 4.x must be handled primary as HTML 3.2 capable browser, which can give a little bit CSS.

Sections of page: