IE6 Bug Workaround ?????

Discussion in 'ASP .Net' started by Just Me, Mar 28, 2008.

  1. Just Me

    Just Me Guest

    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, Mar 28, 2008
    #1
    1. Advertising

  2. 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, Mar 28, 2008
    #2
    1. Advertising

  3. Just Me

    Just Me Guest

    LOL

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


    "Alexey Smirnov" <> wrote in message
    news:...
    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.
     
    Just Me, Mar 28, 2008
    #3
  4. On Mar 28, 10:17 pm, "Just Me" <news.microsoft.com> wrote:
    > LOL
    >
    > Thanks for that, i had already thought of doing that, but i wanted a better
    > 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, Mar 28, 2008
    #4
  5. On Mar 28, 10:45 pm, Alexey Smirnov <> wrote:
    > On Mar 28, 10:17 pm, "Just Me" <news.microsoft.com> wrote:
    >
    > > LOL

    >
    > > Thanks for that, i had already thought of doing that, but i wanted a better
    > > 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 morehttp://www.codeproject.com/KB/dotnet/Overlapping.aspx


    or maybe try this http://shepherdweb.com/2007/02/14/z-index-ignored-for-select-element-in-ie-6-workaround/

    it does the same using CSS only
     
    Alexey Smirnov, Mar 28, 2008
    #5
  6. Just Me

    bruce barker Guest

    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>
    >
    >
    >
     
    bruce barker, Mar 28, 2008
    #6
  7. Just Me

    Just Me Guest

    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" <> wrote in message
    news:...
    > 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, Mar 29, 2008
    #7
  8. Just Me

    Just Me Guest

    Thanks Alexy.

    I think ill just hide it. :)

    Best regards and thank you.


    "Alexey Smirnov" <> wrote in message
    news:...
    On Mar 28, 10:45 pm, Alexey Smirnov <> wrote:
    > On Mar 28, 10:17 pm, "Just Me" <news.microsoft.com> wrote:
    >
    > > LOL

    >
    > > Thanks for that, i had already thought of doing that, but i wanted a
    > > better
    > > 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 morehttp://www.codeproject.com/KB/dotnet/Overlapping.aspx


    or maybe try this
    http://shepherdweb.com/2007/02/14/z-index-ignored-for-select-element-in-ie-6-workaround/

    it does the same using CSS only
     
    Just Me, Mar 29, 2008
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ivor O'Connor
    Replies:
    4
    Views:
    879
    Isofarro
    Nov 25, 2003
  2. Jens Lenge

    DIV height - IE6 workaround?

    Jens Lenge, Mar 5, 2005, in forum: HTML
    Replies:
    16
    Views:
    29,961
    kchayka
    Mar 8, 2005
  3. Tole

    IE6 download bug & workaround

    Tole, Aug 6, 2003, in forum: Javascript
    Replies:
    0
    Views:
    72
  4. Adam Warner

    IE6 SP1 workaround?

    Adam Warner, Nov 9, 2004, in forum: Javascript
    Replies:
    2
    Views:
    131
    Adam Warner
    Nov 9, 2004
  5. SamuelXiao
    Replies:
    5
    Views:
    288
    Thomas 'PointedEars' Lahn
    Jan 6, 2010
Loading...

Share This Page