Results 1 to 1 of 1

Thread: CSS and span tag MouseOver issue

  1. #1
    Join Date
    Feb 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS and span tag MouseOver issue

    Is this a bug in IE7?

    When you use CSS and a <span> tag for a mouse over thumbnail effect IE 7 renders in a different location.

    When you hover over the thumbnail in IE 7 compared to IE 8, the IE 7 version renders the span higher on the page then the IE 8 version does.
    IE8, Firefox, Chrome and Safari all render the span tag in the correct location. IE 7 dose not.
    CSS code:

    .thumbnail span div
    {
    position: absolute; background-color: transparent; padding: 5px; top: -260px; left: 0px; visibility: hidden; text-decoration: none;
    font-family:Arial; color: white ; font-weight: bold; font-size: 14px; text-indent: 25px; z-index: 1000;
    }

    .thumbnail span img
    { /*CSS for enlarged image*/
    border-width: 0; padding: 50px 50px 50px 50px; width: 280px; height: 280px; z-index:6000; z-index:1;
    }

    .thumbnail:hover span
    { /*CSS for enlarged image on hover*/
    visibility: visible; top: 30; left: 160px; width: 380px; height: 371px; z-index: 1000;
    background:url('../images/frame_lg.png') repeat scroll 0 0 transparent;
    /*position where enlarged image should offset horizontally */
    }
    .thumbnail:hover span div
    {
    visibility: visible; top: 0; left: 0px;
    }


    Has anyone see this or have a solution?
    Thanks for your time
    Last edited by jpollock; 02-24-2011 at 03:58 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •