Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Mouse over Area on an image. IE issue

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #22859
    bigjamdonut
    Participant

    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;
    }

    #48252

    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.

    #48291
    bigjamdonut
    Participant

    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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.