Question

Consider this code:

<style type="text/css">

ul { clear: both; overflow: hidden; border: 3px solid red; margin-bottom: 10px; }
ul li { display: block; padding: 30px 80px; border: 1px solid green; float: left; }

</style>

<ul>

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

</ul>

<ul>

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

</ul>

In firefox and chrome (and possibly safari and opera too – haven’t tested) it appears fine. Meaning the <li>'s are within the <ul>'s green border.

But in ie (9, 8 and 7) this is not the case. Is there a way to have the ul CONTAIN the lis in ie like it does in the other browsers?

Answer 1

Simply have IE render your document in in standards mode by adding a doctype declaration to your HTML.

Reason being that only in IE’s quirks mode can I imagine your ul not containing your lis. In standards mode, it should render that the same way as other browsers do, as proven by this jsFiddle demo (view it in IE) which ensures standards mode in its preview pane.