IE7 IFRAME DHTML CONFLICT

Question

I have a web page that includes an iframe as well a DHTML calendar widget. The page displays correctly as well as the content inside the iframe. The problem is when I activate the calendar which is positioned close enough to the iframe that some of the calendar is hidden by the iframe. I have tried to manipulate the positioning of the iframe by using both javascript and CSS (Zindex, z-index) but the iframe always appears as the top most layer on the page obscurring any parent DHTML content that gets rendered in the same area as the iframe. I also changed the css of the DHTML calendar to values > 0 and wrapped the widget scriplet in a div/span with a high z-index value but no luck.

I have searched the web and found some similar problems but no solutions.

Any suggesstions.

Answer 1

The z-index of an iframe is handled in a weird way by IE. If you can get rid of it, I'd recommend you do and just embeded the content in a regular Div.

If you don't have other choices than do it like this, keep in mind that the z-index of elements like and will be infinite in IE6. So the way to stack that is to use iframes with higher zindexes, so that it will be infinity vs infinity+1.

An example of this is vs stacking. Both have infinite z-index, but you can stack them. Checkout Stu Nicholls code, that could be helpful.

That's pretty bad thought, my fix would be to avoid having other fields in this area.

Answer 2

You can definitely cover the iFrame with a div.

The thing is you can't use z-index unless you use position:relative, or position:absolute, or position: fixed on the calandar div.

What you want to do is change the "position" CSS property of the calandar to be "relative". If your iFrame has the normal static positioning (meaning you didn't add any special positioning to it, this will work).

If your iFrame has "absolute" positioning, you might need to do "position:absolute" on the calandar.

See link: http://resopollution.com/test/test.html

(works in all modern browsers including IE6)

Answer 3

Google for "IE z-index bug" for a variety of examples and solutions to similar problems. The html specification states that z-index should be absolute, but in IE it can be determined for an element if a parent element is positioned. In extreme circumstances, I've had to trace back up the DOM tree from the element that's causing problems and set the z-index attribute on whatever parent element has position, not on the element that is being obscured (and should rightfully have its z-index set). IE Developer toolbar can help for dynamic debugging if it's really a mess, just start setting the z-index properties up the tree until you find the one that makes it looks right.

Answer 4

I just realized that the problem seems to be related to the MSXML and how IE transforms XML documents. The XML has an XSLT stylesheet association which the browser uses to transform the XML document. The output of the transformation is an HTML document. I didn't think it was import to disclose that I my HTTP response was XML since the HTML is what is rendered in the end, but it does matter. When the source of the IFRAME is an HTML document everything works fine. The DHTML is not covered by the IFRAME. But when MSXML is used to transform the IFRAME content this is when the problem occurs. Below are some sample files that illustrate the problem. For the DHTML compoenent I am using the spiffycalendar widget but I would imagine any DHTML element would produce the same results.

PARENT.HTML

IFRAME DHTML CONFLICT EXAMPLE

var pickupdate=new ctlSpiffyCalendarBox("pickupdate", "mainF", "PICKUP_DATE","btnDate1","",1);

PARENT WINDOW   FIELD FIELD FIELDpickupdate.writeControl(); FIELD FIELD FIELD Save Changes

IFRAME.HTML

IFRAME.XSL ]> TEST XML DOC IFRAME CONTENT