<pre> tag and css font-family

Question

I have html with code below:

<pre>
                                      |       Date Offense |       Count |
   Title, Section & Nature of Offense |          Concluded |   Number(s) |
--------------------------------------------------------------------------
              18:2113(a)-BANK ROBBERY |   January 27, 2009 |           I |
--------------------------------------------------------------------------

</pre>

It works perfect in a simple page, but when I have added css with font-family defination, it performs ugly, the format is not tidy any more.

Any suggestions? Thanks!

Answer 1

You must use a monospace font (also known as typewriter font). That is a font in which all the characters take the same space.

In CSS the font name monospace is translated to the default monospace font on the user system. It's good practice to include monospace at the end of a font-familly list for the <pre> element so that it can be used as a fallback.

For instance:

pre {font-family: Consolas,monospace}

will use the Consolas monospace font if it's available or fallback to the default.

Answer 2

Surprising! When I have posted this question, the display of Stackoverflow is just what I want.

So the solution is:

pre
{
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  margin-bottom: 10px;
  overflow: auto;
  width: auto;
  padding: 5px;
  background-color: #eee;
  width: 650px!ie7;
  padding-bottom: 20px!ie7;
  max-height: 600px;
}