IE Overlapping Layer Bug?

Discussion in 'HTML' started by Peter, Jul 13, 2004.

  1. Peter

    Peter Guest

    For some reason, I am unable to use the JavaScript "onMouseOut" event
    handler with overlapping <div> layers in Internet Explorer 5.5+. This is
    what I want to do:

    First, I set one <div> layer over the other. The layer beneath (z-index:0)
    has an image in it. The layer on top (z-index:1) has two paragraphs of text,
    and an onMouseOut event handler. Whenever one exits the layer's "square"
    area, the layer should disappear.

    The problem is that, whenever I move the mouse to the space between the two
    paragraphs, the onMouseOut handler kicks in even though I am still INSIDE
    the <div> layer's "square".

    This also happens when I move the mouse over bold text. I have set up an
    (IE) example where the problem is clear:

    <div style="z-index:0;width:300px;position:absolute;left:0px;top:0px">
    <img src="any_image.gif" width=500 height=300>
    </div>

    <div onMouseOut="document.all.box1b.style.visibility = 'hidden';" id="box1b"
    style="z-index:1;width:300px;position:absolute;left:125px;top:100px;">
    <p>Between this paragraph and the next, there is a space. When jumping with
    the mouse pointer from this paragraph<br><br>to this one, the
    <b>onMouseOut</b> should not kick in, yet it does. Why? The same happens
    when you move the pointer over <b>bold text</b>.</p>
    </div>



    Is this a bug in Internet Explorer, or is there a reason and a solution for
    this behavior?

    In advance, I appreciate your help. Regards,

    Peter
    Peter, Jul 13, 2004
    #1
    1. Advertising

  2. Peter

    brucie Guest

    in post: <news:ccvdm9$e68$>
    Peter <> said:

    > Internet Explorer 5.5+.


    IE5.5 is 4 years old this month. its unreasonable for people to expect
    authors to support such old browsers and/or expect them to work/perform
    the same or similar as newer browsers.

    urge people to either upgrade or have them beaten to death.

    i recommend one of the gecko family of browsers or opera

    --
    b r u c i e
    brucie, Jul 13, 2004
    #2
    1. Advertising

  3. Peter

    Karl Groves Guest

    "brucie" <> wrote in message
    news:...
    > in post: <news:ccvdm9$e68$>
    > Peter <> said:
    >
    > > Internet Explorer 5.5+.

    >
    > IE5.5 is 4 years old this month. its unreasonable for people to expect
    > authors to support such old browsers and/or expect them to work/perform
    > the same or similar as newer browsers.
    >
    > urge people to either upgrade or have them beaten to death.
    >
    > i recommend one of the gecko family of browsers or opera


    I'm contemplating blocking IE users from my personal site.
    Perhaps with a redirect that says "You make my dayjob a living hell."

    -Karl
    Karl Groves, Jul 13, 2004
    #3
  4. Peter

    Webcastmaker Guest

    In article <ccvdm9$e68$>,
    says...
    > This also happens when I move the mouse over bold text. I have set up an
    > (IE) example where the problem is clear:


    Where?
    --
    WebcastMaker
    The easiest and most affordable way to create
    Web casts, or put presentations on the Web.
    www.webentations.com
    Webcastmaker, Jul 13, 2004
    #4
  5. Peter

    brucie Guest

    in post: <news:>
    Webcastmaker <> said:

    >> urge people to either upgrade or have them beaten to death.


    > Ditto for All the other old browsers like nn4?


    of course, especially for NS4.x as it was particularly icky poo

    --
    b r u c i e
    brucie, Jul 13, 2004
    #5
  6. Peter

    Webcastmaker Guest

    In article <>,
    says...
    > > Internet Explorer 5.5+.

    > IE5.5 is 4 years old this month. its unreasonable for people to expect
    > authors to support such old browsers and/or expect them to work/perform
    > the same or similar as newer browsers.
    > urge people to either upgrade or have them beaten to death.


    Ditto for All the other old browsers like nn4?
    --
    WebcastMaker
    The easiest and most affordable way to create
    Web casts, or put presentations on the Web.
    www.webentations.com
    Webcastmaker, Jul 13, 2004
    #6
  7. Peter

    Webcastmaker Guest

    In article <ccvelv$ed4$>,
    says...
    > > i recommend one of the gecko family of browsers or opera

    > I'm contemplating blocking IE users from my personal site.
    > Perhaps with a redirect that says "You make my dayjob a living hell."


    Yea, that'll show them....
    --
    WebcastMaker
    The easiest and most affordable way to create
    Web casts, or put presentations on the Web.
    www.webentations.com
    Webcastmaker, Jul 13, 2004
    #7
  8. Peter

    Peter Guest

    "Webcastmaker" <> schrieb im Newsbeitrag
    news:...
    > In article <ccvdm9$e68$>,
    > says...
    > > This also happens when I move the mouse over bold text. I have set up an
    > > (IE) example where the problem is clear:

    >
    > Where?


    The "example" is the code you see below that phrase, in my original message.
    It is not in any web page.

    Peter
    Peter, Jul 13, 2004
    #8
  9. Peter

    Peter Guest

    Thank you, but still that doesn't solve my problem, as I am indeed using
    Internet Explorer 6.0. My problem has little to do with which browser
    (Netscape, IE, etc.) is better.

    If you have any ideas regarding the problem, I will appreciate your
    suggestions.

    Peter

    "brucie" <> schrieb im Newsbeitrag
    news:...
    > in post: <news:ccvdm9$e68$>
    > Peter <> said:
    >
    > > Internet Explorer 5.5+.

    >
    > IE5.5 is 4 years old this month. its unreasonable for people to expect
    > authors to support such old browsers and/or expect them to work/perform
    > the same or similar as newer browsers.
    >
    > urge people to either upgrade or have them beaten to death.
    >
    > i recommend one of the gecko family of browsers or opera
    >
    > --
    > b r u c i e
    >
    >
    Peter, Jul 13, 2004
    #9
  10. Peter

    Neal Guest

    On Tue, 13 Jul 2004 01:08:16 -0300, Peter <> wrote:

    > The "example" is the code you see below that phrase, in my original
    > message.
    > It is not in any web page.


    So put it on one so we don't have to individually. You do want help, right?
    Neal, Jul 13, 2004
    #10
  11. Peter

    brucie Guest

    in post: <news:ccvni7$gc6$>
    Peter <> said:

    > I am indeed using Internet Explorer 6.0.


    a few months shy of 3 years old. upgrade or beat yourself to death.

    please don't toppost, it upsets the little voices.

    How am I supposed to post my replies in a newsgroup?:
    http://allmyfaqs.com/faq.pl?How_to_post

    --
    b r u c i e
    brucie, Jul 13, 2004
    #11
  12. Peter

    Peter Guest

    "Neal" <> schrieb im Newsbeitrag
    news:eek:...

    > So put it on one so we don't have to individually. You do want help,

    right?

    I hope that is not a question.

    Here is a place where you can look at it (with ads in the background):
    http://ircxchange.tripod.com/problem.html
    Peter, Jul 13, 2004
    #12
  13. Peter

    rf Guest

    "Peter" wrote

    > The problem is that, whenever I move the mouse to the space between the

    two
    > paragraphs, the onMouseOut handler kicks in even though I am still INSIDE
    > the <div> layer's "square".


    Go over to a reliable javascript reference (the jscript one at microsoft.com
    will do) and read up on what the onmouseout event really is. Pay particular
    attention to the fact that it bubbles.

    When you move the mouse into that blank space you are moving it out if the p
    element containing the text. This fires an onmouseout at the p element. The
    p element doesn't do anything with it so it bubbles up to the p's parent,
    the div. That is the event you are seeing.

    > This also happens when I move the mouse over bold text. I have set up an
    > (IE) example where the problem is clear:


    Same deal. When you mouse over the bold text the mouse is moving out of the
    paragraph (well not strictly so, but it is moving out of the canvas area
    under control of the p element). An onmouseout event fires on the p and
    bubbles up to the div.

    Now, when you move out of the bold element, an onmouseout event fires on the
    b element and bubbles up to the p element and subsequently to the div
    element. BTW it continues bubbling until it runs out of water, at the
    document element.

    onmouseout event handlers are quite tricky to program, for these reasons,
    especially for what you are trying to do. BTW what exactly *are* you trying
    to do?

    Work around: The event is not cancelable so returning false from a p
    elements event handler is not an option.

    You could cancel the bubbling on the event at the p level by setting
    window.event.cancelBubble to true but AFAIK this is an IE proprietory.

    An alternative is to cause your onmouseout event handler to examine the
    event (by looking inside the window.event object) to determine that it is
    *this* element that fired the event and not some child/decendant object. You
    might check window.event.srcElement.id. Try putting
    alert("out " + window.document.event.srcElement.id)
    into your event handler and have a play. Give the other elements an id as
    well. Stick a similar onMousOver event handler in there as well. You will
    soon see what is going on.

    Notice that as you move *in* to the text, from *outside* the div, you *may*
    also get an onmouseout fired on the div. This is because as you move inside
    the div you may hit its border briefly and then move inside the p. You are
    now inside the p so you should expect an onmouseout to fire at the div.
    Sometimes this will not occur. If you move fast enough the mouse may jump
    from outside the div to iside the p in one leap. It was never "inside" the
    div so you don't get an onmouseout. You will need to cater for this random
    event as well.

    See, it gets tricky. One usually ends up coding pages and pages of stuff
    before getting bored and finding a better way of doing what one wants :)

    --
    Cheers
    Richard.
    rf, Jul 13, 2004
    #13
  14. Peter

    Webcastmaker Guest

    In article <ccvn7q$gae$>,
    says...
    > > > This also happens when I move the mouse over bold text. I have set up an
    > > > (IE) example where the problem is clear:

    > > Where?

    > The "example" is the code you see below that phrase, in my original message.
    > It is not in any web page.


    Sorry, I don't have time to deal with snippits of code.
    --
    WebcastMaker
    The easiest and most affordable way to create
    Web casts, or put presentations on the Web.
    www.webentations.com
    Webcastmaker, Jul 13, 2004
    #14
  15. Peter

    Peter Guest

    Thanks for your elaborate explanation of how Javascript event handlers work
    (if I can call it that way). I never thought that event handlers could also
    be forked or "bubbled" in Javascript.

    "rf" <rf@.invalid> schrieb im Newsbeitrag
    news:eek:kKIc.91801$...
    >
    > Same deal. When you mouse over the bold text the mouse is moving out of

    the
    > paragraph (well not strictly so, but it is moving out of the canvas area
    > under control of the p element). An onmouseout event fires on the p and
    > bubbles up to the div.


    This isn't very clear, I will take your word for it. It's still not critical
    for what I want to do.
    >
    > what exactly *are* you trying to do?


    I didn't detail this as I thought it would be too complicated to explain.
    Basically, it's just about custom graphical drop-down menus and combo-boxes.
    The problem is that these pull-down menus and combo-boxes are over other
    layers. I noticed that this "onMouseOut"-problem appears only when there is
    a layer beneath the layer with the event handler and/or the background of
    the layer on top is transparent.

    In other words, if I set "background:[certain color]" as a CSS property of
    the layer that is on top --the div with the drop-down/combo boxes--, OR I
    don't have a layer beneath the d-d/c-box layer, the problem doesn't appear.
    (I hope this explanation of the problem is understandable, otherwise please
    let me know.)


    Note: I think it's possible to think this in some other way, but that other
    way generates the same problem. That is, there are individual <a> tags for
    every image that integrates the graphical d-d/c-box layers, for example:

    <div ....>....<a ...>[Submenu image 1]</a><a ....>[Submenu image 2]</a>[..]
    </div>

    That is, I am only interested in handling the 'on-mouse-out' events of those
    <a> tags, not for the <div> that contains those tags itself. That is, if the
    mouse leaves one of those <a> tags, then the event "hide the drop down menu
    layer" should kick in, provided that the mouse doesn't pass over another <a>
    tag of the group within 'n' milliseconds.

    In any case, I hope you still get to read this post.

    Regards,

    Peter
    Peter, Jul 14, 2004
    #15
  16. Peter

    rf Guest

    Peter wrote:

    > "rf" <rf@.invalid> schrieb im Newsbeitrag
    > news:eek:kKIc.91801$...


    > > what exactly *are* you trying to do?

    >
    > I didn't detail this as I thought it would be too complicated to explain.


    <snip rest of explanation>

    Yep, it's a bit confusing, especially when you use terms like "layer". I
    assume you don't mean the obsolete Netscape 4 <layer> element but rather the
    dreamweaverspeak for "positioned div element".

    However, you seem to be describing a different problem than that in your OP.
    Why not build an example showing exactly what you are doing. Better yet,
    publish it somewhere and supply the URL. If it is proprietry stuff then file
    off the serial numbers but give us enough so we can see what is happening,
    or rather what is not happenning.

    --
    Cheers
    Richard.
    rf, Jul 14, 2004
    #16
  17. Peter

    Peter Guest

    "rf" <rf@.invalid> schrieb im Newsbeitrag
    news:rT6Jc.738$...
    >
    > Peter wrote:
    >
    > > "rf" <rf@.invalid> schrieb im Newsbeitrag
    > > news:eek:kKIc.91801$...

    >
    > > > what exactly *are* you trying to do?

    > >
    > > I didn't detail this as I thought it would be too complicated to

    explain.
    >
    > <snip rest of explanation>
    >
    > Yep, it's a bit confusing, especially when you use terms like "layer". I
    > assume you don't mean the obsolete Netscape 4 <layer> element but rather

    the
    > dreamweaverspeak for "positioned div element".
    >
    > However, you seem to be describing a different problem than that in your

    OP.


    This is correct. I just discovered that the problem originated in a
    scripting error, which I already corrected. The problem is that the script
    has become so extensive that sometimes I forget what scripting "idea" I was
    following originally. So instead of remaining focused on finding the
    problem, I started to worry about things that don't really matter [given the
    problem I want to solve], such as the "bubbling" behavior of event handlers.
    Anyway, it's good to know more about it, and it will keep me from making
    certain mistakes in the future.

    Thanks again for your help.

    Peter
    Peter, Jul 15, 2004
    #17
  18. Peter

    rf Guest

    Peter wrote:>
    > "rf" <rf@.invalid> schrieb im Newsbeitrag


    > > However, you seem to be describing a different problem than that in your

    > OP.
    >
    >
    > This is correct. I just discovered that the problem originated in a
    > scripting error, which I already corrected.


    Ah, OK. Good that it is fixed.

    > The problem is that the script
    > has become so extensive that sometimes I forget what scripting "idea" I

    was
    > following originally.


    Perhaps it's time for a firmly applied KISS priniple or two :)

    > So instead of remaining focused on finding the
    > problem, I started to worry about things that don't really matter [given

    the
    > problem I want to solve], such as the "bubbling" behavior of event

    handlers.

    When presented with a large and complex problem first run around in circles
    and then charge up and fix the first thing you can see wrong. That is
    usually the thing causing the perceived errors all the way over there --->

    > Anyway, it's good to know more about it, and it will keep me from making
    > certain mistakes in the future.


    Good. Knowledge is of itself part of the fun.

    > Thanks again for your help.


    All part of the service :)

    --
    Cheers
    Richard.
    rf, Jul 15, 2004
    #18
    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. =?Utf-8?B?YzY3NjIyOA==?=

    do it in database layer or application layer

    =?Utf-8?B?YzY3NjIyOA==?=, Jan 26, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    431
    Karl Seguin [MVP]
    Jan 27, 2006
  2. et
    Replies:
    2
    Views:
    1,912
  3. dan
    Replies:
    25
    Views:
    1,334
    Uncle Bob (Robert C. Martin)
    Oct 28, 2003
  4. Universe
    Replies:
    1
    Views:
    474
    Universe
    Oct 24, 2003
  5. Dhananjay
    Replies:
    1
    Views:
    1,112
    sloan
    Dec 18, 2006
Loading...

Share This Page