Note that there are some explanatory texts on larger screens.

plurals
  1. POInternet Explorer 8 rendering HTML markup differently to other browsers
    primarykey
    data
    text
    <p>Below is the markup i have in my code. It works fine in all browsers except IE8.</p> <pre><code>&lt;label&gt;this is a label&lt;/label&gt; &lt;input type="text" class="formTxt" /&gt; &lt;div class="fl"&gt; &lt;select&gt;&lt;option&gt;opt 1&lt;/option&gt;&lt;option&gt;opt 2&lt;/option&gt;&lt;/select&gt; &lt;/div&gt; &lt;div class="validationMsg"&gt;there has been an error!&lt;/div&gt; </code></pre> <p>When viewed in IE8, the validation message is placed inbetween the two inputs. So i end up with them stacked on top of each other in the following order; input, validation message, then select menu. The code is rendered as follows in the DOM:</p> <pre><code>&lt;label&gt;this is a label&lt;/label&gt; &lt;input type="text" class="" /&gt; &lt;div class="validationMsg"&gt;there has been an error!&lt;/div&gt; &lt;div class="fl"&gt; &lt;select&gt;&lt;option&gt;opt 1&lt;/option&gt;&lt;option&gt;opt 2&lt;/option&gt;&lt;/select&gt; &lt;/div&gt; </code></pre> <p>CSS: </p> <pre><code> label { float: left; clear: both; padding: 4px 0; width: 100%; } .formTxt { background: none repeat scroll 0 0 #FFF; border: 1px solid #AAA; border-radius: 3px; float: left; clear: both; outline: medium none; padding: 4px; } input { height: 15px; line-height: 15px; } .inputSmall { width: 110px; } .fl { float: left; } .validationMsg{ clear: both; float: left; display: block; width: 100%; font-size: 0.8em; padding: 0.3em 0 0; line-height: 1.3em; } </code></pre> <p>Can anyone help to why it is doing this?</p> <p>Thanks</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.
 

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