title: IE9 in compatibility mode not displaying CSS styles correctly
body: <p>I have a nested div (see below) which have different CSS classes to give a background color for the container and a format for the text</p>
  
  <pre><code>&lt;div class="section"&gt;
      &lt;div class="sectionTitle"&gt;
          &lt;dx:ASPxLabel ID="lblSectionTitle" runat="server" Text='&lt;%# Eval("SectionTitle") %&gt;'&gt;&lt;/dx:ASPxLabel&gt;
      &lt;/div&gt;
  
      &lt;div class="sectionTitle"&gt;
          &lt;dx:ASPxLabel ID="lblSectionDesc" runat="server" Text='&lt;%# Eval("SectionDescription") %&gt;'&gt;&lt;/dx:ASPxLabel&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>There is a closing tag for the section div, there's more content in there which is rendering correctly.</p>
  
  <p>The CSS for the above is:</p>
  
  <pre><code>.section
  {
      padding: 5px; 
      background-color: #ffffff; 
  }
  
  .sectionTitle
  {
      font-size: 11px; 
      font-family: Arial; 
      font-weight: bold;
      color: #546fb2;
  }
  </code></pre>
  
  <p>When I comment out the background color in .section the formatting of sectionTitle is being applied but when I put the background-color in there it overwrites the color of the sectionTitle.  I have tried setting the color of .section to match .sectionTitle but this still doesn't work.</p>
  
  <p>In every browser (IE9 non-compatibility, Firefox, Chrome) it works fine and I've been looking at this for a couple of hours now which is getting slightly frustrating as I can't spot the issue.</p>
  
  <p>The content is on a ASP.NET page which uses a MasterPage which has the doctype:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  </code></pre>
  
  <p>Can anyone help shed some light on this please?</p>
  
  <p>Thanks in advance</p>
  
  <p>Andy</p>