lime icon

Phosphorus and Lime

A Developer's Broadsheet

This blog has been deprecated. Please visit my new blog at klenwell.com/press.
Monday, September 26, 2005
CSS: Reference/Quotation Styles
Three different 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;
background:#fcfcfc;
border:solid thin #f6f6f6;
font: bold "MS Trebuchet",arial,sans-serif;
color:#c06000;
}


.code

.code
{
margin-bottom:0px;
padding:1em;
font-size:11px;
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; /* CSS2.1 compliant */
white-space: -moz-pre-wrap; /* Mozilla-based browsers */
white-space: -o-pre-wrap; /* Opera 7+ */
_white-space: pre; /* IE */
}


.ipod

.ipod
{
margin-bottom:0px;
padding:1em; line-height:1.5em;
background:#d2e2f2; color:#3c4782;
font-family:Lucida Console,Monaco,monospace;
font-weight:normal; font-size:11px;
border:1px solid #3c4782;
white-space: pre-wrap; /* CSS2.1 compliant */
white-space: -moz-pre-wrap; /* Mozilla-based browsers */
white-space: -o-pre-wrap; /* Opera 7+ */
_white-space: pre; /* IE */
}


The negative bottom-margin compensates for the auto-linebreak setting on Blogger.
» add your comment