title: css problem with unordered lists (as usual with IE)
body: <p>I am using un-ordered lists that nests some divs to show the desired output on screen. I am using css to style them and they seem to look perfect on chrome and firefox. But in IE(8) it looks there is a problem which I was unable to locate. </p>
  
  <p>I am using the below CSS</p>
  
  <pre><code>    &lt;style type="text/css"&gt;
          .ur_container {width:980px; padding: 0; margin: 0;}
          .ur_container ul.bx_grp {list-style-type: none; padding: 0px; margin: 0px; }
          .ur_container ul.bx_lnx {list-style-type: none; padding: 5px; margin: 0px; }
  
          .bx_grp {border:1px solid #c5c5c5; background-color: yellow; margin:0; padding:0;}
          .bx_grp_header {background-color: #d6d6d6; border-bottom:1px solid #acacac;}
          .bx_grp_title {float: left; font: bold 11px Arial; padding:5px;}
          .bx_grp_options {float: right; font: 10px Arial; padding: 5px;}
          .bx_grp_options a{color: #125B93; text-decoration: none; }          
  
          .bx_lnx {padding:0px; background-color: red;}
          .bx_lnx_header {font:11px Arial; color:#333;}
          .bx_lnx_title {float: left;}
          .bx_lnx_refno {background-color:#333; color: fff; padding: 1px; margin-right: 5px; }
          .bx_lnx_options {float: right;}
          .bx_lnx_options a {color: #258CF4; text-decoration: none;}
          .bx_lnx_url {font: 9px Arial; color: #999; margin-top: 4px; }
          .bx_lnx_notes {}
          .bx_lnx_notes span {background-color: #FDFFCC; color: #666; font: 9px Arial; padding:2px;}
          .bx_lnx_tags {}
          .bx_lnx_tags span {background-color: #efefef; border-bottom: 1px solid #ccc; color: #666; font: 9px Arial; padding: 1px 2px 1px 2px; margin-right: 5px;}
      &lt;/style&gt;
  </code></pre>
  
  <p>Against the following HTML</p>
  
  <pre><code>&lt;div class="ur_container"&gt;
      &lt;ul class="bx_grp" id="grp_1"&gt;
          &lt;li&gt;
              &lt;div class="bx_grp_header"&gt;
                  &lt;span class="bx_grp_title"&gt;Personal File&lt;/span&gt;
                  &lt;span class="bx_grp_options"&gt;&lt;a href="#"&gt;rename&lt;/a&gt; &amp;bull; &lt;a href="#"&gt;make private&lt;/a&gt; &amp;bull; &lt;a href="#"&gt;hide&lt;/a href="#"&gt; &amp;bull; &lt;a href="#"&gt;delete&lt;/a&gt;&lt;/span&gt;   
                  &lt;div style="clear: both;"&gt;&lt;/div&gt;
              &lt;/div&gt;      
          &lt;/li&gt;
          &lt;li&gt;
              &lt;ul class="bx_lnx" id="lnx_1"&gt;
                  &lt;li&gt;
                      &lt;div class="bx_lnx_header"&gt;
                          &lt;span class="bx_linx_title"&gt;&lt;span class="bx_lnx_refno"&gt;#3103&lt;/span&gt;How to file personal files&lt;/span&gt;
                          &lt;span class="bx_lnx_options"&gt;&lt;a href="#"&gt;edit&lt;/a&gt; &amp;bull; &lt;a href="#"&gt;move&lt;/a&gt; &amp;bull; &lt;a href="#"&gt;delete&lt;/a&gt;&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="bx_lnx_url"&gt;http://www.google.com&lt;/li&gt;
                  &lt;li class="bx_lnx_notes"&gt;&lt;span&gt;search google for this&lt;/span&gt;&lt;/li&gt;
                  &lt;li class="bx_lnx_tags"&gt;&lt;span&gt;personal&lt;/span&gt;&lt;span&gt;file&lt;/span&gt;&lt;span&gt;google&lt;/span&gt;&lt;/li&gt;
              &lt;/ul&gt;       
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Which produces this output in Chrome and Fireworks
  <a href="http://haberhavadis.com/chff.jpg" rel="nofollow noreferrer">alt text http://haberhavadis.com/chff.jpg</a></p>
  
  <p>and the following in IE
  <a href="http://haberhavadis.com/IE.jpg" rel="nofollow noreferrer">alt text http://haberhavadis.com/IE.jpg</a></p>
  
  <p>The yellow and red colors was used in order to show that is being going wrong. The yellow part is the undesired one.</p>
  
  <p>Can anyone point me in the right direction please ?</p>
  
  <p>Regards</p>