IE designMode Showing display:none Divs

Question

I've done a lot of research on this,but I'm unable to solve this problem. I've got a Div with several Divs within it that I want to hide before switching on a TinyMCE instance.

I'm doing this via jQuery -

$(".drop").hide()

This works fine, and every browser engine except Trident (IE) hides them. If I inspect the elements in IE, the css indicates "display:none".

I found a few articles and notes about how this is a feature of IE to show those elements, including this one on MSDN: http://msdn.microsoft.com/en-us/library/aa770023(VS.85).aspx

The problem is that I need those to hide. Any ideas?

Answer 1

You could try applying a style that sets the display to something other than none, for example:

.drop
{
    display: block; // or inline
}

This sounds like its being caused by IE's need for the element to "have layout" in order to do certain operations on it, hiding being one of them. Elements given a display type of block should have layout, that is, it occupies space and forces the browser to reorganize sibling elements around it.

Answer 2

As far as I remember tinyMCE uses an iframe to edit and enables edit mode within the iframe so if you are in edit mode before loading tinyMCE are you sure you have to place the outer document in edit mode.

To clarify, are you trying to affect the inside of the iframe or is tinyMCE loading content containing display: none

At face value if you're loading content with display: none into tinyMCE you might have to do some kind of messy workaround where you remove the nodes at load and attempt to reinsert them in the same position when saving.

The only benefit I can see is if in other browsers you would unknowingly delete the hidden nodes by just selecting text on both sides of the node.

Answer 3

This is because inside an editable element IE makes everything, including elements hidden with display: none, editable. There's nothing you can do about it except remove the elements you wish to hide from the page's DOM.

There's a reference to this behaviour of IE here: http://msdn.microsoft.com/en-us/library/aa770023%28VS.85%29.aspx