this is portable

First off, I need to say that this is not meant to be a blog all about bugs. It’s just been that kind of week! (I’ve also just been picked up by mxna so, I feel the need to point that out.)

Now, about the Dreamweaver CS3 crashing…

What was happening:
Dreamweaver suddenly quit on me mid-editing a handful of times. After three times, I couldn’t get the app to start up again. All I got was the start up screen for a few seconds and then, nothing. Restart my machine… still nothing.

What fixed it:
After a lot of frustration and re-installing and grumbling, a very helpful co-worked found this link . I had a CSS file in the last defined site I was working on who’s file size was exactly 8K. That was what was stopping the app from even launching.

Opening the CSS file in question and adding a comment line to bump the file size up to 9K fixed it all.

If you’re into all the details:
Dreamweaver CS3 running on a PC with XP
Windows logged the following error: Faulting application dreamweaver.exe, version 9.0.0.3481, faulting module msvcr80.dll, version 8.0.50727.762, fault address 0×000144d8.

Definition lists don’t get enough credit when you’re talking about XHTML and CSS. They can really come in handy when putting a site together but I think a lot of us forget that they are there for us to use.

So, here’s a quick example of how great these little bits of mark up can be to remind you that they exist.

This is actually the way I end up using them the most when cutting up a site — a small contained box of related content. Or, more specifically, a group of related links. Ususally these need to look like an actual box and be flexible enough to work with both a small and larget amount of content.

The markup part is really simple. (Actually, it’s all very simple, but the markup is the simplest part of the simple.):

<dl class="list_show">
<dt>Related Links</dt>
<dd><a href="#">a first link to somewhere</a></dd>
<dd><a href="#">another link to a site </a></dd>
<dd><a href="#">another link to a site </a></dd>
<dd><a href="#">another link to a site </a></dd>
<dd><a href="#">yet another link to a site </a></dd>
<dd><a href="#">another link to a site </a></dd>
</dl>

Now we add two background images, one for the DT and one for the DL. (false line breaks are noted with “>>”)

dl.list_show {
...
background: #e8e6e6 url(img/gr_box_bottom.gif) >>
 bottom no-repeat;
}

.list_show dt {
...
background: url(img/grn_box_top.jpg) >>
no-repeat;
}

The end result looks something like this:

The background image for the DT is just what you would expect, it’s exactly the size we need for the top part of our box.

The background image for the DL is a little different. It’s actually much taller than we’re going to need it to be. And, since it’s aligned to the bottom, the background of the box will “stretch” to fit the content. I’ve also set the background color of the DL to the same as main colour in the background image. That way, no matter how long the list is, our box background will still work.

Here’s the finished example

There’s a lot more that you can do with definition lists than just this example. MaxDesign goes into more detail of how and when to use definition lists in this article.