Z-order problem in IE6

[tshad]

I have a ,net page using 2008 that works fine except for a few positioning
problem in IE6.

It works in all the other browsers.

I have a small Div that is positioned over my main window and when I unhide
it it looks fine except for a couple of dropdowns from the main form that
are showing on top of the new Div area.

Is there a way to tell the program to hide the dropdown behind the new area?

Thanks,

Tom

 

[William Niver]

The issue is that dropdownlists and a few other controls are drawn to the
page last (not that the z-Index is wrong)
There are a couple of ways to fix this.

The first method is to create an iframe "shim" under your div (that is the
same size and positioning of it) This will block things like dropdownlists
from showing through.
the other method is to use javascript to find and hide the elements that are
showing through. The following code has a dropdownlist selection and two
links. One hides the select and the other shows it.

Hope this helps!

William

<script language="javascript" type="text/javascript">
function toggleSelects(mode) {
var aSelects = document.getElementsByTagName("select");
var nSelects = aSelects.length;
for (var i = 0; i < nSelects; i++) {
eSelect = aSelects;
eSelect.style.visibility = mode;
}
}
</script>

<aspropDownList ID="ddl_Test" runat="server">
<asp:ListItem>One</asp:ListItem>
<asp:ListItem>Two</asp:ListItem>
<asp:ListItem>Three</asp:ListItem>
</aspropDownList>

<a href="javascript:toggleSelects('hidden');">Hide Select Controls</a>
<a href="javascript:toggleSelects('visible');">Show Select Controls</a>

 

[Jesse Houwing]

Hello William,

The issue is that dropdownlists and a few other controls are drawn to
the
page last (not that the z-Index is wrong)
There are a couple of ways to fix this.
The first method is to create an iframe "shim" under your div (that is
the
same size and positioning of it) This will block things like
dropdownlists
from showing through.
the other method is to use javascript to find and hide the elements
that are
showing through. The following code has a dropdownlist selection and
two
links. One hides the select and the other shows it.
Hope this helps!

From:
http://www.last-child.com/conflicting-z-index-in-ie6/

While crediting Aleksandar Vacić for first reporting this bug, PPK doesn’t
mention Aleksandar’s simple solution. Give the parent a position:relative
and z-index:1..

Now, of course it isn’t always that simple. There’s also the issue of subsequent
objects that also have a z-index and what happens if their parent is also
positioned with a z-index. Please take some time to visit Aleksandar’s web
site if you are having this conflict.

Jesse

<script language="javascript" type="text/javascript">
function toggleSelects(mode) {
var aSelects = document.getElementsByTagName("select");
var nSelects = aSelects.length;
for (var i = 0; i < nSelects; i++) {
eSelect = aSelects;
eSelect.style.visibility = mode;
}
}
</script>
<aspropDownList ID="ddl_Test" runat="server">
<asp:ListItem>One</asp:ListItem>
<asp:ListItem>Two</asp:ListItem>
<asp:ListItem>Three</asp:ListItem>
</aspropDownList>
<a href="javascript:toggleSelects('hidden');">Hide Select Controls</a>
<a href="javascript:toggleSelects('visible');">Show Select
Controls</a>

I have a ,net page using 2008 that works fine except for a few
positioning problem in IE6.

It works in all the other browsers.

I have a small Div that is positioned over my main window and when I
unhide it it looks fine except for a couple of dropdowns from the
main form that are showing on top of the new Div area.

Is there a way to tell the program to hide the dropdown behind the
new area?

Thanks,

Tom

 

[Göran Andersson]

Hello William,


From:
http://www.last-child.com/conflicting-z-index-in-ie6/

While crediting Aleksandar Vacić for first reporting this bug, PPK
doesn’t mention Aleksandar’s simple solution. Give the parent a
position:relative and z-index:1..

Now, of course it isn’t always that simple. There’s also the issue of
subsequent objects that also have a z-index and what happens if their
parent is also positioned with a z-index. Please take some time to visit
Aleksandar’s web site if you are having this conflict.

Jesse

That applies when the problem is actually the z-index, which it is not
in this case...