Grow your CSS skills. Land your dream job.

Valid CSS/Transparent PNG’s in IE6

  • # October 27, 2008 at 4:51 pm

    Website: http://www.stuckpixelstudio.com/version2

    So I have a few problems with my website, and they are all in IE6.

    1) Yes…. the painful transparent PNG issue. I can usually get it to work by putting in a special iepngfix.htc file in my directory and reference it using a behavior thing in my CSS. However, using that behavior in my CSS keeps it from validating, and I’d really like to have valid CSS.

    The other option that I’ve seen is using a special javascript that supposedly lets you use transparent PNG’s. It’s the ie7-js script: http://code.google.com/p/ie7-js/

    I’ve changed my transparent png files to end with -trans.png, but the pictures are never fixed. Also, this script is limited because I can’t use it on positioned backgrounds, which is how my transparent png’s are positioned.

    Lastly, I’ve tried the Unit PNG fix. When I apply it, my images are transparent, however it screws up my positioning.

    Is there another option that will allow me to have valid css and use positioned background images using transparent png’s?

    2) I have a strange error being reported in IE. It says
    "Line: 20
    Char: 3
    Error: ‘0.offsetWidth’ is null or not an object
    Code: 0 URL: http://www.stuckpixelstudio.com/version2/"

    I looked at where it referenced but it was just part of my navigation and it doesn’t seem anything is wrong.

    Thanks.

    pab
    # October 27, 2008 at 5:41 pm

    you have to put it in a conditional stylesheet for ie for it to validate

    # October 27, 2008 at 11:29 pm
    "pab" wrote:
    you have to put it in a conditional stylesheet for ie for it to validate

    Oh….. OH!

    I’m gonna try this tomorrow. It’s so simple!

    Any ideas on my second problem?

    pab
    # October 28, 2008 at 12:16 am

    i checked, it validates strict on my side.

    # November 11, 2008 at 1:37 am

    Greets Peeps,

    Can you please say what the "conditional stylesheet" used?

    Thanks

    # November 11, 2008 at 3:04 pm

    The transparent png hack that i was using required me to put a line of code in my CSS that would keep it from validating. So, in my markup, I had to put this in:

    Code:

    Unfortunately, this needs to be on every page that has transparent PNG’s. Fortunately, I used a PHP include for my header that automatically included this in every page.

    # November 11, 2008 at 5:09 pm
    "brianatlarge" wrote:
    The transparent png hack that i was using required me to put a line of code in my CSS that would keep it from validating. So, in my markup, I had to put this in:

    Code:

    Unfortunately, this needs to be on every page that has transparent PNG’s. Fortunately, I used a PHP include for my header that automatically included this in every page.

    Instead of putting the actual CSS in the conditional comment, why not just put a link to an IE-only stylesheet? Like this:

    <!–[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="css/ie6.css" />
    <![endif]–>

    I’d also recommend using "if lte IE 6" so that the stylesheet only loads for IE6 and under. IE7 and up don’t need the PNG fix, so there’s no point in loading extra CSS that isn’t required.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".