min-width in IE compatibility mode

Question

Goal: Have buttons have a minimum width but expand when text is longer than min width like in the case of other languages.

The problem is that in IE8 or 9 in compatibility mode, the buttons seem to move outside of their container to the right. I unfortunately cannot provide any code or link to jsfiddle since it does not work in IE8 compat mode, but here are some pictures of the issue.

No min-width
Buttons shows normally, but obviously does not show the minimum width we want.

With min-width
IE layout shows a width of 100px, which is what it should be, but the button seems to move outside of the container (See bottom-right of image). Also notice the other button's text is no longer in the center which I assume is related.

HTML

<table width="97%" border="1" class="whiteTable" style="margin: 10px;">
    <tr>
        <td colspan="2">
            <div style="position: static; float: left; z-index: 1; width: 100%">
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td>
                            <div id="pnlInfo">
                                <input name="ucAttrEdit$cmdInfo" class="button small" id="ucAttrEdit_cmdInfo" type="submit" value="Info" />
                            </div>
                        </td>
                        <td align="right" colspan="2">
                            <table cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td class="Pad5">
                                        <div id="pnlOk">
                                            <input name="ucAttrEdit$cmdOk" class="button small" id="ucAttrEdit_cmdOk" type="submit" value="OK" />
                                        </div>
                                    </td>

                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>

CSS

button,
.button,
input[type="submit"],
input[type="reset"] {
  background: #4586b6;
  color: #FFF;
  border: 0;
  padding: 3px;
  font-size: 13px;
  display: inline-block;
  height: 22px;
  cursor: pointer;
  margin: 0 3px 0 0;
  width: auto; }

button.small,
  .button.small,
  input[type="submit"].small,
  input[type="reset"].small {
    min-width: 100px; }

.Pad5{padding:5px}

table.whiteTable {
  background: #F6F6F6;
  border: 1px solid #CCC; }

Note: Using the above code and putting IE9 into Browser Mode: IE9 compat mode and Document Mode: IE7 standards replicates the issue I am having.

Answer 1

So, I've found the problem.

Their spec says it applies to "floating block-level elements", but they don't mention that it also requires an explicit width -- "auto" won't work. While that's fine for "stretchy" layouts, it's useless for what I want: a flexible, tableless form layout (with elements which can expand to their contents' sizes).

IE7 needs both a width and a min-width and width:auto will trigger that problem.

So now, how to solve?

Use conditionnal CSS

<style>
  input {width:auto} /*for ie6-7*/
</style>
<!--[if lt IE 7]>
<style>
  input {width:100px} /*for ie6-7*/
</style>
<![endif]-->

(Note : those css are not specific enough and are overwritten by your stylesheet. You have to change them)

...Or you can use the script in the link above.

Edit: try this CSS :

(best I could do)

<style>
.button,
input[type="submit"],
input[type="reset"] {
  background: #4586b6;
  border: 0;
  padding: 3px;
  font-size: 13px;
  height: 22px;
  cursor: pointer;
  margin: 0 3px 0 0;
  }

/*
button.small,
  .button.small,
  input[type="submit"].small,
  input[type="reset"].small {
    min-width: 100px; }*/

.Pad5{padding:5px}

table.whiteTable {
  background: #F6F6F6;
  border: 1px solid #CCC; }


  .button,input[type="submit"],input[type="reset"] {width:auto; color:#fff; display: inline-block;min-width: 100px;} 
</style>
<!--[if IE 6]>
<style>
  .button,input[type="submit"],input[type="reset"] {width:100px; color:#ff00ff;display: block} 
</style>
<![endif]-->
<!--[if IE 7]>
<style>
  .button,input[type="submit"],input[type="reset"] {width:auto; color:#ffff00;display: block; min-width:auto;} 
</style>
<![endif]-->