Unicursal Path - Notes on the stylesheet

Style switcher

Notes on the stylesheet

A guide to what’s going on in the default stylesheet(s) used on this site, with links to more information about various techniques used.

Calling the stylesheet

The default stylesheet(s) are attached thus:

This method of calling the stylesheet is not recognised by NN4, due to the comma separated media list (with no gap after the comma). Anyone still using NN4 will see an unstyled page, which is perfectly useable. Including ‘projection’ lets Opera use this stylesheet in full screen mode.

Conditional comments are used to serve a small additional stylesheet, ‘ie–only.css’, only to IE. This stylesheet consists of various hacks to get around bugs in IE.

Global resetting

* { margin: 0; padding: 0; }

Different browsers have different default margin and padding values for different tags. This sets them all to zero to make layout easier, as discussed at leftjustified.net. Making all padding and margins zero affects everything, in particular it is worth checking the effect it has on form styling.

Setting fluid margins

h1, h2, h3, h4, h5, h6, pre, p, blockquote, ul, ol, dl, fieldset, address, form
{ margin: .5em 5%; }

li, dd { margin-left: 5%; }

Having set all margins and padding to zero suitable values are chosen for different tags. For a fluid design vertical spacing is defined in ems and horizontal spacing in percentages.

No borders on images

img { border: 0; }

Always worth doing because linked images are often given a border by default.

Getting consistent font sizes

body { font-size: 76%; }

Setting the font–size to 76% resets the value of 1em to 12px. This is done because the default 1em size differs across browsers.

h1 { font-size: 187.5%; font-weight: 400; }
h2 { font-size: 150%; font-weight: 400; }
h3 { font-size: 125%; font-weight: 400; }
h4 { font-size: 100%; font-weight: 700; }
h5 { font-size: 87.5%; font-weight: 700; }
h6 { font-size: 80%; font-weight: 700; }

The headers are sized, taking the body font–size into account, to be equivalent to 150%, 120%, 100%, 80%, 70% and 64%. This is done to make their size consistent across browsers.

Body styling

body {
margin: 0;
padding: 20px;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background-color: #fcf6e8;
word-spacing: 0.1em; }

Word–spacing is set 0.1em higher than the typical browser default. It is not recognised by IE5.

The layout containers

.centerpage {
position: relative;
margin: 0 auto;
text-align: left;
border: 1px solid #c78c02;
background-color: #fcecc5;
max-width: 66em;
min-width: 44em; }

This is used to center the page on the screen at higher screen resolutions. IE5 needs ‘text–align:center’ on the parent container — the ‘body‘ in this case — for this to work, so ’text–align:left’ is needed here.

‘position:relative’ is included to make ‘.centerpage’, rather than ‘body’, the datum for ‘.menubox’. In layouts with the overall width defined as a percentage this allows the absolute position of child elements to be defined without using percentages, which would cause flickering when resizing in IE5 (and possibly other browsers).

A script is used to make min-width, max-width and min-height work in IE, which does not otherwise support them.

.header {
border-bottom: 1px solid #c78c02;
background-color: #fcf6e8;
background-image: url(../images/orange-fade-40u.jpg);
background-repeat: repeat-x;
background-position: bottom left; }

A little bit of styling on ‘.header’.

.menubox {
position: absolute;
left: 15px;
width: 130px;
color: #463100; }

‘.menubox’ has no side padding or borders to avoid the IE5 box model problem. The width, in combination with the right margin of ‘.mainbox’, provides the horizontal spacing.

.mainbox {
margin: 0 0 0 155px;
background-color: #fcf6e8;
border-left: 1px solid #e5b33c;
padding-top: 1px;
padding-bottom: 1px;
line-height: 1.4;
min-width: 24em; }

‘.mainbox’ has no width, so it will not trigger the IE5 box model problem.

The top and bottom margins of the content are not enclosed automatically in early versions of Firefox. The small amount of top and bottom padding is added to trigger encloser. I don’t understand why this is.

Line–height is set slightly higher than the typical browser default because I think it looks better.

.footer {
border-top: 1px solid #c78c02;
background-color: #fcdb8c;
color: #000000; }

A simple footer.

A layout hack to help IEwin

/* Hide hack from IEmac \*/
* html .centerpage {height: .1%;}
* html .header {height: .1%;}
* html .mainbox {height: .1%;}
* html .footer {height: .1%;}
/* End hide hack from IEmac */

This hack gives IEwin ‘has layout’, which stops it from breaking the layout. It is in ‘ie–only.css’. For more information on this hack see www.tanfa.co.uk.

Floating images in the text–flow

.imageright {
float: right;
clear: right;
margin: .5em 7% .5em 2em; }

.imageleft {
float: left;
clear: left;
margin: .5em 2em .5em 7%; }

.caption250 {
float: right;
clear: right;
margin: .5em 7% .5em 2em;
width: 250px;
font-family: Georgia, "New Century Schoolbook", Times, serif;
text-align: center; }

Using .caption250 for a captioned image.

These floats are used to place images in the text–flow. Images with a caption use a class such as ‘.caption250’ — applied with a <div> tag — with a suitable width defined. The width should be changed to suit the image size.

For images floated in ‘.mainbox’ the classes ‘.imageleft’ and ‘.imageright’ can be applied directly to the image tag.

‘display:inline’ is added to ‘.caption250’ in ‘ie–only.css’ to fix the IE double margin bug. The IE double margin bug is explained well at www.positioniseverything.net.

Menu styling

The CSS–based fly–out/drop–down menu is adapted from the ‘Suckerfish’ method detailed at htmldog.com. Javascript is required to get IE to mimic the behaviour of the :hover pseudo–class used on <li> tags.

Form styling

fieldset {
border: none;
margin-top: 1em;
margin-bottom: 1em; }

label {
display: block;
float: left;
width: 7em;
text-align: right;
margin-right: 1em; }

input, textarea {
margin-bottom: 1em;
margin-right: 1em; }

input:focus, textarea:focus { background-color: #fcecc5; }

textarea { width: 55%; }

.formbuttons { margin-left: 9em; }

A neat form layout based on ideas from www.quirksmode.org.

The Unicursal Path