CODEWITHSUNDEEP
cssinternet-explorer-9
ByteBlocks
ByteBlocks

Reputation: 637

CSS Style not recognized in IE9

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>

Upvotes: 5

Views: 13483

Answers (3)

Hirurg103
Hirurg103

Reputation: 4953

IE 6-9 all have limit on the number of selectors declared in a CSS file. I assume that styles declared for .recentAnnouncementsList are located above the limit and completely ignored. There are tools are resources which help to split big CSS files into several parts and keep the number of selectors in a single file below the limit:

Upvotes: 0

ByteBlocks
ByteBlocks

Reputation: 637

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.

Upvotes: 6

krishna
krishna

Reputation: 950

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

Upvotes: 2

Related Questions