Explaination? Layers in IE.

[tbirnseth]

I pulled my hair out trying to resolve a problem where links were not active under IE, but were under FF. Solution turned out to be to move all the hidden divs (<div style="visibility:hidden") below the main page content in the layout.

Apparently IE may hide the layer but it will still obscure mouse focus on what may be underneath it. I would expect hidden to also imply transparent for actions. Stuff works as expected in FF but this was a real pain to find in IE.

So I was hoping someone could provide a brief explaination of the differences between how IE handles layers and how FF and others do and maybe the best practices for using them.

thanks,
tony

[Fang]

The hidden div is not transparent for actions in any browser. The difference you are seeing is the difference in event bubbling.
Open Fx and IE to this page on event flow example (http://www.brainjar.com/dhtml/events/default3.asp), read the article, see the differences. Further reading (http://www.quirksmode.org/js/events_order.html)
Best practices: know the differences between browsers.

Why are you hiding content using layers?

[tbirnseth]

Why are you hiding content using layers?
The page (loosely modeled after an invoice) displays order information for a merchant. It is in document style. The document is broken into sections (order Info, item details, buyer, reciepient, financial info). Each section has an anchor tag of 'edit' associated with it. Clicking the 'edit' link invokes some javascript which opens an anchored layer with the appropriate form elements for editing/changing/setting values within the section. The layer provides the ability to save/discard changes. Clicking one of the actions will POST the info to the page.

This allows for a nice clean display of the information without having to show all the lengthy (and space consuming) selector boxes, text boxes, checkboxes, etc. It then looks like a document instead of a form.

The document contains about 6 different sections. That's why I use layers for editing the info.

The referenced page is good info. Given what I've learned here, it sounds like the best approach is to use display:none versus visibility:hidden with absolute positioning. Then have my javascript handler change the display property to 'block' from 'none' when I want to display the edit pane.

I was completely lost in trying to find the problem till it occurred to me that the links might be obscured by the hidden layers (in IE). My initial solution was to move the layer layout to the end of the document to prevent obscuring the controls in the main page. But I will probably change from visibility to display. It seems to be the most effective. From the article you referenced, it is clear to me now how the event handling works.

Thanks for the reply,
tony

[drhowarddrfine]

There is no such thing as a layer. There are divs...and divs can be layered using the z-index, but, otherwise, there is no such thing as a 'layer'.

[tbirnseth]

Okay, excuse me for using slang to indicate what I was trying to describe. Obviously I'm using div's to create the layers. From a user's perspective, it appears to them as a layer (overlays what is underneath). Sometimes using words to describe a visual image requires conceptual terms versus technical.

[smartsite]

wow - thank you guys so much! i was having the same problem - the hidden layers, er ah, divs, worked in ff but not ie. changing from 'visibility' to 'display' EVERYWHERE in the code fixed the problem. yay!