2-Column CSS List breaking when one side is bold

This is something that I figure should be straightforward, but I can't seem to figure it out, and spending a couple of hours on a single list is driving me nuts.

What I'm trying to do is create a 2-column list, with "labels" on one side, and values on the other. I can get it to work if I leave font weights normal, or have both sides bold, but as soon as I make the labels bold and values normal, it staircases.

A screenshot of it with bold

A screenshot without bold

The applicable CSS:

ul.info {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.info li.name {
    width: 150px;
    float: left;
    font-weight: bold;
}

ul.info li.value {
}

The HTML:

<ul class="info">
    <li class="name">Member Since</li>
    <li class="value"><?=$user->registerTime ?></li>

    <li class="name">Last Logged in</li>
    <li class="value"><?=($user_login !== null ? $user_login->login_time : 'Never') ?></li>

    <li class="name">Email verified?</li>
    <li class="valu开发者_如何学编程e"><?=($user->emailVerified ? 'Yes' : 'No') ?></li>
</ul>

I've narrowed it down to the bold, but it doesn't make sense why that would break it. Any ideas?

---

I suspect it will be down to the bold elements having extra vertical space being added somehow, which would explain why the floating isn't becoming staggered. Do you have a consistent line-height property applied to the list elements?

You'd be much better off using a definition list, rather than an unordered list. That way you can style dt and dd elements entirely separately, with the added advantage of your markup being much more semantic.

---

You could try setting the height or min height of you LIs to a pixel figure greater than the height of the bolded font.

---

What browser? It works fine for me in chrome.
I would suggest checking the script codes.. if they are generating valid xhtml.

proof