ACJ’s Eleventh visit to Parnassia

Posted

October 7 2004

Last night, I felt like shit: I couldn't set myself to work (I had planned to work on my letter design for class today), and I went to bed a bit early (to my standards). I woke up during the night a couple of time, completely disoriented and feeling like utter shit. When I got up this morning, though, I actually felt pretty good.

Markup

I decided to leave the markup the same. (I added a class, but that�s solely to make a distinction from the original dl.) Granted, I was wondering what the empty a is doing there, but semantics is worth a discussion on its own. Perhaps I�ll get back on that at a later point.

<dl class="scalable">
<dt><a>This is a &lt;dl&gt;</a></dt>
<dd><p>Can you help me to make this both vertically and horizontally scalable?</p></dd>
</dl>

Style

I wrote a style sheet from scratch, but based it heavily on the original (as in; aiming for the same visual output on default). It took three little steps:

1. Translated all dimensional values to their em equivalents (using the 10px font size that Arthur set on the body).
2. Removed all margins, and set padding values. Margins are no good because of their collapsing behaviour, etc.
3. Create five images:
   1. acj_top_left.gif
   2. acj_top_right.gif
   3. acj_bottom_left.gif
   4. acj_bottom_right.gif
   5. acj.gif

These steps resulted in the following code:

dl.scalable {
	background: #eee url(acj.gif) repeat;
	margin: 0;
	padding: 0;
	width: 19em

}

dl.scalable dt {
	background: transparent url(acj_top_left.gif) no-repeat top left;
	color: #000;
	margin: 0;
	padding: 0
}

dl.scalable dt a {
	background: transparent url(acj_top_right.gif) no-repeat top right;
	display: block;
	margin: 0;
	padding: 1em 1.5em .2em 1.5em
}

dl.scalable dd {
	background: transparent url(acj_bottom_left.gif) no-repeat bottom left;
	margin: 0;
	padding: 0
}

dl.scalable p {
	background: transparent url(acj_bottom_right.gif) no-repeat bottom right;
	margin: 0;
	padding: 1.33em 1.5em 2.33em 1.5em
}

Example

A screenshot of the sample page which it is linked to.

Concluding

The little style sheet I wrote doesn't require any markup changes, is pixel perfect in Moz and IE with the original when default values apply, and it scales smoothly in all directions (even the paddings co-operate).

There are quite a few of limitations though. What would happen if an item (dd, in this context) contains more than one paragraph (p)? The bottom right border would repeat. Ouch. I could have worked around this by using pseudo-classes/elements, but then I'd break compatability with Internet Explorer (for one).

It'd be a wise idea to evaluate the markup in its entire, but�like I said before�that's a discussion on its own.

Comments

0 comments so far.

Comment