treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Opera problem with displaying

  • 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:
    <table id=\"ktoJestKim\">
    ...
    <span>Jon Doe <img src=\"/images/jon.doe.jpg\" /></span>
    ...
    </table>


    CSS:
    #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):
    $('#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?