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. min-width causes issues

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.

Please provide the html and css. We can try to replicate in a new file instead of jsfiddle. `display:inline-block` and `min-width` were new in IE8. I'm not surprised you have issues in compatibility mode. — Kraz, Oct 02 '13 at 20:23
I added some of the code we have. It's an old webforms project so lots of tables and crap. I'm not surprised of the compat mode issues either, but our application has to work in it since everything was originally made to work only in IE6 but I'm converting some things to work in Chrome. — Jason Kaczmarsky, Oct 02 '13 at 20:29
You didn't supply enough code. The _out of container_ problem could be with `Pad5` or `pnlOk`... Please provide the code for at least the full row (yes, the _info_ button too). The solution will probably involve conditionnal CSS, because `width` act as `min-width` in quirk mode for example. — Kraz, Oct 02 '13 at 20:53
I added the whole row, it's hard to stript out all of this stuff. I know min-width acts as width, but that doesn't explain why it would re-position itself outside of the container. — Jason Kaczmarsky, Oct 02 '13 at 21:05
@JasonKaczmarsky Oh boy, Y2K called and wants its tables back! ;) My sympathies. — nietonfir, Oct 02 '13 at 21:17

Kraz · Accepted Answer · 2013-10-03T15:12:16.030

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]-->

This does position the button correctly again, however it does not allow the button to expand anymore if the text is too big for the button. — Jason Kaczmarsky, Oct 03 '13 at 12:20
Mh, the hack works for every version of ie. So... use conditionnal comments (I edited my answer). — Kraz, Oct 03 '13 at 15:13

min-width in IE compatibility mode

1 Answers1

Edit: try this CSS :