IE7: element showing even with display: none

Question

I am trying to hide a "required" message when the page is first shown. On FF and IE8 this works, but for some reason the message shows on IE7.

Here is the HTML:

    <div id="passwordDivRequired" class="requiredMsg">
        <img src="images/required.png" />
                            Required                        
    </div>

And here is the CSS:

.requiredMsg img{
    width: 1.5em;
    height: 1.5em;
    position: relative;
    bottom: -.4em;
}

div .requiredMsg {
    color: #BF5754;
    display: none;
}

Answer 1

div .requiredMsg

Selects any element with a class attribute that contains the word requiredMsg that is a descendant of a div element.

— http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py

Get rid of the descendant selector (the space).

Answer 2

David Dorward undeniably had the correct answer to this particular problem, but for completeness of the record, there are two (at least) other IE<=7 specific causes for an element to display when hidden in other browsers:

1) One is described perfectly here: http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm To give the basic gist, it can happen if your element is hidden after page load, in a container that is dynamically hidden then shown. There's more info, a great demo and some fixes on that page.

2) Another rarer but probably related IE7 glitch: a 'Display: Block' (set by CSS) element shows despite being inside a 'Display: None' (set by javascript) 'div' element, while other child elements without 'Display' being set don't show as expected. The container in this case was a 'Position: fixed' div (also set by JS) and the child an anchor ('a'). For me, the only thing that fixed it was restructuring my application logic so that the 'Display: None' was applied in the CSS before page load, instead of after by Javascript. This worked even when the display was toggled with javascript later on.

In general, IE<=7 seems to have confusing issues with display inheritance when content is hidden after page load.

(feel free to edit)