Treehouse: Grow your CSS skills. Land your dream job. kills anchors?

  • # May 1, 2008 at 11:05 pm

    So my navigation is in my header, my header has a transparent png for the background so i applied the


    to the header and by fixing that for ie6, it also kills my anchor elements in ie6 only.

    my nav works fine in all other browsers.

    so one fix in ie6 breaks something else.

    anybody know how to fix this?

    i was thinking of just using a javascript sniffer to see whos on ie6 then using the lightbox script to give a pop up to my affiliate link to FF and demanding that they quit making our lives miserable.

    Sound good?

    # May 2, 2008 at 12:51 am

    Little update.

    the "best png ie6 fix" listed above does in fact render anchors useless. whats extremely annoying is you cant put them inside something using that as well.

    i had to move my nav outside of the header, not semantic since it appears in the header, and had to create the same navigation image I’m using as a gif and lose the drop shadow to make it work.

    # May 2, 2008 at 5:15 am

    Is it actually killing the anchors? Or are they just not showing the usual ‘hand’ cursor? If its the latter, then add…

    a{cursor:pointer;} to your ie6 css.
    # May 4, 2008 at 12:56 am

    What i found out is the filter that windows applies to make pngs work is layed on top of the item you’re making transparent. so technically the clickable anchor is there, its just under it and you cant get to it. So i guess "killing it" is the wrong way to say it, but it definitely renders them useless.


    if you need transparent png’s to act as any kind of navigation or links, you cant use the work around. What I’m having to do is create either gifs or jpegs and line them up perfectly and having them only available to ie6. everything else sees the pngs.

    # May 4, 2008 at 10:29 am

    Yeah it’s kind of a "known issue" that the HTC method for forcing alpha transparancy in PNGs in IE6 can sometimes "kill" links. It is usually recommended that that fix is never used for somewhere of vital importance (navigation) and never used somewhere like an entire background image. I think it’s more for spot-fixes.

    # May 4, 2008 at 1:32 pm

    ah. ok well that helps, i didnt know that stuff.

    is there a png fix that is a little more "all encompassing"?

    # May 6, 2008 at 1:50 pm

    Not really, that’s about as best as you can do. The real solution is just to design in such a way you don’t need to rely on alpha transparency, or, just say screw it to IE 6.

    # May 6, 2008 at 2:51 pm

    That’s what i usually do. I pretty much called off using png’s except when i could care less about IE6 like on my personal site. i want it to be ugly in ie6 lol


    the new probem is i just started a new job and i did a few freelance projects with them before i started with them. the design department knows very little about web design are strictly print and advertising designers and they keep designing things here and there that make my life hell when its time to slice them up. so thats my problem. if i was designing it i know how to work around the problem in the mock up so i dont have to use png’s.

    hope that made sense

    and thats very lame we’re still dealing with this..

    # August 27, 2009 at 5:13 am

    You can find 100% working and tested iepngfix at

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.