Databases
StackOverflow2013
Postsdbo
POmin-width in IE compatibility mode
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POmin-width in IE compatibility mode
    primarykey
    data
    text
    <p>Goal: Have buttons have a minimum width but expand when text is longer than min width like in the case of other languages.</p> <p>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.</p> <p><strong>No min-width</strong><br> Buttons shows normally, but obviously does not show the minimum width we want. <img src="https://i.stack.imgur.com/Qvf1g.png" alt="No min-width"></p> <p><strong>With min-width</strong><br> 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. <img src="https://i.stack.imgur.com/SjtQ2.png" alt="min-width causes issues"></p> <p><strong>HTML</strong></p> <pre><code>&lt;table width="97%" border="1" class="whiteTable" style="margin: 10px;"&gt; &lt;tr&gt; &lt;td colspan="2"&gt; &lt;div style="position: static; float: left; z-index: 1; width: 100%"&gt; &lt;table border="0" cellpadding="0" cellspacing="0" width="100%"&gt; &lt;tr&gt; &lt;td&gt; &lt;div id="pnlInfo"&gt; &lt;input name="ucAttrEdit$cmdInfo" class="button small" id="ucAttrEdit_cmdInfo" type="submit" value="Info" /&gt; &lt;/div&gt; &lt;/td&gt; &lt;td align="right" colspan="2"&gt; &lt;table cellpadding="0" cellspacing="0" border="0"&gt; &lt;tr&gt; &lt;td class="Pad5"&gt; &lt;div id="pnlOk"&gt; &lt;input name="ucAttrEdit$cmdOk" class="button small" id="ucAttrEdit_cmdOk" type="submit" value="OK" /&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>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; } </code></pre> <p><strong>Note:</strong> Using the above code and putting IE9 into Browser Mode: IE9 compat mode and Document Mode: IE7 standards replicates the issue I am having.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJason Kaczmarsky
    1. USJason Kaczmarsky
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POmin-width in IE compatibility mode
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI'm not sure how to help you without code to look at.
      singulars
      1. POmin-width in IE compatibility mode
      1. USfredsbend
    2. COPlease 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.
      singulars
      1. POmin-width in IE compatibility mode
      1. USKraz
    3. COI 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.
      singulars
      1. POmin-width in IE compatibility mode
      1. USJason Kaczmarsky
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload