Articles/<code> confusion…
References:
(April 13, 2004)
While furnishing these pages, it seemed like a good idea to go after the one and only way to have the browser display a piece of code (block, inline code can have quotes), likely some css or html… bad idea! Couple of days later and I still don’t know much for sure.
I had 2 basic starting points. I’d rather use <code> instead of <pre>, and I’d like linebreaks, spaces & tabs to be preserved. Reason for 2nd point, I just hate it when I paste some css and I have to hit the tab key multiple times to have it fit in the formatting of my .css file (which follows common consensus on formatting these) - tabs are essential.
They’re related, yes, if I use <pre>, all those are preserved anyway, cross-browser I think, pretty easy. But all that talk about semantics infected me… <pre> says (literally, ‘preformatted text’), format this text as it is in bare code. Format. While <code> says, this is a piece of code - format as you might have defined in the appropiate medium, your .css file…
If that sentiment escapes you, bless you, and please consider skipping the rest of this text and just use <pre>, and you’re done (no pun intended whatsoever).
I would have, if I hadn’t known about the ‘white-space’ value. In .css, add “code {white-space: pre;}” and your block of code should have its linebreaks, tabs preserved in display. And so it does, in most browsers (at least the dozen versions I have running on Windows). Yet there’s IE.
I’ve seen reports about it not working at all, but IE6 renders it correct. Any version below won’t. If you can’t get it working in IE6, check what you have running on page load. Javascript, maybe embedded in a .htc file, that parses whole of html can ruin it.
…like I had a behavior running to fix IE’s lack of support for <abbr> (by replacing it with ‘acronym’ - here. It runs after pageload and does its replacing. What happens, I think, is in the process linebreaks and tabs are lost. ‘White-space: pre;’ still works, the codeblock is made a huge width one-liner. Since then found a replacement fix for <abbr> that takes another approach.
Example, here’s roughly what I’ve defined for <code> here:
code {
display: block;
white-space: pre;
overflow: auto;
overflow-x: auto;
overflow-y: hidden;
scrollbar-3dlight-color: #280606;
scrollbar-arrow-color: #533;
scrollbar-darkshadow-color: #280606;
scrollbar-face-color: #311;
scrollbar-highlight-color: #533;
scrollbar-shadow-color: #533;
scrollbar-track-color: #311;
margin: 25px auto;
width: 99%;
border: 1px solid #533;
padding: 0 2% 0 7%;
background: #280606;
font-family: verdana, arial, sans-serif;
font-size: 100%;
}
Couple of notes on that. “Overflow: auto;” is recommended here. You’ll get a scrollbar when needed (only), and you make sure the block doesn’t extend or widen up the containing block. In IE that will get you both a horizontal as a vertical scrollbar, which is not needed, so “overflow-y: hidden;” serves to hide it. ‘Overflow-x’ and ‘overflow-y’ are IE propietary code, so won’t validate. If you do, you’re lost anyway, so you can add those scrollbar values too ;).
Also, directly after starting <code> tag, and before </code>, insert a linebreak, then adjust padding to your liking. Will save you a vertical (and in general unnecessary) scrollbar(s) in Mozilla, and content won’t be partly obscured in IE (when a horizontal scrollbar is needed, make window smaller if you don't see a scrollbar to check difference).
Without and with:
<code>code {
padding: 10px 2% 10px 7%;
font-family: "palatino linotype", palatino, "times new roman", times, serif;
}</code>
<code>
code {
padding: 0 2% 0 7%;
font-family: "palatino linotype", palatino, "times new roman", times, serif;
}
</code>