Question

I’m implementing a simple chat and I came across a simple problem: I wanted to wrap the username in a border-radius.

CSS:

    .chat-username {
    padding: 4px 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    border-radius: 8px; 
    }

AJAX excerpt:

    $.each(data.messages, function(index, message) {
        $("#chat").append($("<p><span class=\"chat-username\"><b>"+ message.name + "</b></span><span>" + message.text +"</span></p>"));
    });

Well, my goal was achieved with this code. But the problem is that, depending on the size of the username, I obviously get wider or narrower borders:

Is there a way to “fix” the border size (Let’s say, make it with a minimum size like the “imjustatest” border), with the username text centered?

Answer 1

Are you talking about a minimum width?

If so, then you can just use the min-width property:

min-width: 80px;
text-align: center;

---

Forgot about your element type. You are using inline elements (<span>).

You can either go cross-browser and do this:

display: block;
float: left;

Or use display: inline-block and leave IE7 out.