StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Acording with this <a href="http://www.brunildo.org/test/InlineBlockLayout.html" rel="nofollow">article</a> <code>display:inline-block</code> has a similar behavior that <code>display:inline</code> in IE7, so you can make a litte change only to support IE7 (with a <a href="http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/" rel="nofollow">simple hack for IE</a>):</p> <pre><code>div.ib a { display: inline-block; *display: inline; /* IE7 and below */ } </code></pre> <p>I hope <a href="http://jsfiddle.net/mmpX3/12/" rel="nofollow">this</a> works as you expected.</p> <hr> <p><strong>EDIT:</strong></p> <p>Ok. The problem are with the property hasLayout explaining <a href="http://www.satzansatz.de/cssd/onhavinglayout.html#def" rel="nofollow">here</a>. Both <code>zoom:1</code> and <code>height:any_value</code> activates the hasLayout, so meanwhile <code>display:inline-block; *display:inline</code> works to overwrite the next <code>display:block</code> declarations, putting a <code>height:30px</code> (for example) returns the property hasLayout. So the thing to do is remove the hasLayout as it says in <a href="http://www.satzansatz.de/cssd/onhavinglayout.html#reset" rel="nofollow">this article</a>.</p> <p>I have <a href="http://jsfiddle.net/mmpX3/57/" rel="nofollow">this demo</a> to show how works. Because <code>height</code> is practically untouchable I using <code>padding-bottom</code> and <code>font-size</code> to simulate the <code>height</code> in other browsers. Note that the <code>width</code> of the widest element is maintained.</p> <hr> <p><strong>EDIT2:</strong></p> <p>Have you are considerate <a href="http://jsfiddle.net/mmpX3/76/" rel="nofollow">jQuery</a> solutions? (Only giving the elements different <code>width</code>s in IE7)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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