2

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!

Birdie Golden
  • 505
  • 6
  • 20
  • Can you use `display:block` and `float:left`? Should cause the button to shrink to its contents. The fiddle is a nice touch, but unfortunately JSFiddle won't work in IE7 – Kevin Bowersox Dec 06 '13 at 18:27
  • Glad it worked! I will post as an answer. I didn't want to answer with untested code. – Kevin Bowersox Dec 06 '13 at 18:32

2 Answers2

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.

kapa
  • 77,694
  • 21
  • 158
  • 175
0

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;
 }
Kevin Bowersox
  • 93,289
  • 19
  • 159
  • 189