RichInStyle.com AlwaysWork style

RichInStyle.com's AlwaysWork style sheets have been optimized to work perfectly on every browser. Their aim is that every browser that supports style sheets should be made more attractive to look at as a result of them. In no case are they known to cause adverse effects.

In order to achieve this, it has been necessary to use a variety of browser 'detection' methods, which exploit the shortcomings in the browsers to present them all with styles that they can cope with. Here's a brief explanation of what's going on:

Use of @import - presents style to only to the unbuggy browsers
Use of /* */ following property declaration to hide margin-left and line-height declarations from IE 3, which has problems with them.
Use of pixels for Netscape and IE 3 and ems for other browsers via addition of BODY to selectors to increase their specificity thereby overriding the normal order sorting.

You are seeing an AlwaysWork style sheet in action at the moment. If you would like to view one, click here.

Advantages of AlwaysWork

They improve the browsing experience in all browsers without worsening it any.
They are highly compact - only 5kb in total for both style sheets, and less than 3kb for just the core module.
They use the best possible style methods - avoiding the problems associated with relative units for those browsers that can't cope with them while still giving them to those that can

Downloading an AlwaysWork style sheet

AlwaysWork style sheets comprise two parts 'all.css', which, as the name suggests, is given to all browsers, and 'okbrowsers.css', which is only given to browsers that support CSS to a reasonable level (and which provides an enhanced browsing experience for these browsers).

Click here to view and/or download all.css.

Click here to view and/or download okbrowsers.css.

Linking to an AlwaysWork style sheet

To link to an AwaysWork style sheet, simply add the line <LINK rel="stylesheet" href="all.css" type="text/css"> to the <HEAD> of your page. For example:

If you prefer you can change the href so that it links to a different path; e.g., '/style/all.css'. In all cases however, all.css and okbrowsers.css must be in the same directory as each other, and in the directory referred to by the LINK.

Other versions of the AlwaysWork style

By default, the AlwaysWork style does not specify line spacing for Netscape. This is because where line spacing commands inherit into form controls they cause slight overlap; and, in the case of multiline text fields (TEXTAREA), very serious overlap. Although this can be avoided (and as such the version of the AlwaysWork style used on the RichInStyle.com does specify line spacing for Netscape, since the time has been spent checking to workaround the problem), to do so takes a little time, and as the AlwaysWork style is intended to be a one-stop trouble-free style solution, the default download doesn't include these line spacing commands.

If you don't use any form controls, or if you are prepared to spend the time (probably only five minutes or less) to change things, feel free to use this style sheet, which does specify line spacing for Netscape: allheight.css.

In addition, even if you do, you can work around this bug by ensuring that all form controls are enclosed in an element that has (precisely) this style attribute: style="line-height/* */ : normal". For example:

<FORM action="http://foo.com/cgi-bin/foo.pl">
<p style="line-height/* */ : normal"> You can click here to submit this form: <INPUT type=submit>

In that case, you should also use this style sheet: allheight.css.

Smaller fonts

By default, for reasons of accessibility, the style sheets use text that is the size that the user prefers. I would strongly recommend that you retain this. However, different versions (of all.css) are available if you wish:

In addition, in each case an alternative version of okbrowsers.css (called okbrowsers2.css) is required, which these style sheets link to.

Less space between lines

If you find that there is too much space between lines (the style sheet uses a large line height, which might not be suitable for all types of pages), you need different versions of both the core style sheet and that which is served to better browsers. You should:

For all.css:
1. select one of the five style sheets above, which don't specify line heights
2. use the default style sheet, which also doesn't specify a line height
For okbrowsers.css:
1. use this file, called okbrowsersh.css, which should be renamed to okbrowsers.css if used with the default style sheet, or to okbrowsers2.css if used with the style sheets that specify smaller font sizes.

Editing AlwaysWork style sheets

That's all you need to use these styles. If you are happy as they are, you can stop reading this now. Although you can use them as they are, you are free to edit AlwaysWork style sheets. However, if you do, you must indicate in the file that you have done so. You may not, however, edit the copyright message, which must always remain intact.

Practical suggestions for editing AlwaysWork style sheets

Although AlwaysWork style sheets are designed to be as compact as possible, you will likely still find them a rather daunting prospect. In general what happens is that a problematic style declaration such as SELECTOR {line-height: 1.4}, appears twice, once in all.css as SELECTOR {line-height/* */ : 22px}, and once in okbrowsers.css as BODY SELECTOR {line-height: 1.4}.

In all.css, there is the following text, which represents what you might want to change:

/* Change or remove any of the following */

ADDRESS, BLOCKQUOTE, BODY, CAPTION, CENTER, DD, DIR, DIV, DL, DT, FORM, LI, MENU, OL, P, PRE, TD, TH, TR, UL {font-family: Geneva, Helvetica, Arial, sans-serif}

ADDRESS, BLOCKQUOTE, BODY, CAPTION, CENTER, DD, DIR, DIV, DL, DT, FORM, LI, MENU, OL, P, PRE, TD, TH, TR, UL {color: black}

A:link {color: blue;
text-decoration: none}

A:visited {color: blue;
text-decoration: none}

A:active {color: blue;
text-decoration: none}

A:hover {color: blue;
text-decoration: underline}

BODY {margin-left: 10%;
margin-right: 8%;
background: #fff}

H1, H2, H3, H4, H5, H6 {color: #900}

H1, H2, H3, H4, H5, H6 {font-family: Geneva, Helvetica, Arial, sans-serif}

PRE {border: solid thin;
padding: 1em 3%}

H1 {margin-left/* */ : -4%}

H2 {margin-left/* */ : -4%}

H3 {margin-left/* */ : -3%}

H4 {margin-left/* */ : -3%}

H5 {margin-left/* */ : -2%}

H6 {margin-left/* */ : -1%}

The first ruleset controls the font that you you want the body to appear in
The second ruleset controls the color that you you want the body to appear in
The third ruleset controls the color that you you want unvisited links to appear in. Change 'none' to 'underline' to underline those links.
The fourth ruleset controls the color that you you want visited links to appear in. Change 'none' to 'underline' to underline those links.
The fifth ruleset controls the color that you you want links being activated to appear in. Change 'none' to 'underline' to underline those links.
The sixth ruleset controls the color that you you want hovered-over links to appear in. Change 'none' to 'underline' to underline those links.
The seventh ruleset controls the color that you you want headings to appear in.
The eighth ruleset controls the fonts that you you want headings to appear in.
Remove the ninth ruleset to remove the border from PRE.
Remove the rest of the file to remove the outdent from headings.

Simply change the values to those that you prefer. To change the color I would recommend that you use RichInStyle.com's Websafe Colorizer.

In okbrowsers.css, there is the following text, which represents what you might want to change:

/* Remove the below to remove the background from PREformatted text */

BODY PRE {background: #ddd}

/* Uncomment the below to remove the outdent from headings */

/* 
BODY H1, BODY H2, BODY H3, BODY H4, BODY H5, BODY H6 {margin-left: 0}
*/