Skip over navigation
This web site is about Cascading Style Sheets as a means to separate the presentation from the structural markup of a web site, and it will help you answer some of those frequently asked Questions, explains some of the Basics of CSS, gives you tips and tricks for tackling the problems with Netscape 4, offers you a tutorial about Positioning with CSS (CSS-P, web design without tables). There is also a page with interesting Links.
This page uses CSS to present the content in the best possible manner. If you can see this message, then CSS (or JavaScript) is not enabled in your browser, and the page will not appear as the designer intended.
Unless told otherwise, NN 4.xx and IE leave a small space of about 10px on the left and top of the page (of course the actual number is different in NN 4.xx and in IE!). To have your design sit flush in the upper left corner you should specify a margin in a CSS redefinition of the BODY-tag by writing
BODY {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:
BODY {margin: -10px 0px 0px -10px;}
NN 4.xx can't render certain background properties, like background-position or background-attachment. A background declaration like:
BODY {
font-family : Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/yourimage.gif);
background-repeat: no-repeat; /*no-tiling background*/
background-position: center;
background-attachment: fixed;
background-color: #hexcolor;
color : #hexcolor;
margin: 0px;
}
shows a background-image in the center of the <BODY> element, non-scrolling and non-repeating - in IE or NN6. NN 4.xx gets the non-repeat-part right, but stuffs the picture in the upper left corner and scrolls happily everafter...
The only practical way to circumvent this problem would be:
... and learn to live with the fact that some visitors to your page will not exactly see what you want them to see. At least this degrades gracefully and does not hinder the usability of your site.
This makes sense if you use two stylesheets, because only that method offers you the possibility to specify two different background pictures.
To exactly position the background with background-position is fairly difficult with all the different possibilities you have in a compliant browser, and I recommend that you read the very thorough explanation in Eric Meyers' book (page 178 - 187) or Lie/Bos (page 239 - 242).
Another issue with backgrounds is that of color. NN 4.xx does not apply the background color in the area between the background and the border, except in absolutely positioned DIVs. In this case use the proprietary "layer-background-color".
Note: The shorthand property for background is better supported by NN4.xx than the single properties.
If you have problems getting your background-color to show, try
selector {background: [color] [image] [repeat] [attachment] [position];}
where you can use all or any property values. There is no rule how many of these properties 'background:' has to have, therefore it can contain one single property - background-color, for example.
The syntax is: {property: value value value;} - the values are not separated by a semicolon in the shorthand syntax.
Other topics: