Question

My CSS styles are not working in IE 9. It works in IE 8 and Chrome. In the below code style cpHeader is defined in a separate css file. Any clues on why IE 9 is not rendering the styles.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<h1>Welcome to the site</h1>
<div class="cpHeader">
    <asp:Label ID="Label2" runat="server" Text="header text"></asp:Label>
</div> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
...

In Site.css

.cpHeader
        {
            color: white;
            background-image:url('../Images/bg_sm.png');
            font: bold 11px auto "Trebuchet MS", Verdana;
            font-size: 14px;
            cursor: pointer;
            border-style:solid;
            border-bottom-style:none;
            border-width:1px; 
            border-color:#5A5A5A;    
            height:18px;
            padding: 4px;    
            text-align:left;        
        }

EDIT: I found a mention of a possible problem, but couldn’t get how to fix it.

Answer 1

This http://jsfiddle.net/wHszh/ works correctly for me in IE9. (Note: I changed the background to black since the image won’t load in the sample.)

Are you sure the path to bg_sm.png is correct, and relative to the location of the CSS file (not relative to the location of the HTML page)? Maybe it’s not loading the image, and since you set the foreground color to white it is working but you can’t see the text because it is white on white?

What does Firebug/Developer tools say in the network tabs? Are all the assets loading you are expecting? What is the exact HTML that exports? Are there any CSS syntax problems in other places in the CSS file?