Making an expandable button in HTML

Question

I need to make OK and Cancel buttons in my HTML, and I'd like them to be a fixed width so the two buttons are the same size. For example, like this:

<style>
button.ok_cancel {
    width: 50px;
    background-color: #4274af;
    font-size: 9px;
    line-height: 12px;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    padding: 1px;
    border: 0px;
    margin: 0 0 0 5px;
    text-align: center;
    letter-spacing: 1px;
}
</style>

<button class="ok_cancel" onclick="do_cancel()">Cancel</button>

But now I'm localizing the text, and the translation for "Cancel" can be too wide for the button. I want the button to be its fixed width of 50 pixels if the string fits, but to expand in width if the string is wider. A fixed amount of side padding would be used to keep the button looking good.

I know I probably can't do this with pure CSS, but what's the simplest HTML I can use that will give me the effect I want?

Answer 1

Not sure but:

button { min-width: 50px; width: auto; }

LMK if this works, it should work as long as it isn't floated.

Answer 2

I worked from twodayslate's answer and ended up with this:

/* Browser hack! This is for everyone: */
button {
    display: inline;
    cursor: pointer;
    padding: 6px 6px;
    width: 50px;
    overflow: visible;
}
/* and this is for non-IE browsers: */
html>body button {
    min-width: 50px;
    width: auto;
}

IE wants a specified width and overflow visible, the other browsers want a min-width and width auto. The CSS hack lets IE see one set of properties and the other browser see another set.