lime icon

Phosphorus and Lime

A Developer's Broadsheet

This blog has been deprecated. Please visit my new blog at klenwell.com/press.
Tuesday, August 08, 2006
CSS: Reference/Quotation Styles Updated
Just realized that my code, stylesheet styles were missing a definition for whitespace in IE. Did a little research and found this -- the definitive tutorial on css whitespacing:

Whitespace and generated content (http://cheeaun.phoenity.com)

That works fine when style the <pre> tag. But when used with a new class, it also requires one more IE-specific hack:

_white-space: pre;


Otherwise, the same three types of reference styles. For straight quotations: .quote. For displaying code: .code. And for displaying style sheet code: .ipod.

.quote

.quote
{
margin:3px 6px;
padding:8px;
font: bold "MS Trebuchet",arial,sans-serif;
color:#c06000;
background:#fcfcfc;
border:solid thin #f6f6f6;
}


.code

.code
{
margin-bottom:0px;
padding:1em;
font-size:.9em;
font-family:"Lucida Console",Monaco,monospace;
font-weight:normal;
line-height:1.5em;
color:green;
background:#eee;
border: 1px solid #ccc;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
_white-space: pre; word-wrap: break-word; /* Internet Explorer 5.5+ */
}


.ipod

.ipod
{
margin-bottom:0px;
padding:1em; line-height:1.5em;
background:#d2e2f2; color:#3c4782;
font-family:"Lucida Console",Monaco,monospace;
font-size:.9em;
font-weight:normal;
border:1px solid #3c4782;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
_white-space: pre; word-wrap: break-word; /* Internet Explorer 5.5+ */
}


keywords: code, ipod, pre, wrap, pre-wrap, moz, whitespace, quote, quotation
» add your comment
Helloo nice post
comment by Anonymous Clinton Solar Panels at 3:11 PM, August 08, 2022