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

Meet the Author

Chris Pearson

Chris Pearson, Thesis creator and DIYthemes founder, is obsessed with optimizing the web and making sure every last detail receives the attention it requires.

2 comments… add one

Leave a Comment