I have out of order display problem in IE6 and IE8. Following is the output screenshot in IE6 and IE8 : http://img707.imageshack.us/img707/1875/61807760.jpg
Following is my HTML code :
<div>
<div style="width: 280px; float: left; height: 220px; background:url(images/content_box.gif) no-repeat; text-align: left; padding-left: 20px; padding-top: 20px;">
<div class="cont_featr"><div class="cont_txt"><b>Features</b></div></div>
<hr class="container_hr" align="center">
<div style="text-align: left;margin-left: 15px;">
<ul class="as_ul">
<li class="as_li">Immediate/Cron based delivery.</li>
<li class="as_li">Multilanguage support.</li>
<li class="as_li">Auto integration to any Joomla, vBulletin style.</li>
</ul>
</div>
</div>
</div>
Following is the CSS code :
.as_ul {
list-style: none url(images/tick.gif);
list-style-position:outside;
border: 1px solid #f00;
}
.as_li {
FONT-SIZE: 10pt;
FONT-FAMILY: Verdana, Sans-Serif;
background-image: url(images/tick.gif) no-repeat;
border: 1px solid #0f0;
}
.container_hr {
color: #888888;
background-color: #888888;
height: 0.8px;
border: 0;
width: 85%;
text-align: center;
}
.cont_featr {
background: url(images/featurs.png) no-repeat;
width: 40px; height: 40px;
}
.cont_txt {
FONT-SIZE: 11pt;
padding-left: 50px;
padding-top: 10px;
}
Please help.