SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE 6 AND 7 "onmouseover" alignment problem

    Gidday gang,

    I'm currently trying to iron out some bugs in a site I'm working on, and one of them really has me stumped.

    The problem exists in both IE 6 & 7 - it does not exist in Firefox, Opera, Netscape or Safari.

    Explanation:

    (it's probably easiest to see this for yourself: Go to the page

    When a user mouses over a thumbnail, it triggers the "onmouseover" event, which changes the source of 'image380' from nothing to the (full-size) thumbnail image. The problem is that in IE, the mouseover also causes the margin-left and margin-top CSS to disappear, and the thumbnail re-aligns itself into the top-left hand corner (not centered).

    The margin-left:4px;margin-top:2px; CSS is in the thumbborder class. I've tried adding .thumbborder a:hover with the relevant margins to my css (no difference) If anyone has any suggestions I'd be really appreciative - this one really has me stumped. :-S

    Cheers,
    - JB


    HTML:

    Code:
    <a class='thumbnail' href='template.php?templateid=380'>
    <img src='images/bid_andreas02_thumb.png' class='thumbborder' border='0' onmouseover='document.images.image380.src="images/bid_andreas02_full.png"' alt='bid_andreas02' />
    <span>
    <img name='image380' src='' alt='bid_andreas02' />
    <br />
    bid_andreas02
    </span>
    </a>
    CSS:

    Code:
    .thumbborder {
    	border: solid 1px #CCC;
    	margin-left:4px;
    	margin-top:5px;
    	width:140px;
    	height:112px;
    	
    	}
    
    .thumbnail{
    position: relative;
    z-index: 0;
    }
    
    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    }
    
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: #ffffe0;
    padding: 5px;
    left: -1000px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }
    
    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 0;
    left: 60px; /*position where enlarged image should offset horizontally */
    
    }

  2. #2
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *grin*

    Hi Guys,

    I searched far & wide, but never managed to come up for an answer for this. If anyone's interested, I got around it (sort-of) with a padding call for the parent div & some IE6 CSS hacks. :-)


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
  •