Banal CSS virker ikke i IE (6 og 7)

På mit site har jeg en gif i toppen af alle sider, som med sine farver skal vise i hvilken sektion af sitet man befinder sig.

Jeg bruger en class-property i et div-tag til at differentiere mellem de forkellige sektioner, så man i stylesheetet kan have forskellige baggrundsbilleder.

Div-tagget ser ud som følger...

<div id="section" class="news"></div>
I stylesheetet (nedenfor) bliver der så først vist et default billede, men dette bliver straks efter overskrevet af det billede som findes under den aktuelle class (i dette tilfælde .news).

div#section {
width: 640px;
height: 60px;
background: url(images/sec_default.gif) no-repeat #FFF;
}

div#section.links {
background: url(images/sec_links.gif) no-repeat;
}

div#section.news {
background: url(images/sec_news.gif) no-repeat;
}

Alt dette virker perfekt i Firefox (selvfølgelig), men i IE bliver default billedet ikke overskrevet. Det med mindre vi i stylesheetet flytter class .news op før class .links - se det her.

Er der mon nogen der kan fortælle mig hvad jeg gør galt?

Mvh.
hangaard