ASP .NET - IE6 Bug Workaround ?????

Author

IE6 Bug Workaround ?????

Just Me

2008-03-28, 7:28 pm

Hi,

I know this is not an IE newsgroup. But im going to ask your opinion on
this. I have a customer who cannot change at this time from IE6. The
following form is a simple example of a problem which exists where Combo
Boxes do not appear to obey the z-index laws. In my example, the top div
contains a DDL, and on the button click, the bottom div is moved over it,
this should obscure the DDL, but it appears on the surface. This has been
fixed in IE7, but I need to find a solution in IE6 if possible as I need to
use draggable divs in the application, and i cant have one div apparently
slicing its way through another div and the DDL's it has on its surface.

Any help would be appreciated.

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">
<script type="text/javascript" >

function moveDiv(){

var divBottom = document.getElementById('divBottom');
divBottom.style.top ="0px";
divBottom.style.left="50px";
divBottom.style.position="absolute";

}
</script>
</head>
<body>
<form id="form1" runat="server">

<div>

<asp:DropDownList ID="DropDownList1" runat="server"
style="position:relative;" Width="113px">
<asp:ListItem>Item 0</asp:ListItem>
</asp:DropDownList>

</div>

</div>

<div id="divBottom" style="position:absolute;top:500px;width: 215px;
height: 100px;background-color:green;">

</div>

<input id="Button1" type="button" value="Move"
style="position:absolute;top:200px" onclick="moveDiv()" /></div>

</form>
</body>
</html>

Alexey Smirnov

2008-03-28, 7:28 pm

On Mar 28, 9:46=A0pm, "Just Me" <news.microsoft.com> wrote:
> Hi,
>
> I know this is not an IE newsgroup. But im going to ask your opinion on
> this. I have a customer who cannot change at this time from IE6. =A0The
> following form is a simple example of =A0a problem which exists where Comb=
o
> Boxes do not appear to obey the z-index laws. =A0In my example, the top di=
v
> contains a DDL, and on the button click, the bottom div is moved over it,
> this should obscure the DDL, but it appears on the surface. This has been
> fixed in IE7, but I need to find a solution in IE6 if possible as I need t=
o
> use draggable divs in the application, and i cant have one div apparently
> slicing its way through another div and the DDL's it has on its surface.
>
> Any help would be appreciated.
>
> <%@ Page Language=3D"C#" AutoEventWireup=3D"true" %>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>
> <html xmlns=3D"http://www.w3.org/1999/xhtml" >
>
> <head runat=3D"server">
> <script type=3D"text/javascript" >
>
> function moveDiv(){
>
> var divBottom =3D document.getElementById('divBottom');
> divBottom.style.top =3D"0px";
> divBottom.style.left=3D"50px";
> divBottom.style.position=3D"absolute";
>
> }
>
> </script>
> </head>
> <body>
> <form id=3D"form1" runat=3D"server">
>
> <div>
>
> =A0<asp:DropDownList ID=3D"DropDownList1" runat=3D"server"
> style=3D"position:relative;" Width=3D"113px">
> =A0 =A0 <asp:ListItem>Item 0</asp:ListItem>
> =A0</asp:DropDownList>
>
> </div>
>
> </div>
>
> <div id=3D"divBottom" =A0style=3D"position:absolute;top:500px;width: 215px=
;
> height: 100px;background-color:green;">
>
> </div>
>
> <input id=3D"Button1" type=3D"button" value=3D"Move"
> style=3D"position:absolute;top:200px" onclick=3D"moveDiv()" /></div>
>
> </form>
> </body>
> </html>

Try to make it invisible.

Just Me

2008-03-28, 7:28 pm

LOL

Thanks for that, i had already thought of doing that, but i wanted a better
solution.

"Alexey Smirnov" <alexey.smirnov@gmail.com> wrote in message
news:c0b7dea6-626a-49a8-a7cf-b339f1f5c05b@s8g2000prg.googlegroups.com...
On Mar 28, 9:46 pm, "Just Me" <news.microsoft.com> wrote:
> Hi,
>
> I know this is not an IE newsgroup. But im going to ask your opinion on
> this. I have a customer who cannot change at this time from IE6. The
> following form is a simple example of a problem which exists where Combo
> Boxes do not appear to obey the z-index laws. In my example, the top div
> contains a DDL, and on the button click, the bottom div is moved over it,
> this should obscure the DDL, but it appears on the surface. This has been
> fixed in IE7, but I need to find a solution in IE6 if possible as I need
> to
> use draggable divs in the application, and i cant have one div apparently
> slicing its way through another div and the DDL's it has on its surface.
>
> Any help would be appreciated.
>
> <%@ Page Language="C#" AutoEventWireup="true" %>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>
> <html xmlns="http://www.w3.org/1999/xhtml" >
>
> <head runat="server">
> <script type="text/javascript" >
>
> function moveDiv(){
>
> var divBottom = document.getElementById('divBottom');
> divBottom.style.top ="0px";
> divBottom.style.left="50px";
> divBottom.style.position="absolute";
>
> }
>
> </script>
> </head>
> <body>
> <form id="form1" runat="server">
>
> <div>
>
> <asp:DropDownList ID="DropDownList1" runat="server"
> style="position:relative;" Width="113px">
> <asp:ListItem>Item 0</asp:ListItem>
> </asp:DropDownList>
>
> </div>
>
> </div>
>
> <div id="divBottom" style="position:absolute;top:500px;width: 215px;
> height: 100px;background-color:green;">
>
> </div>
>
> <input id="Button1" type="button" value="Move"
> style="position:absolute;top:200px" onclick="moveDiv()" /></div>
>
> </form>
> </body>
> </html>

Try to make it invisible.

Alexey Smirnov

2008-03-28, 7:28 pm

On Mar 28, 10:17=A0pm, "Just Me" <news.microsoft.com> wrote:
> LOL
>
> Thanks for that, i had already thought of doing that, but i wanted a bette=
r
> solution.
>

Well, this is a well known issue with the IE 6 and combo-box will be
always over. You may try another approach with an iframe exactly over
the div. See more http://www.codeproject.com/KB/dotnet/Overlapping.aspx

Alexey Smirnov

2008-03-28, 7:28 pm

On Mar 28, 10:45=A0pm, Alexey Smirnov <alexey.smir...@gmail.com> wrote:
> On Mar 28, 10:17=A0pm, "Just Me" <news.microsoft.com> wrote:
>
>
ter[color=darkred]
>
> Well, this is a well known issue with the IE 6 and combo-box will be
> always over. You may try another approach with an iframe exactly over
> the div. See morehttp://www.codeproject.com/KB/dotnet/Overlapping.aspx

or maybe try this http://shepherdweb.com/2007/02/14/z...nored-for-sele=
ct-element-in-ie-6-workaround/

it does the same using CSS only

bruce barker

2008-03-28, 7:28 pm

there are two solutions to this:

1) make the <select>'s hidden.
2) use a "floating" iframe instead of a div. an iframe because its a
seperate window can be on top of a <select>. javascript can copy the div
inner html to the iframe's document.

-- bruce (sqlwork.com)

"Just Me" wrote:

> Hi,
>
> I know this is not an IE newsgroup. But im going to ask your opinion on
> this. I have a customer who cannot change at this time from IE6. The
> following form is a simple example of a problem which exists where Combo
> Boxes do not appear to obey the z-index laws. In my example, the top div
> contains a DDL, and on the button click, the bottom div is moved over it,
> this should obscure the DDL, but it appears on the surface. This has been
> fixed in IE7, but I need to find a solution in IE6 if possible as I need to
> use draggable divs in the application, and i cant have one div apparently
> slicing its way through another div and the DDL's it has on its surface.
>
> Any help would be appreciated.
>
> <%@ Page Language="C#" AutoEventWireup="true" %>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>
> <html xmlns="http://www.w3.org/1999/xhtml" >
>
> <head runat="server">
> <script type="text/javascript" >
>
> function moveDiv(){
>
> var divBottom = document.getElementById('divBottom');
> divBottom.style.top ="0px";
> divBottom.style.left="50px";
> divBottom.style.position="absolute";
>
> }
> </script>
> </head>
> <body>
> <form id="form1" runat="server">
>
> <div>
>
> <asp:DropDownList ID="DropDownList1" runat="server"
> style="position:relative;" Width="113px">
> <asp:ListItem>Item 0</asp:ListItem>
> </asp:DropDownList>
>
> </div>
>
> </div>
>
> <div id="divBottom" style="position:absolute;top:500px;width: 215px;
> height: 100px;background-color:green;">
>
> </div>
>
> <input id="Button1" type="button" value="Move"
> style="position:absolute;top:200px" onclick="moveDiv()" /></div>
>
> </form>
> </body>
> </html>
>
>
>

Just Me

2008-03-28, 10:22 pm

Thanks 2 all for your replies.

1.) Hiding is definately an option to consider, and Is probably what I'll
end up doing.

2.) Using an iframe complicates matters, because I wanted the functionality
to be part of the same page/form. Im not sure if i can trigger a postback
from the document in the IFRAME on the host page. I know ive done it in the
past, but newer security measures may prevent this now ?

I keep repeadetly hitting issues with explorer day after day after day,
while with firefox, its not perfect but it seems to work so much more
robustly and seems to conform much better to css.

Ahh well, onwards and upwards.

Again - Thanks to everyone.

"bruce barker" <brucebarker@discussions.microsoft.com> wrote in message
news:A3B8E7D9-FA91-4817-A7A7-3DE3E79AAAD8@microsoft.com...[color=darkred]
> there are two solutions to this:
>
> 1) make the <select>'s hidden.
> 2) use a "floating" iframe instead of a div. an iframe because its a
> seperate window can be on top of a <select>. javascript can copy the div
> inner html to the iframe's document.
>
> -- bruce (sqlwork.com)
>
>
> "Just Me" wrote:
>

Just Me

2008-03-28, 10:22 pm

Thanks Alexy.

I think ill just hide it. :)

Best regards and thank you.

"Alexey Smirnov" <alexey.smirnov@gmail.com> wrote in message
news:da76d5b9-3a05-476d-a940-699169978b6f@i12g2000prf.googlegroups.com...
On Mar 28, 10:45 pm, Alexey Smirnov <alexey.smir...@gmail.com> wrote:
> On Mar 28, 10:17 pm, "Just Me" <news.microsoft.com> wrote:
>
>
>
> Well, this is a well known issue with the IE 6 and combo-box will be
> always over. You may try another approach with an iframe exactly over
> the div. See morehttp://www.codeproject.com/KB/dotnet/Overlapping.aspx

or maybe try this
http://shepherdweb.com/2007/02/14/z...e-6-workaround/

it does the same using CSS only

Sponsored Links