The Coding Journal of a Cyberfox

CSS Precode & code/pre...
Greetings,
If you look at the source to this page, you'll see at the top:

<style type="text/css">
<!--
PRE {
        background-color: #D0D0D0;
}
CODE {
        background-color: #D0D0D0;
        white-space: pre;
        font-size: 120%;
}
-->
</style>

Then when you look at the code examples in earlier journal entries (and above), you'll see:
<code><pre>...</pre></code>

This is all CSS stuff... I basically override the PRE tag (which operates on a 'block' basis), to have a background color of medium gray, and the CODE tag to have the same, plus white-space like PRE, plus a 120% increase in font size to make source clearer.

What's super-frustrating is that I have to wrap source code layout in BOTH <code> and <pre>. This is because IE 5 doesn't support the white-space: pre CSS entry. If it did, I could wrap everything in just <code> tags. Since it doesn't, I had to wrap everything in <pre> and <code>, because Mozilla has a special font that it uses for <code>, which I couldn't manage to force <pre> to use.

Basically, it's really unhappy browser incompatibilities. However, I think I've worked it out reasonably well. If you want to include source listings in your page, use the CSS I listed at the top, as follows.

Go to your Modify Journal page on LiveJournal.

Go down to the bottom Overrides section, and paste the following in:

GLOBAL_HEAD<=
<style type="text/css">
<!--
PRE {
        background-color: #D0D0D0;
}
CODE {
        background-color: #D0D0D0;
        white-space: pre;
        font-size: 120%;
}
-->
</style>
<=GLOBAL_HEAD

Click Save Changes, and that's it! Now surround the space formatted source code in your journal entries with:
<code><pre>...</pre></code>

That's it! You might want to customize the background-color, or anything like that... Many more CSS overrides are available, check out a very useful reference over at the w3c.

If you can be relatively certain of your browser visitors, or at least that they will have upgraded to IE6 or Mozilla, then you can probably just use the <code> override I mention above, with the following addition: display: block in the CODE CSS area. Then you could just wrap code segments in <code> and it would look fine. One caveat, however, using just <code> will not work with those changes if you want it inline like I've used all over my document here. It's because of that that I recommend punting, and sticking with both tags for blocks of code and just <code> for inlined code-like text. That's why most of the smarts in my CSS are in the CODE block, and it just relies on the PRE block for the whitespace management under IE5, and the blocking so the background color fills the rectangle around the code.

-- Kilroy Balore, CyberFOX!

Current Mood: geeky
Current Music: (Christina Aguilera)-What a Girl Wants

Advertisement