[css-d] IE6 problem with background color on H2 element

[Brett]

I am having a problem with IE6 rendering a background color on the H2 
element *sometimes*.  In my stylesheet I have:

.news #news_list h2 {
    background-color:#000;
    line-height:36px;
    margin-left:0px;
    margin-right:10px;
}
.news #news_list h2 span {
    color:#fff;
    margin-left:20px;
}

This displays fine in all browsers including IE6 (W).  Just below that 
div is another div with the following:

.news #events_snip h2 {
    background-color:#000;
    line-height:36px;
    margin-right:10px;
    margin-left:0px;
}
.news #events_snip h2 span {
    color:#fff;
    margin-left:20px;
}

This displays fine in FF (W & M), Opera (W & M), Safari (M), but NOT in 
IE6 (W)

Here is an excerpt of the markup:

<div id="news_list">
   <h2><span>News</span></h2>
        <ul>
            <li>Blah blah</li>
        </ul>  
</div>

<div id="events_snip">
  <h2><span>Events</span></h2>
         <ul>
            <li>Blah blah</li>
        </ul>  
</div>

Does anyone know why the second H2 element is not displaying properly in 
IE6 (W)?  The element is there because I can see the text, but the 
background is not showing up.  Also, if I add display:block; to the H2 
element, it acts more like I added it to the span.  In other words, it 
does not display the full line-height specified, just the text height.  
Why is that?


______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/