Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Ok, this is pure insanity. Ray's answer worked for the initial test, but not for my real life example, which led me to create a second test case with Ray's fix:</p> <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt; &lt;head&gt; &lt;title&gt;title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form&gt; &lt;table style="width: 700px;"&gt; &lt;tr&gt; &lt;td colspan="2"&gt;Here is some really long text. For some reason, in internet explorer 8, the long text in a table cell that spans two columns above some other cells affects the cell below it. I have no idea why. Also, if the contents of the first cell below this one is some text rather than a checkbox, then the effect is not as dramatic, though it's still there.&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style="width:100px; background: green;"&gt;&lt;input type="checkbox" value="1" /&gt;&lt;/td&gt; &lt;td style="width:600px;"&gt;blah&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;table style="width: 700px;" border="0"&gt; &lt;tr&gt; &lt;td colspan="2"&gt;Some short text&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style="width: 100px; background: red;"&gt;&lt;input type="checkbox" value="1" /&gt;&lt;/td&gt; &lt;td style="width: 600px;"&gt;blah&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>For some reason, having the input elements within the first table cell makes Ray's solution not quite work. </p> <p>The solution that did end up solving the real world case we were trying to fix required adding "table-layout:fixed" to the tables, and making the first row in the table have empty cells with the width's set. Here's a modified version of the previously example with the fix I just described:</p> <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt; &lt;head&gt; &lt;title&gt;title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form&gt; &lt;table style="table-layout: fixed; width: 700px;"&gt; &lt;tr&gt; &lt;td style="width: 100px;"&gt;&lt;/td&gt; &lt;td style="width: 600px;"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2"&gt;Here is some really long text. For some reason, in internet explorer 8, the long text in a table cell that spans two columns above some other cells affects the cell below it. I have no idea why. Also, if the contents of the first cell below this one is some text rather than a checkbox, then the effect is not as dramatic, though it's still there.&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style="background: green;"&gt;&lt;input type="checkbox" value="1" /&gt;&lt;/td&gt; &lt;td&gt;blah&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;table style="width: 700px; table-layout: fixed;" border="0"&gt; &lt;tr&gt; &lt;td style="width: 100px;"&gt;&lt;/td&gt; &lt;td style="width: 600px;"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2"&gt;Some short text&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style="background: red;"&gt;&lt;input type="checkbox" value="1" /&gt;&lt;/td&gt; &lt;td&gt;blah&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Really Internet Explorer??? REALLY?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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