Tutorials
CSS
Web Design
XHTML
Javascript
PHP

CSS Tutorials
Satement Terminology
Colour Scrollbars
The Box Hack
Link Styles
Vertical Text
Non scrolling table
Visual Filters
Seperate Style Sheets
Rollover Effect 1
Rollover Effect 2


More information

Tutorials
Seperate style sheet for old browsers

Introduction
As you should be aware certain styles will not work in old browsers such as the version 4 browsers. If you want to use CSS but maintain support for these old browsers it is recommended that you create a style sheet especially for these old browsers.

This guide just shows you the most common way of including two style sheets so that old browsers will read from one style sheet which newer more complient browsers will overwrite with your more advanved style sheet.

The Code

You can easily make vertical text with the following css:

<link rel="stylesheet" type="text/css" href="simple_styles.css">
<style type="text/css">
     @import url(advanced_styles.css);
</style>

Your styles for older browsers should be contained in simple_styles.css. Old browsers understand the style sheet link <link rel=""... but they do not understand the @import rule so simply ignore that.

Newer browsers which understand the @import rul will read these styles and override the simpler styles. You have to be clever about it and only override those styles which you need to.



Simple Styles

To write your simple style sheet you should:

  • avoid a:hover
  • avoid display:block
  • use negative margin-top for headings (H1-H6)
  • avoid background shorthand
  • border shorthand works in NN4+, avoid other defintions
  • element heights
  • list styles

To get an accurate reference you really need to consult a complience reference chart such as ones you will find here:


Discuss this in the Forum  

Search HeaphyDesigns



Stored Pages



Change Site Style
Select a style for the site:




More information