Flash CSS issues

I’m have issues in IE6 with my CSS for my flash[:notice] and
flash[:error].

My CSS is as follows (basically copied from backpack’s CSS file for
testing purposes):

#Flash {
text-align: left;
border: 1px solid #ccc;
padding: 5px 5px 5px 30px;
font-size: 14px;
margin: 0 auto 12px auto;
margin-right: 7px;
}

.login #Flash {
margin-top: 12px;
font-size: 12px;
}

#Flash.good {
border-color: #9c9;
color: #060;
background: url(/images/alertgood_icon.gif) #E2F9E3 left no-repeat;
}

#Flash.bad {
border-color: #c99;
color: #fff;
background: url(/images/alertbad_icon.gif) #c00 left no-repeat;
}

I display the errors in my main application layout file using:

<%= ‘

’ + flash[:error] + ‘
’ unless
(flash[:error].nil? || flash[:error].length <= 0) %>
<%= ‘
’ + flash[:notice] + ‘
’ unless
(flash[:notice].nil? || flash[:notice].length <= 0) %>

Now what’s happening is that my “notice” messages show up with all the
formatting (green background, dark green border, etc), but my error
messages comes out in an unformatted div with a single black border.
However, if I put the CSS code for #Flash.bad before #Flash.good, the
problem reverses, and the “notice” messages stop getting formatted.

This issue is only happening with IE6. Safari and Firefox display both
types perfectly fine.

Okay, it looks like the my actual backpack page doesn’t show the red
error divs properly in IE6 either. I switched to just doing a “div.good”
and “div.bad” instead of using the Flash ID and it worked fine. Weird
problem.