Tips and Tricks

Some CSS vs. NN 4.xx issues are already addressed at CSS Issues, and here are only a few more hints regarding the layout and the positioning.

• The Second Stylesheet:
  Now that you have a stylesheet that works fairly well in both browsers, you can start fiddling around with the second sheet. Simply copy the example.css, rename it StylesNN.css, change the name of the linked sheet to "StylesNN.css" and import the "Styles.css" for IE and other more modern browsers.
  
  
• I Want My Styles Back!
  You created a new class, let's say ".redhotalert" and adapted the .box class for it: red borders, and a width of 300px. You put this <div class="redhotalert"> somewhere in the main content area and now you see that below this box all styles are lost. NN 4.xx does that, as soon as you apply *any* width to a nested <div>. Only remedy: no width, not even {width: auto;}.
  
  
• Font Sizes:
  NN 4.xx renders fonts usually a bit smaller than IE. With a second stylesheet you simply adapt the fonts.
  Be careful with relative font sizes: there are not many users who know how to adapt text sizes to their liking, but text size can be changed - without knowing - by pressing the CTRL key while scrolling. Relative font sizes also have to be carefully tested in order to prevent the 'magical' growing or shrinking text.
  
  
• The KISS-Approach:
  Keep your style declarations simple. Use only the styles you know and discard properties you don't need. If you want only certain words to be bold, and the rest to be normal, then declare <strong> or <b> where you need it and forget about declaring {font-weight: normal;} at every possible instance. Comment your styles, especially if you use shorthand! 6 months after you've created the stylesheet you have probably forgotten the correct order that this particular shorthand requires, and debugging a mangled mess of styles is no fun.
  
  
• NN 4.xx crashes:
  Read all about block-level elements and inline elements. Don't apply line-height to inline elements. Careful with float and clear. Remove the style you are experiencing troubles with, piece by piece.
  
  
• To position a link:
  Do not position links in NN 4.xx - the link becomes un-clickable. Wrap a DIV around it.
  
  
• Play Around!
  This is only a simple little page, but there are so many possibilities! Try to set the body background black and the fonts in white: that is no hassle - you change a few color and background-color declarations. You could discard the .Content class and position the <p>, <ul> and <h> elements with a margin-declaration: that could come in handy if you want certain JavaScripts to fire within an absolutely positioned <div> (NN 4.xx seems to have problems otherwise).
  
  

 Back to the Top 

In one short sentence: the time for CSS is here and now. Use it.


On the next page Materials, you'll find the graphics used here, as well as the stylesheets.

HINT: To implement CSS successfully in the design of your web site, you should be a little familiar with CSS, and this tutorial is no substitute for a book like Cascading Style Sheets - The Definitive Guide (O'Reilly Books), by Eric Meyer or Cascading Style Sheets - Designing for the Web (Addison-Wesley) by Håkon Wium Lie and Bert Bos.

I recommend that you take a look at Eric Meyer's Master grid, and at the "Home page" of CSS which you can find at www.w3.org/Style/CSS.

P@tty Ayers has written a wonderful Link-Styles Tutorial that shows how to style links on a web site, and Project VII explains "pseudo" classes and how they are implemented.

More questions? Is your 'pet' question missing? Ideas? Please mail me at .