Div width incorrect in IE7 - Cannot set width, must be expandable button if characters are added

Question

http://jsfiddle.net/Birdie/pYbgL/1/

Hi Everyone - I'm hoping you can help me find a solution to this IE7 width discrepancy.

The Problem:

This is for a button. The content in this button will change frequently, so the button must be able to expand. In all browsers and version of IE EXCEPT IE7, this button is the size it should be. In IE7, this button is displaying at 100% width. Now, I would love to be able to slap a width, max-width on this, but again, it has to have a flexible width.

The HTML:

<div class="tennant-orange-btn">
    <span>Orange Button</span>
</div>

The CSS:

.tennant-orange-btn {
        border-radius: 5px;
        color: #FFF;
        display: inline-block;
        font-size: 18px;
        font-family: 'PT Sans', sans-serif;
        padding: 4px 15px 5px 8px;
        text-decoration: none;
        text-align: left;
        background: #ff8331;
        }
    .tennant-orange-btn span {
        background: url("images/cogwheel.png") no-repeat top left;
        white-space: nowrap;
    }

Many thanks in advance!

Answer 1

The problem is that IE7 does not understand display: inline-block;.

You can use a hack though, which will make it work the way you expected:

display: inline-block;
*display: inline;
zoom: 1;

---

Note: if you are creating a button, you should use a button element. HTML is not only a series of divs and spans.

Answer 2

Try making the following changes to your CSS:

.tennant-orange-btn {
        border-radius: 5px;
        color: #FFF;
        display: block;
        float: left;
        font-size: 18px;
        font-family: 'PT Sans', sans-serif;
        padding: 4px 15px 5px 8px;
        text-decoration: none;
        text-align: left;
        background: #ff8331;
 }