Double Vision – Give the Browsers CSS They Can Digest

The document has a table of contents linking to different headlines in the document via their ID. For non–CSS browsers this one gets displayed before the content. For the others, we want to display the table of contents next to the main text. We achieve that by positioning the TOC absolutely and giving the content a margin. Giving the content a vertically repeater background separates it from the TOC even further. We can apply a background to the content, as we know that it will always be longer than the TOC, otherwise, we’d have to use a background on the parent element of the two.

#toc{

    position:absolute;

    top:0;

    z-index:10;

    right:1em;

    width:17em;

}

#content{

    margin:0 16em 0 0;

    padding:0 2em 0 0;

    background:url(tocback.gif) repeat-y right 0 #f8f8f8;

}

The rest of the styling is more or less eye-candy. We define how links look in the content and the TOC, the same for lists and headlines. As technical articles often feature code examples that may break the layout, we set the overflow attribute of those to scroll, forcing the browser to display a scrollbar instead of expanding the whole page horizontally.

#content pre{

    margin:1em 3em;

    width:35em;

    overflow:scroll;

    padding:.5em;

    border:1px solid #999;

    background:#eee;

}

That is as far as we go for CSS2 challenged browsers like MSIE. For the Gecko, Opera or KHTML browsers out there, we go further by fixing the TOC to stay next to the content at any time.

html>body #toc{

           position:fixed;

}

This, however, renders the “back to table of contents” links useless, as the TOC never leaves the screen. Therefore we hide them:

html>body #content p.backlink{

           position:absolute;

           left:-999em

}