Tony Hale

Tony,

I'm afraid this email may be a bit of a disappointment to you. This problem
is well known, and unfortunately has no easy solution.

Many browsers use the Operating System's widgets to make form controls.
Doing this means that the Operating System takes control of that piece of
screen space. Unfortunately, the Operating System has no concept of CSS
layers, so when a layer/positioned element hovers over the form control,
the widget still shows through as if it were in the top-most layer.

Netscape 4 is by far the worst offender, but most browsers on Windows will
do the same thing to some extent, and may also do the same on Linux or Mac,
depending on how they are written. The same is also true for the iframe
element, and any applets or plugins.

Now, for the solution ... if you can call it a solution.
The only way to avoid this bug is to set the visibility style to 'hidden'
for all form elements whenever a layer may be above them - and this
includes the mini-windows, since they are just glamourised layers. Netscape
4 will still ignore you - since it cannot set styles on input elements, and
even if it could, it still shows parts of the inputs anyway.

Unfortunately, it can be very difficult to work out when a layer may be
above the input so in general, this is not a solution. Alternatively, you
can hold the form in an element with either the visibility style set to
'hidden' or the display style set to 'none' (for Netscape 4 to pay
attention, it must be a positioned element - but it won't hide them
properly anyway) - and only make it visible again when the form is actually
going to be used.

Other than that, it's just a big mess, due to the browser vendors wanting
to save themselves some time by using Operating System widgets instead of
writing their own.


Wish I could help more, but I hope you can get something useful from that.

Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

> When the miniwindows are invisible in IE6 on WinXP, they are still
> 'present' in the sense that they inhibit entering any data under the area
> they cover.

I cannot replicate this behaviour in any version of IE (I have 4, 5, 5.5, 6)
Which exact version are you using? Is it IE6 on Windows XP SP2 by any
chance (the only one I don't have access to).

I tried clicking links behind the hidden part of the windows. I tried
clicking on text inputs. I tried making the background elements absolutely
positioned, since I assume this is how you got rid of the widget virtual
z-index bug. Nothing reproduced what you said. If you are having problems,
there is an alternative that may solve them.

Within the functions hideMinWin and showMinWin, do something like this
right before the end of the function:

if( document.childNodes && (d=thisDiv.getElementsByTagName('DIV')[1]) ) {
  d.parentNode.style.display = 'none'; //for hideMinWin
  d.parentNode.style.display = ''; //for showMinWin
}

That should remove the main content part of the mini window completely from
the document while it is hidden. Any menus will still exist, but hopefully,
these would not take up enough space to be a problem.

If this works, I will release a new version of the script which includes
this extra fix.

I am still confused by this problem though. Since this would mean problems
for virtually all DHTML menus in existence. Could you give mine a try is
the same copy of IE, and tell me if they have problems if the menus had
been obscuring links:
http://www.howtocreate.co.uk/tutorials/jsexamples/showhidedelayarray.html

Do you have any unusual content in the mini windows? Like iframes, for
example? Or anything else unusual in your page that may cause this odd
behaviour?

> Nevertheless, making the main webpage invisible while the miniwindow is
> open was a great solution to the former problem we discussed.  No
> difficulties there.

good to hear you managed to make something work.

>  So, I just wanted to make you aware of my travails.  Perhaps you can
> publicize these problems so that someone else might benefit from the
> knowledge.

All emails I get relating to my scripts are publicised for this reason :)
http://www.howtocreate.co.uk/emails/

Cheers

Tarquin

Tony,

I have managed to get a copy of XP SP2 installed. I cannot replicate this
problem. It must be something that you are doing on your page that
demonstrates this issue. I even tried putting various form elements and
links in the mini windows and seeing if there were problems when they
overlayed each other. In all cases, it worked correctly.

Is this page available online so that I can see the bug for myself? I may
be able to work out the cause (I will keep the address private).

Cheers

Tarquin

Woohoo!

Ok, it took me a while, but I finally managed to pin it down. Inside the
mini windows (which, you will remember, are basically just glamorised
layers/positioned elements), you have a table. The table has a caption.
That is important. When you have a caption on a table in a positioned
element, and the positioned element has the visibility style set to
'hidden', Internet Explorer 5.5+ will treat the table as if it were
visible. Even though you will not be able to see it, it will stop the mouse
from being able to interract with anything behind the table.

If you move the layer at any time after it has been created, the problem
disappears.

To summarise: remove the caption and the problem stops. If you move the
mini windows after you create them, the problem stops. I have attached a
minimal example demonstrating the bug.

Tony,

no, the mini window is the hidden div.
in the mini window contents, you are putting the table with the caption.