Grow your CSS skills. Land your dream job.

Mouse over Area on an image. IE issue

  • # June 30, 2008 at 7:57 am

    Hi there,

    Just wondering if anyone can help me with this.

    Basically i have an image and define areas (linkPopUp1 and linkPopUp2) so when the mouse goes over that area a pop-up appears with some text in it….

    It all works fine in firefox but with IE after some debugging i have notice that the areas i define (linkPopUp1 and linkPopUp2) for the pop-up to appear seem to go behind the image and so the mouse can never go over them.

    I have tried a few thing with the z-index value for IE to try and get the areas on top of the image but no luck…

    anyway the code is below

    Thanks in advance for any help / suggestions
    Cheers
    alexis

    xhtml
    =====

    CSS
    ===

    Code:
    .serPic
    {
    border: 0px;
    }

    a span {
    display: none;
    text-decoration: none;
    }

    #image
    {
    width: 112px;
    height: 220px;
    float: left;
    margin-left: 5%;
    }

    #linkPopUp1 a{
    margin-left: 30px;
    margin-top: -159px;
    position: absolute;
    width: 60px;
    height: 20px;
    text-decoration: none;
    }

    #linkPopUp1 a:hover span {
    display: block;
    border: 0px;
    position: absolute;
    left:30px;
    top:30px;
    width: 300px;
    background-color: #D3D3D3;
    padding: 5px;
    }

    #linkPopUp2 a{
    margin-left: 10px;
    margin-top: -133px;
    position: absolute;
    width: 95px;
    height: 20px;
    text-decoration: none;
    }

    #linkPopUp2 a:hover span {
    display: block;
    border: 0px;
    position: absolute;
    left:30px;
    top:30px;
    width: 300px;
    background-color: #D3D3D3;
    padding: 5px;
    }

    # June 30, 2008 at 4:47 pm

    Im not sure how to fix this particular problem but i have come across cases where a paragraph was physically on top of an anchor but visually no where near it and that paragraph was for some reason stacked on top in effect killing the link.
    if youre messing with positioning a lot for this situation this could be the problem. some other tag could physically be on top of it but visually be no where near it in effect "wrapping" the anchors or "covering" them.

    i was only able to fix this by applying red borders to different things since it rendered find in FF firebug and web dev tool bar were of no help.

    and btw.. i didnt look at your code but z-index only works on absolute positioning (some dont know that) and absolute positioning takes things out of the normal flow which could infact be causing your problem of another element physically covering the anchor. just a thought.

    # July 1, 2008 at 5:00 pm

    Hi there,

    Thanks for the reply.

    i am sure thats what the issues is. The area i am position over the image for some reason in IE it is render behind the image. On all other browser it’s working fine…

    I am using absolute positioning and used the z-index value to try to resolve the issue. With or without the use of z-index the problems still occurs in IE..

    If i ever do find a solution i will let you know

    thanks again
    alexis

    # July 2, 2008 at 5:11 pm

    I don’t have an answer for this, but two suggestions:

    – Try hiding elements one at a time on the page until you’re able to mouseover the area and have the popup appear. That will let you narrow it down to specifically which element is "blocking" the mouse. You can comment out each element in your HTML, or add "display: none;" to each element in your CSS.

    – IE6 has a bunch of bugs with its handling of z-index. It could be that the z-index you’ve specified IS correct for what you want to do, but IE’s ignoring it. I encountered this problem before and solved it by moving the element with the z-index to a different place in the document. It didn’t make sense semantically, but it was absolutely positioned so it still showed up in the same location, and got around the bug.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".