TJKDesign: Home Page

ez-css Putting the 'less' in table-less layouts. css-101 logo
Bookmark this article at these sites:

Using CSS to style a code listing.

Thanks to Philippe Wittenbergh, this solution is now wrapper-free (read this though).

The challenge:

  • if the author decides to let the text flow (depending on the width of the parent container), it must do so without disturbing line numbering
  • line numbers must not be hardcoded
  • numbers must appear in a "gutter"
  • text resizing must not break the layout nor disturb line numbering
  • markup must be semantic (no structural hack)
  • markup must be "hook free" (no ID, no CLASS)
  • CSS must be plain and simple

In a hurry? Check the bottom of this page

The markup

I am using an OL (Ordered List) as I believe it is the most appropriate HTML element to use since we are dealing with a list of code lines for which order matters. The reward we get from using this semantic element is that it naturally handles the numbering of the lines for us, so there is no need to worry about deleting or adding a whole LI (list item) later.

  1. <ol>
  2. <li><code>ol {background:#036 url(/img/gutter.gif) 2.3em 0 repeat-y;overflow:auto;font-family:"Courier New",Courier,mono;margin:0;padding:1em 0 1em 2.8em;color:#fff;width:90%}</code></li>
  3. <li><code>ol li {background:#ffc;font-size:small;}</code></li>
  4. <li><code>ol code {color:#036;}</code></li>
  5. </ol>

The CSS

After using white-space:pre and the proper whitespace and returns, the markup in the listing above produces the one below:

  1. ol { background:#036 url(/img/gutter.gif) 2.3em 0 repeat-y; overflow:auto; font-family:"Courier New",Courier,mono; margin:0; padding:1em 0 1em 2.8em; color:#fff; width:90%; }
  2. ol li { background:#ffc; font-size:small; }
  3. ol code {color:#036;}

Use this file if you wish to cut and paste the above rules.

white-space:pre causes whitespace to be treated as it is in the HTML element PRE, with whitespace and returns fully preserved. Note that using this declaration can break the layout in Internet Explorer 5/6 if the content is too large for the container. You will need to wrap the OL in a DIV if you experience this behavior.

How things work

Everything is pretty much semantic, we insert the lines of code between CODE tags and then wrap them again inside LIs (List Items).

We use the background image as a mask to make sure we can add padding, or let the inner elements scroll horizontally, without revealing the OL's background color (dark blue) that creates the gutter. This is why we use a "repeat-y" value and set the x-axis to 2.3em. This is the background image.

On the CSS front:

  • We use left padding for two reasons:
    • it creates the gap that reveals the background color used for the gutter.
    • it makes Internet Explorer bring the numbers inside the container.
  • The color declaration in that same rule is to style the numbers (see below how we "reset" this value).
  • The overflow:auto declaration is to make sure we keep everything inside the boundaries of the box no matter how large its children might be.
  • We need to declare a background color for the LIs, because with images "off" foreground and background colors would match.
  • The CODE element inherits the color declaration from the ol {...} rule, so we need to declare one for this element else the text would appear white on the yellow background.

Plugging a few SPANs and attributes is all we need to make a listing look much nicer:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>How to style a Listing with CSS</title>
  5. <!--#include virtual="/inc/aBunchOfStuff.asp" -->
  6. <script type="text/javascript" src="/js/generic.js"></script>
  7. /* must not show on this page */
  8. <style type="text/css" media="screen">
  9. #logo {visibility:hidden}
  10. </style>
  11. </head>

Things to consider

  • Use the HTML element PRE instead of a "white-space:pre" declaration if you need to preserve whitespace and returns in Internet Explorer 5 (Win) or when the document is unstyled.
  • IE 5.5 needs the following declarations to show the line numbers:
    • ol {padding-left:0;}
    • ol li {margin-left:2.1em;}
    Note that using the background image of a wrapper to create the gutter takes care of the issue in both IE 5.0 and 5.5
  • Cutting and pasting a listing may be challenging as most applications will not ignore the numbering. If you think this is an issue, I suggest offering a link to a .TXT file as I do in this article.

Please use this contact form to send feedback and report errors.