I’m experimenting with a new comment style on the site.

Basically, the idea is to make comments look like they’re speech balloons. Plus, I believe it makes them a little easier to follow. Here’s an example of what it should look like now.

I saw this on a blog somewhere, just not sure where anymore, and apparently I cleared my browser history since then because I couldn’t find it again.

I’d have preferred the Names to be on top, with the arrow pointing down into the comment, but dasBlog doesn’t have any support for templated comment elements. You have to have that to move the actual pieces of the comment (the name, comment, and date, for instance). From what I have found online, they just haven’t gotten around to it yet. That made modifying the comment item format, um, shall we say, an adventure.

This is the first round. It doesn’t seem to work completely in IE (the little dialog arrow doesn’t show up), but it doesn’t completely mess things up either. It looks right in FireFox. Not sure about other browsers.

The trick, as I’ve got it now, is that I’m using the AFTER pseudo-element along with the CONTENT keyword to create an image tag where there was none before, like so:

.commentPermaLinkStyle:after {
 content: " " url('quotearrow.png');
}

Unfortunately, this doesn’t appear to be handled properly by IE. I tried a background img, but that didn’t seem to work well either.

CSS, one giant, turbo-charged erector set full of parts that don’t always fit the same way 🙁