Since people were asking about how I markup and style my “chat” posts, I put together this sample HTML and CSS. Just use the HTML in your posts and add the CSS to your TypePad design’s Custom CSS. And leave a comment if you get it working.

Sample HTML:

<div class="conversation">
    <ul>
        <li class="odd">
            <span class="label user_1">Walter:</span>
            Am I wrong?
        </li>
        <li class="even">
            <span class="label user_2">Dude:</span>
            No, you’re not wrong.
        </li>
        <li class="odd">
            <span class="label user_1">Walter:</span>
            Am I wrong?
        </li>
        <li class="even">
            <span class="label user_2">Dude:</span>
            You’re not wrong Walter, you’re just an asshole!
        </li>
        <li class="odd">
            <span class="label user_1">Walter:</span>
            Okay then.
        </li>
    </ul>
    <p>— <cite>The Big Lebowski</cite></p>
</div>

CSS:

.entry-content .conversation {
    margin-bottom: 10px;
    padding: 15px 15px 4px;
    color: #ccc;
    background-color: #232323;
    -webkit-border-radius: 3px;
    text-shadow: #000 0 1px 1px;
}

.entry-content .conversation ul {
    padding-left: 0;
    list-style-type: none;
}

.entry-content .conversation li {
    padding: 5px 10px;
}

.entry-content .conversation .odd {
    background-color: #3e3e3e;
    -webkit-border-radius: 3px;
}

.entry-content .conversation .label {
    font-weight: bold;
}

.entry-content .conversation .user_1 {
    color: #efe;
}

.entry-content .conversation .user_2 {
    color: #eef;
}

.entry-content .conversation p {
    border-top: 1px dotted #3e3e3e;
    padding-top: 10px;
}

.entry-content .conversation a {
    color: #ccc;
    text-decoration: underline;
}