CSS - z-Index problem with borders!

Discussion in 'HTML' started by ryanmhuc@yahoo.com, Aug 2, 2005.

  1. Guest

    This just seems to be in IE.

    You have two layers (DIVs). One on top of the other using z-Index. Both
    have a onMouseOver action and are positioned absolutely. If the bottom
    layer does NOT have a border the top layer onMouseOver event fires
    fine.


    <div style=" position:relative; width:100px; height:100px;">
    <DIV onMouseOver='alert("Top")' style='position:absolute; top:0px;
    left:0px; width:100px; z-Index:2; height:100px;'></DIV>
    <DIV onMouseOver='alert("Bottom")' style='position:absolute; top:0px;
    left:0px; width:100px; z-Index:1; height:100px;'></DIV>
    </div>


    But if the bottom layer has a border. When moving over the bottom
    layer's border the bottom layers onMouseOver event fires instead of the
    top layer even though the top layer should. It works as expected in
    FireFox but not IE. Anyone know how to get around this?

    <div style=" position:relative; width:100px; height:100px;">
    <DIV onMouseOver='alert("Top")' style='position:absolute; top:0px;
    left:0px; width:100px; z-Index:2; height:100px;'></DIV>
    <DIV onMouseOver='alert("Bottom")' style='position:absolute; top:0px;
    left:0px; width:100px; z-Index:1; height:100px; border:6px
    solid;'></DIV>
    </div>

    Thanks
     
    , Aug 2, 2005
    #1
    1. Advertising

  2. Neredbojias Guest

    With neither quill nor qualm, quothed:

    > This just seems to be in IE.
    >
    > You have two layers (DIVs). One on top of the other using z-Index. Both
    > have a onMouseOver action and are positioned absolutely. If the bottom
    > layer does NOT have a border the top layer onMouseOver event fires
    > fine.
    >
    >
    > <div style=" position:relative; width:100px; height:100px;">
    > <DIV onMouseOver='alert("Top")' style='position:absolute; top:0px;
    > left:0px; width:100px; z-Index:2; height:100px;'></DIV>
    > <DIV onMouseOver='alert("Bottom")' style='position:absolute; top:0px;
    > left:0px; width:100px; z-Index:1; height:100px;'></DIV>
    > </div>
    >
    >
    > But if the bottom layer has a border. When moving over the bottom
    > layer's border the bottom layers onMouseOver event fires instead of the
    > top layer even though the top layer should. It works as expected in
    > FireFox but not IE. Anyone know how to get around this?


    Put the border on the top layer.

    > Thanks
    >
    >


    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Aug 3, 2005
    #2
    1. Advertising

  3. Guest

    I can't. I need a invible layer above all borders. Anyone have an idea
    on how to get around this issue in Internet Explorer?


    Neredbojias wrote:
    > With neither quill nor qualm, quothed:
    >
    > > This just seems to be in IE.
    > >
    > > You have two layers (DIVs). One on top of the other using z-Index. Both
    > > have a onMouseOver action and are positioned absolutely. If the bottom
    > > layer does NOT have a border the top layer onMouseOver event fires
    > > fine.
    > >
    > >
    > > <div style=" position:relative; width:100px; height:100px;">
    > > <DIV onMouseOver='alert("Top")' style='position:absolute; top:0px;
    > > left:0px; width:100px; z-Index:2; height:100px;'></DIV>
    > > <DIV onMouseOver='alert("Bottom")' style='position:absolute; top:0px;
    > > left:0px; width:100px; z-Index:1; height:100px;'></DIV>
    > > </div>
    > >
    > >
    > > But if the bottom layer has a border. When moving over the bottom
    > > layer's border the bottom layers onMouseOver event fires instead of the
    > > top layer even though the top layer should. It works as expected in
    > > FireFox but not IE. Anyone know how to get around this?

    >
    > Put the border on the top layer.
    >
    > > Thanks
    > >
    > >

    >
    > --
    > Neredbojias
    > Contrary to popular belief, it is believable.
     
    , Aug 3, 2005
    #3
  4. wrote:

    > I can't. I need a invible layer above all borders. Anyone have an idea
    > on how to get around this issue in Internet Explorer?


    Make the top layer bigger.

    regards,
    --
    Robert
    http://brightonfixedodds.net
     
    Robert Frost-Bridges, Aug 3, 2005
    #4
    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. Chuck Foster

    column borders css

    Chuck Foster, Jan 19, 2006, in forum: ASP .Net
    Replies:
    1
    Views:
    365
    Patrick.O.Ige
    Jan 20, 2006
  2. TheKeith
    Replies:
    15
    Views:
    6,826
    Denise Enck
    Jun 30, 2003
  3. George
    Replies:
    9
    Views:
    4,920
    George
    Oct 25, 2004
  4. Tomasz Chmielewski

    sorting index-15, index-9, index-110 "the human way"?

    Tomasz Chmielewski, Mar 4, 2008, in forum: Perl Misc
    Replies:
    4
    Views:
    307
    Tomasz Chmielewski
    Mar 4, 2008
  5. richard
    Replies:
    4
    Views:
    157
    BootNic
    Nov 14, 2013
Loading...

Share This Page