Scrolling CSS Text Boxes

I had a comment come across my mailbox asking how I insert the scrolling text boxes that I use to display code samples. The scrolling is handled entirely via CSS, and there are no crazy markup tricks going on. The basic markup is very straightforward:

<pre class="source">Source goes here</pre>

It has also just struck me as rather amusing that I’m using a scrolling CSS text box to explain how to create a scrolling CSS text box.

I use the “source” CSS class to denote a preformatted section that contains source code. Here are the relevant parts of that CSS:

pre.source 
{
    margin: 0;
    padding: 0;
    clear: left;
    width: 507px;
    overflow: auto;
    border: solid 1px #dfe9ff;
    background-color: #f8faff;
    font-size: 85%;
}

The styling, such as the margin, padding, borders, and colors, will all differ depending on your implementation. The two important lines are marked in bold (if you can see it; Courier’s bold font sucks): width: 507px and overflow: auto. The more important of the two is overflow. This instructs the browser to scroll the content of a container (in this case, a <pre> tag) when the container’s content goes beyond its allowed boundary. By setting a hard width, we are creating a horizontal boundary which will force long lines to scroll horizontally. We don’t set a height so that the box can grow vertically as necessary. In my case, the width is just enough to fill the content column of the page.

Keep in mind that the overflow only works the way it does because the container is a <pre> tag, which instructs the browser to retain the formatting of any whitespace. If we were to try this with, say, a <div>, then the browser would just wrap the text at the edge. You can make the <div> behave like a <pre> by adding white-space: pre to its style block.

CS 2.1 RTM and More Post Dates

The final release of Community Server 2.1 is upon us! I’ve already gone through the motions and upgraded the site. I skipped the RC1 release because…well…I’ve only had this thing up for a couple of months and I’ve already upgraded it four times.

CSS for the Custom Post Dates

Vern at Subtext asked if I could go over the CSS for the custom post dates I use for the site. First off, here’s the markup that ends up on the page after ASP.NET is done rendering it:

<span class="entry-date">
    <span class="entry-day">19</span>
    <span class="entry-month">Sept</span>
    <span class="entry-year">2006</span>
</span>

Nothing terribly complex here. I only need three spans because I’m applying different styles to each part of the date. For the CSS, the vast majority of the formatting is handled by the styles for the container span:

.entry-date
{
    float: left;
    margin: 3px 8px 0 0;
    padding: 4px 2px 0 0;
    width: 50px;
    height: 58px;
    background: url( ../Images/EntryDateBG.gif ) no-repeat top left;
    text-align: center;
}

Floating the span also has the benefit of turning it into a block-level element, so we can apply a height to the container. The background image actually reveals most of the trickery:

Since all of the flair is handled by a single image, the only thing that remains is to get the text into the right positions. This will, of course, require some hand tweaking, and the actual numbers will depend on the background image being used, font sizes, the phase of the moon, etc. Here’s the CSS for my dates:

.entry-date .entry-day
{
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    color: #0f42a4;
}

.entry-date .entry-month
{
    display: block;
    font-size: 1.0em;
    font-weight: bold;
    font-variant: small-caps;
    line-height: 1.2em;
    color: #0f42a4;
}

.entry-date .entry-year
{
    display: block;
    margin-top: 4px;
    font-size: 1.0em;
    font-weight: bold;
    color: #fff;
}

I convert each span to a block-level element so that each section of the date gets its own line in the box. For spacing, I mostly fiddle with the line-height on the month, as it’s in the middle. Everything else in there is pretty basic.