Problem with anchor for a transparent .png in IE

Discussion in 'HTML & Website Design' started by Philopoemen, Dec 13, 2007.

0
  1. #1
    Hi all,

    Recently I have developed a website for one of my clients.
    It is located here.

    The problem is the following:
    On every page, on the right, I have the "online reservations" button. It is a transparent png(24) graphic. Through CSS I load the image as a background (because of the IE png transparency problem).
    Because it has to be a link, i inserted in that block, over the background, a transparent 1px .gif, with the sizes 161x400... Obviously that in Opera and FF everything works just fine, however, in IE (6.0) there is the following bug:

    The part of the background has an anchor only where it is 100% transparent... I mean, the button itself is not clickable, but the area around it is. This probably doesn't make any sense, so you have to see it in order to fully understand.

    How do I correct this bug? Leaving out IE users is not an option ;)
     
    Philopoemen, Dec 13, 2007 IP
  2. Philopoemen

    Philopoemen Peon

    Messages:
    704
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Anyone? I really tried everything... and I can't change the way the button is shown. :(
     
    Philopoemen, Dec 14, 2007 IP
  3. Philopoemen

    Philopoemen Peon

    Messages:
    704
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hooray! I found a fix!
    For the record: this fix has been submitted by Holger Ruprich (indesigns(dot)de) for koivi(dot)com.

    All you have to do is give the anchor a relative position, like this:
    a {position: relative;}
    and the anchors on top of a transparent .png in IE 6 will become clickable again :)
     
    Philopoemen, Dec 14, 2007 IP