How come display none from javascript does not make thing disappear sometimes?

Question

I have a stange situation I have come across simular things several times. I think it might have something to do with having tons of tables and divs mixed together. Sometimes, I use JavaScript to set a certain div, td, etc to display none, and some of it's content still shows on the screen.

I am sure I am using the correct JavaScript syntax. I even step through the code and make sure the diaplay value it none. This this case I also used developer tools to look at the dom. In this case the element and all it's children are set to display:none.

I have seen this type of thing a few times. Does anyont have any guess what is going on?

I am using ie8 in ie7 compat mode.

Grae

Answer 1

Look for the !important declaration:

#foo { display: block !important; }

Or a very specific selector:

#content div #foo { display: block; }

If either is used in the external CSS or inline style, it will override display: none;. Change the CSS or use display: none !important; in the JavaScript to workaround this.