Sample Code and Pre-formatted Code Output

One particular HTML element that has been taking up way too much of my time lately is the <code> tag. Different browsers will render the contents of this tag differently depending on how the CSS properties (such as line-height, font, and/or font-size) are declared.

It is a constant battle to ensure that elements will render correctly, and even when you think you’ve gotten everything worked out perfectly, you may find that Safari, for instance, doesn’t know what to do with an unordered list of encoded text:

• Safari
• may not
• render this
• worth a damn

And even when you’ve gotten all that figured out, you still have to ensure that the <pre> tag is styled properly and renders consistently across a wide range of modern browsers.

code {
	font-family: Consolas, Monaco, Courier, sans-serif;
	font-size: 14px;
	line-height: 1em;
	color: #050;
}