StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><code>height</code> and <code>width</code> can only be applied to elements with <strong>hasLayout</strong> property. SPAN element by default does not implement this property.</p> <p>Because inline-block does not work correctly on all major browsers I would recommend using padding-dimension trick:</p> <pre><code><span style="font-size:30px; padding-left:30px; background:red;">&nbsp;</span> </code></pre> <p>You might need to play a little bit with dimensions because global <code>font-size</code>, <code>font-family</code> and <code>line-height</code> can affect the real size of your box.</p> <p><strong>Edit:</strong> Drawing <em>empty boxes</em> is the bit I missed, but I think it is quite obvious from my code anyway. If not, this is another example:</p> <pre><code><style type="text/css"> .box1 { font-size:15px; font-family:Tahoma; padding-left:15px; border:1px solid red; overflow:hidden; } .box2 { font-size:10px; font-family:Tahoma; padding-left:15px; border:1px solid green; overflow:hidden; } .box3 { font-size:5px; font-family:Tahoma; padding-left:5px; border:1px solid blue; overflow:hidden; } </style> This is red box: <span class="box1">&nbsp;</span> and this is green box: <span class="box2">&nbsp;</span>. And this is another box, this time it is blue: <span class="box3">&nbsp;</span>. </code></pre> <p>And this code produces this as an output: <a href="http://img413.imageshack.us/img413/5865/boxes.png">alt text http://img413.imageshack.us/img413/5865/boxes.png</a></p> <p>And because we put <code>&nbsp;</code> inside every span, this trick will work on all browsers.</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