Styling a <pre> tag

I am styling my <pre> on my template document and have some questions. First, I tend to gravitate to semantic correct CSS and xHTML. Thus chose xHTML strict for my template document and have been extensively styling the CSS style sheet.

The <pre> tag presents the latest dilemma. Basically, I came across this link where the developer presented CODE in a <textarea> tag. The code did not require entities, &lt; or &rt; in the markup. These styling attributes appealed to me; inset design and overflow with scrollbars for extending text beyond the page.

Bottom of the Page
http://www.evolt.org/article/HTML_is_not_an_acronym/17/35750/

The developer also used presentational styling in the markup. HTML strict does not allow one to use style attributes in the HMTL; besides the style sheet. But my sensibilities gravitate toward using semantically correct markup. Most people, including myself, use div containers with classes or ID for presentational styling. But for this exercise, the <pre> or <code> tag are preferable since these classes serve to present (you guess it) code.

One annoyance about the <pre> relates to indenting the markup (the actual text file). By default (and by design), <pre> tag incorporates any indents or white space in the browser. My thoughts revolved around changing the wrapping property to account for line breaks and disregard white space. Then, in theory, one could indent the markup for readability. This document is for personal use and semantically organized and indented for readability. The correct markup will help me understand or edit the document two years from now. In addition, it forms my quick reference to copy & paste tags.

The following class style did not produce the <textarea> desired attributes.

pre.CodeExample {
	/*background-color: transparent;*/
	border: medium inset #CCCCCC;
	font-family: "Courier New", Courier, monospace;
	margin: 1em 2em 1em 2em;
	overflow: auto;
	padding: .5em .5em .5em .5em;
	white-space: nowrap;
}

Code (markup):

Please let me know what are the default CSS attributes for the <pre> and <textarea> tags.
Please let me know if you have any suggestions about styling the <pre> tag or links to cool implementations. You may review my markup at the following link.

http://www.geocities.com/robert_neville310/Template_Sample.html#blockquote

The Blockquote section has several methods for displaying code. I am looking to consolidate and standardize my classes. Suggestions are welcomed.

div.ExampleOutput
pre.CodeExample

 

Robert, people will more likely help you if you ask short, to-the-point questions.

This is not true. Only XHTML Basic (cell phone and simple PDA thing) does not support <style>. XHTML and HTML strict do allow this element.

Honestly, I'm not sure what was the exact question. If I understood you correctly, this sample would be what you are looking for.

<pre style="width: 400px; overflow: auto; height: auto; border: 1px solid #AAA; background-color: #EEE; padding: 5px 5px 15px;"><code>var a;
var b = document.getElementById("b1");
</code></pre>

Code (markup):

One thing to keep in mind here is that when the text inside overflows the box, IE adds scroll bars inside the box (keeping height and width intact) and FF makes the box larger by the size of the scrollbars. Adding padding at the bottom makes the code look better in IE. According to the CSS spec, IE does the right thing:

Use <pre><samp> and <pre><code> instead. If you need to differentiate between different <pre> elements, use this:

pre.my-class-1 code {...}
pre.my-class-2 code {...}

J.D.

 

I discovered the Firefox’s defaults in the following location, which gave me a better understanding what properties applied to the tags.

Program Files\Mozilla Firefox\res\html.css

plaintext, xmp, pre {
  display: block;
  font-family: -moz-fixed; /*the user set monospace font*/
  white-space: pre;
  margin: 1em 0;
}

Code (markup):

textarea {
  margin: 1px 0 1px 0;
  border: 2px inset ThreeDFace;
  background-color: -moz-Field;
  color: -moz-FieldText;
  font: medium -moz-fixed;
  line-height: normal !important;
  text-align: start;
  text-transform: none;
  word-spacing: normal;
  letter-spacing: normal;
  vertical-align: text-bottom;
  cursor: text;
  -moz-user-focus: normal;
  -moz-binding: url("resource://gre/res/builtin/platformHTMLBindings.xml#textAreas");
  -moz-appearance: textfield;
  text-indent: 0;
}

Code (markup):

 

Point taken. I am always refining my question approach. Sometimes, it becomes unweildy and misses the point. It relates to the frustration already set in place from hitting you head against the wall. Questions often become too concise or too long.

height: auto;

How does this CSS property work in context with the <pre> tag?

Agreed.

 

The idea is that the <pre> box grows dynamically, depending on the content size. This property is set to auto initially and you don't really need to set height explicitly, but I wanted to emphasize that it has to be auto, not some number.

J.D.

 

Got it!

It helps to know these aspects when troubleshooting. Thanks again!