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.
I am using the below CSS
<style type="text/css">
.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;}
</style>
Against the following HTML
<div class="ur_container">
<ul class="bx_grp" id="grp_1">
<li>
<div class="bx_grp_header">
<span class="bx_grp_title">Personal File</span>
<span class="bx_grp_options"><a href="#">rename</a> • <a href="#">make private</a> • <a href="#">hide</a href="#"> • <a href="#">delete</a></span>
<div style="clear: both;"></div>
</div>
</li>
<li>
<ul class="bx_lnx" id="lnx_1">
<li>
<div class="bx_lnx_header">
<span class="bx_linx_title"><span class="bx_lnx_refno">#3103</span>How to file personal files</span>
<span class="bx_lnx_options"><a href="#">edit</a> • <a href="#">move</a> • <a href="#">delete</a></span>
</div>
</li>
<li class="bx_lnx_url">http://www.google.com</li>
<li class="bx_lnx_notes"><span>search google for this</span></li>
<li class="bx_lnx_tags"><span>personal</span><span>file</span><span>google</span></li>
</ul>
</li>
</ul>
</div>
Which produces this output in Chrome and Fireworks
and the following in IE
The yellow and red colors was used in order to show that is being going wrong. The yellow part is the undesired one.
Can anyone point me in the right direction please ?
Regards
