This is driving me nuts. Here is some HTML and CSS that I have on a sample page. The first intent was to have LI without any markers. I have tried everything I could, but the list items will show up with standard decimal marker. I used developer tool that comes with IE9 to inspect UL and LI elements. It seems that IE does not recognize "recentAnnouncementsList" css class at all. These elements do not show the style applied on it. This whole set up works perfectly on Chrome. What am I missing?
Thanks
ul.recentAnnouncementsList
{
margin-left: 0px;
padding-left: 5px;
}
ul.recentAnnouncementsList li
{
margin-left: 0px;
padding-bottom: 5px;
list-style-type:none;
}
ul.recentAnnouncementsList li a{
color:#675DF0;text-decoration:none; font-size:0.85em;
}
ul.recentAnnouncementsList li span{
display: block;
text-indent: 0px;
text-transform: none;
}
<td>
<div>
<ul class="recentAnnouncementsList" id="recentAnnouncements">
<li><a href="#">Released 1</a></li>
<li><a href="#">Release 2</a></li>
</ul>
</div>
</td>
Finally I have solved this problem. The problem was that I had added a new CSS class named "container" in the file. I am not sure if this is some bug in IE and FF, but CSS file was getting clipped at start of that style. I found this out by looking in the developer tools for IE. When i looked at loaded file in IE, it was not complete. All my styles related to my UL/LI tags were present after that class definition. After I deleted "container" class from file, everything went back to normal.
Thanks for all your input and suggestions.
for my project I once rendered IE9 as IE8 by rendering it with meta tag of html
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
so the same css worked for both
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With