CSShark - Netscape 4 Issues: Forms
The CSS Know-How Site

CSS and Netscape 4.xx Issues

PerFORMance with CSS

When dealing with FORMS, INPUT and TEXTAREA, using two stylesheets is a necessity.

NN 4.xx does not handle certain properties such as border properly, instead of simply ignoring a declaration, Netscape does strange things.

Let's declare the styles for INPUT and TEXTAREa:

TEXTAREA, INPUT {
        font-family: Georgia, "MS Serif", "New York", serif;
        padding: 2px; /* a bit of breathing room*/
        font-size: 13px;
        color: #FFFFFF;/* The text in white*/
        background-color: #3499CC;/* Background-color: dark blue*/
        border: solid 1px #C71585;/* and a red border*/
}

This is a styled TEXTAREA

In NN 4.xx it is displayed as one line, a blue background, the white rim between the background and the orange border, and the text in white. But, it's not a TEXTAREA and you can't type something in.

 Back to the Top 

So you have to declare two different styles. One for IE, and the other one without any "dangerous" properties for NN 4.xx as follows:

FORM {font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #000080;
  background: #DFEFF7;
  border: 2px solid #3499CC;
  margin-left: 50px;
  padding: 3px;
  width: 400px;
}

TEXTAREA, INPUT, SELECT, OPTION, .area {
font-family: "Andale Mono", "Courier New", Courier, monospace;
font-size: 15px;
}

Be advised that NN 4.xx does not render the input fields the same way as IE does.

If you use a proportional font like Arial, Verdana or Georgia, NN 4.xx calculates the text fields to "widest possible letter * (times) the number of possible letters", and stretches the input or textarea fields to this point. If you set the font-family in the NN-stylesheet to a monospaced font, like:

 Back to the Top 

{font-family:  "Courier New", Courier, monospace;}

then NN calculates a "normal letter space".

But why did NN 4.xx not accept the TEXTAREA as a textarea?

The answer is: INPUT, SELECT, OPTION and TEXTAREA are inline elements. NN 4.xx transforms an inline element that has a line-height, border, padding, or a margin into a block-level element and introduces a line break before and after the element. Additionally, if you apply a border property to those form elements, NN 4.xx displays a little box and not an interactive field.

But you can use a proportional font for the FORM itself, and even color, background and a border as you see in the code-example above.

The stylesheet for IE and other modern browser looks like this:

FORM {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000080;
background: #DFEFF7;
border: 2px solid #3499CC;
margin-left: 50px;
padding: 3px;
width: 400px;
}

INPUT, TEXTAREA {
        font-family: Georgia, "MS Serif", "New York", serif;        
        padding: 2px;
        font-size: 13px;
        color: #FFFFFF;
        background-color: #3499CC;
        border: inset 1px #C71585;
}

SELECT, OPTION {
        font-family: "MS Serif", Georgia, "New York", serif;
        padding: 2px;
        font-size: 13px;
        color: #FFFFFF;
        background-color: #008080;
        border: outset 1px #adff2f;/*for demonstration only*/
}

 Back to the Top 

This is a Form with an input field

and another TEXTAREA

A SELECT box with OPTIONs:
Home Basics NN4.xx Issues Positioning

as well as a Checkbox
a radiobutton: and a Submit Button:

Unfortunately, the styling of radio buttons, check boxes and the border of select boxes is not (yet) supported by browsers - but NN6.2 shows that these features will be supported in the future.

NOTE:

NN4.xx likes to lose all styling, usually after tables or form elements. One way to work around that is to wrap the form in its own <DIV> or each segment in their own <DIV> or <SPAN>.

The other way is to reliably define the styles in each element: Declaring the font-family and color in the BODY alone and trusting Netscape's ability to inherit styles does not work. Specifically declare font-family, color and other vital information in the P, TD, UL, OL, LI and other elements that you will use on your site in the NN4.xx stylesheet.

Don't use a <p> element inside a form. NN4.xx not only breaks the form, but also loses some of the styles following the form.

Also, note that TEXTAREA does not really take the font-family declaration. I found that wrapping the textarea in a <span> or <div> will convince NN4.xx to apply the styles.

Other issues:

•  Why use different styles for NN and IE - and how?
•  Background
•  Font: Sizes and Inheritance
•  Tables, Lists
•  Forms
•  Line Height, Margin, Border and
•  Miscellaneous