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

CSS and Netscape 4.xx Issues

Line Height, Margin, Border

Some block elements, such as p, h1 - h6 and blockquote have default top and bottom margins. You will not be able to set them to zero using margin-bottom: 0;, etc. Using negative margins may be possible, but this of course won't work on other browsers.

If you want to be able to control top and bottom margins for block elements, you need to use div elements, since they have default top and bottom margins of zero width.

This also works for list elements like <li>, <dt> and <dd>, and since there are sometimes problems with these properties applied to entire lists (ol, ul, or dl elements), the safest way control margins, padding space, or borders around an entire list is to wrap the list element in a div element, and then apply margins, padding and borders to the div.

To set the margins in shorthand, you use the following sequence (also for borders):
top - right - bottom - left
(or, as a memory jogger: TRouBLe)

CSS is able to pair the values: If you want to set a value for the top margin and not a different value for the bottom margin, then you only have to declare this one value. The same happens with the right margin and the left margin.

This allows you to write a shorthand style like {margin: 0px} and CSS translates that into: The margin-top has the value of 0px; the margin-right is set to 0px; the margin-bottom is 0px and the margin-left is also 0px.

Therefore, if you want to set the top and bottom margins to 0px, the left margin to 150 px and the right margin to 10px you write the following shorthand:

{margin: 0px 10px 0px 150px;} or, even shorter: {margin: 0px 10px 150px;}

Use the line-height declaration very carefully with NN 4.xx, and only in blocklevel elements like <p> (paragraph) and <h> (heading), and probably with <tables> or <td>s.

If you apply the line-height declaration to replaced elements like images, NN4.xx will behave quite unpredictably. Also, be careful with % and relative length units when applying line-height to block level elements - probably the line height will be rendered, but differently from IE and NN 6.

It could be useful to have an extra class with the line-height declaration and apply this class to the tags you want to style with line-height.

If you want to get rid of the default margin between paragraphs or headings, you can set the margin-property in the IE-stylesheet by writing

H1 {margin: 0px;}

but that doesn't work for NN 4.xx. A work around is to set the margin values in the NN-stylesheet to negative values, like:

H1 {margin: -5px;}

Borders are, like margins, quite problematic with NN 4.xx; border colors and styles can only be applied to all four sides at once with the border-color and border-style properties. The safest way is to apply all four sides in shorthand, like

.special {margin: 0px; border:2px solid #000000;}

 Back to the Top 

Remember, dotted and dashed border styles are not supported.

Important: If you want a border, you have to declare the border-style. It does not matter if you write the border-properties in shorthand or each single property, but no border-style means no border at all. The other values of a border, like color and width are set by default: the color by the color of the parent element, and width will be rendered in medium.

NN 4.xx transforms an inline element that has a border, padding or a margin into a block-level element, and introduces a line break before and after the element.

Be careful when applying any border, padding or margin properties to anchors (A) - the A element is an inline element, and if you declare any of those properties directly then NN4.xx will render that anchor 'unclickable'. If you want to declare those properties, wrap the anchor element in a <div>.

If you apply CSS-styles to HTML tags like <INPUT> or <TEXTAREA>, do not declare any border properties. NN 4.xx will display a small little box with the border styles, but the INPUT field or TEXTAREA field will not display. Another good reason to use two style sheets.

The issue of the missing background-color between the margin and the border of an element is addressed in the Background-section.

One interesting fact about borders and NN 4.xx is that if you declare a border property like

P {font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
      color : #000088;
      background-color: #FF0000; 
      font-weight : 500; 
      font-size : 1em;
      border: 0.1px solid none;}

the background color will be applied to the whole element. Usually the background color will be shown only behind the text, and not for the entire area.

HINT: Do not apply box elements like borders or margins to inline elements in NN 4.xx, it can cause a crash (Inline elements like <span>, <strong> etc. are elements that do not begin or end a line, in contrast to block-level elements like <p>, <body> or <div>).

Other topics:

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