Home arrow Style Sheets arrow Page 7 - Double Vision – Give the Browsers CSS They Can Digest
STYLE SHEETS

Double Vision – Give the Browsers CSS They Can Digest


Some but not all browsers support CSS2. You can deliberately code your website so that users of either kind of browser will see pages that are appropriate for what their browser can handle. Older browsers won't gag, but you will still be able to take advantage of what you can do with CSS2 in the newer browsers. Read on to find out how.

Author Info:
By: Chris Heilmann
Rating: 5 stars5 stars5 stars5 stars5 stars / 15
February 22, 2005
TABLE OF CONTENTS:
  1. · Double Vision – Give the Browsers CSS They Can Digest
  2. · The way of the dark side – code forking
  3. · The way of confusion – browser hacks
  4. · The way into the future – progressive enhancement
  5. · The child selector
  6. · Enhancing with the child selector
  7. · The screen display style sheet
  8. · The print style sheet

print this article
SEARCH DEVARTICLES

Double Vision – Give the Browsers CSS They Can Digest - The screen display style sheet
(Page 7 of 8 )


 

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

}

 


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials