IE 8 Compatibility Mode Causes Form Submit Button to Wrap

1.4k Views Asked by At

The below code does what I want in browsers I check with except IE when using compatibility mode.

In compatibility mode the submit (Remove) button wraps to the next line. It should look like it does in Firefox or IE when not using compatibility mode.

Can't use float:left/right because I cannot specify length beforehand.

<div>
  <ul style="display:inline-table">
    <li style="text-align:left; white-space:nowrap">
      <div>
        <div style="display:table-cell; width:100%"><b>Name: </b>Test Name That is Longer Than The Other <b>Qty: </b>1</div>
        <div style="display:table-cell">
          <form style="margin:0; padding:0" name="remcart" method="post" action="page_name.html">
            <input name="Quantity" value="0" type="hidden" />
            <input style="margin:0; padding:0; margin-left:5px" type="submit" value="Remove" name="rembutton" />
          </form>
        </div>
      </div>
    </li>
    <li style="text-align:left; white-space:nowrap">
      <div>
        <div style="display:table-cell; width:100%"><b>Name: </b>Short Test Name <b>Qty: </b>1</div>
        <div style="display:table-cell">
          <form style="margin:0; padding:0" name="remcart" method="post" action="page_name.html">
            <input name="Quantity" value="0" type="hidden" />
            <input style="margin:0; padding:0; margin-left:5px" type="submit" value="Remove" name="rembutton" />
          </form>
        </div>
      </div>
    </li>
  </ul>
</div>

1

There are 1 best solutions below

1
On
<style>
    form {
        display: inline;
    }
</style>

<ul style="display:inline-table">
    <li style="text-align:left; white-space:nowrap">
        <div>
            <span><b>Name: </b>Test Name That is Longer Than The Other <b>Qty: </b>1</span>
            <form style="margin:0; padding:0" name="remcart" method="post" action="page_name.html">
            <input name="Quantity" value="0" type="hidden" />
            <input style="margin:0; padding:0; margin-left:5px" type="submit" value="Remove" name="rembutton" />
            </form>
        </div>
    </li>
    <li style="text-align:left; white-space:nowrap">
        <div>
            <span><b>Name: </b>Test Name That is Longer Than The Other <b>Qty: </b>1</span>
            <form style="margin:0; padding:0" name="remcart" method="post" action="page_name.html">
            <input name="Quantity" value="0" type="hidden" />
            <input style="margin:0; padding:0; margin-left:5px" type="submit" value="Remove" name="rembutton" />
            </form>
        </div>
    </li>    
</ul>