SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Transparent PNG background on hover in IE6

    Hi, I'm trying to swap the background image of a div on hover. Works great in FF and IE7, and it *almost* works in IE6/5.5. I'm using a custom stylesheet for less than IE7 and I use the following code in it:

    #offset {
    width: 778px;
    height: 57px;
    text-align: right;
    background: none;
    filter: progid:dximagetransform.microsoft.alphaimageloader(src='images/offset-now-header.png', sizingmethod='none');
    }

    #offset a {
    display: block;
    width: 778px;
    height: 57px;
    background: none;
    filter: progid:dximagetransform.microsoft.alphaimageloader(src='images/offset-now-header.png', sizingmethod='none');
    }

    #offset a:hover {
    display: block;
    width: 778px;
    height: 57px;
    background: none;
    filter: progid:dximagetransform.microsoft.alphaimageloader(src='images/offset-now-header2.png', sizingmethod='none');
    }

    In IE6 or IE5.5 it is does something pretty strange. When you mouse over the image area, it does properly switch to the other image on hover, but only when you are positioned over a transparent portion of the image. Once your mouse moves to be on top of the image proper, it switches back to the regular background instead of the hover background.

    Here's the page:
    http://www.whitespark.ca/clients/cf/ (it's the mouseover on the "offset now" area.)

    Regular CSS:
    http://www.whitespark.ca/clients/cf/includes/styles.css

    IE6 or lower CSS:
    http://www.whitespark.ca/clients/cf/includes/ie6.css

    Any suggestions?

    Thanks!

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This would be due to the alphaimageloader applying the corrected image on top of the link, abscuring the actual <a> link from being clicked. A combination of positioning can get around this as outlined in this article.

  3. #3
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! That article helped! I just had to add position: relative to the link style.


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
  •