Grow your CSS skills. Land your dream job.

Opera problem with displaying

  • # January 11, 2010 at 12:06 pm

    Hi,
    I have problem with displaying images when the text is hovering, problem is only in Opera.
    At the site I have a table (#ktoJestKim) within some people (first and last name, sometimes an image). An image sholud be displayed when you hover somebody’s name.

    See the site: http://www.antoni.org.pl/index.php?option=com_content&view=article&id=186

    HTML-code:

    Code:

    Jon Doe

    CSS:

    Code:
    #ktoJestKim span {
    position: relative;
    }
    #ktoJestKim span:hover {
    background: #ffffcc;
    }

    #ktoJestKim span img {
    position: absolute;
    z-index: 10;
    top: -26px;
    left: 150px;
    display: none;
    width: 150px;
    background: #ddd;
    padding: 0.5em;
    border: 1px solid #333;
    }

    JavaScript code (for hovering):

    Code:
    $(‘#ktoJestKim span’).each(function(){
    $(this).children(‘img’).hide();
    $(this).hover(function(){
    $(this).children(‘img’).show();
    },function(){
    $(this).children(‘img’).hide();
    });
    });

    And problem shows when you scroll down then image shows in wrong place (too high). Each image should be displayed 26px upper than parent span. I assume this is Opera bug but have you any idea to fix this?

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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