Notes on the stylesheet

Switch Style

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

Calling the stylesheet

The default stylesheet is attached thus:

Pretty standard. The class is for the style switching script. 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 old versions of 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 new margins

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

li, dd { margin-left: 24px; }

Having set all margins and padding to zero suitable values are chosen for different tags.

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: 80%; }

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; }

Setting default font–sizes because the defaults differ across browsers.

The layout containers

.centerpage {
position: relative;
margin: 0 auto;
text-align: left;
background-color: #e4e4e4;
border: 1px solid #999999;
width: 948px; }

This container is used to center the page on the screen. 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).

.header {
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
background-position: 0 0;
height: 200px;
border-bottom: 1px solid #999999; }

A little bit of styling on ‘.header’. The height is set to suit the background image.

.menubox {
position: absolute;
left: 20px;
margin-top: 32px;
width: 140px; }

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

.mainbox {
margin: 0 0 0 170px;
background-color: #eeeeee;
border-left: 1px solid #999999;
padding: 1px 36px;
line-height: 1.4;
}

‘.mainbox’ has no width, so it will not trigger the IE 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 #999999;
background-color: #dddddd; }

Nothing to say about the footer.

Floating images in the text–flow

.imageright {
float: right;
clear: right;
margin: .5em 12px .5em 24px; }

.imageleft {
float: left;
clear: left;
margin: .5em 24px .5em 12px; }

Using .caption250 for a captioned image.

These floats are used to place images in the text–flow.

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

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: .5em;
margin-bottom: .5em; }

label {
display: block;
float: left;
width: 6em;
text-align: right;
margin-right: 12px; }

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

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

textarea { width: 55%; }

.formbuttons { margin-left: 8em;
margin-top: 1em; }

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

The Unicursal Path