<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 Consolas if it's available or fallback to the default.

Answer 2

The default definition for the pre tag uses the monospace font (like in console).

font-family: monospace;

It is possible your definition suggests a different type of a font which is why your nice design breaks. You must either specify a system-specific monospace font (e.g. 'Lucida Console') or the fall-back alias 'monospace';

Answer 3

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