Grow your CSS skills. Land your dream job.

another IE issue – wacky workaround

  • # June 26, 2008 at 4:48 pm

    Well, my background images are mostly alpha transparent png files on my current project – and I know I don’t have to tell anybody here about the results I get in IE 6 or below. After spending a couple of days on Google trying to find a decent solution to get them to display properly, I finally gave up and came up with a workaround of my own. I recreated my transparent png files as gifs, and pointed a second stylesheet, ie.css, to them in a conditional comment. So in FireFox, IE7, Opera, and any other browsers, the background images are png files, and in IE 6 or below, they’re gif files. The xhtml validates on my page, so I don’t think it’s a major issue, I just wanted to get you guys’ thoughts on it, and also any suggestions for getting the png transparency to play nice with IE 6 and below.

    box
    # June 26, 2008 at 6:23 pm

    read this thread.
    The pngfix.js method works pretty well.

    # June 26, 2008 at 7:11 pm

    I am having an issue currently with my sprites over a background image. They look perfect in Firefox and Safari, but they are several pixels off in IE 6 & 7. I can change a couple things and they are fine in IE, but then several pixels off in Firefox and Safari. After reading your post I was wondering how I could write my navigation code to point to a specific style sheet depending on the browser.
    This is the page:
    http://www.xywebsolutions.com/html/html/index.html

    box
    # June 26, 2008 at 7:34 pm

    You can write conditional comments that target IE only – you call the separate stylesheet that contains the changes you wish to invoke for IE only AFTER you call the main stylesheet, thus maintaining the cascade.

    Code:

    look at: http://www.quirksmode.org/css/condcom.html for more info – or search for ‘conditional comments’ and get a feel for the process.

    # June 26, 2008 at 7:46 pm

    For whatever reason, it doesn’t work for me. It fixes my header image, but not my content background or article title background. Here’s what I have so far, keeping in mind it’s far from finished – http://testingground.fropac.com/s5pconcept. I’m not sure why the workarounds I’ve tried haven’t worked, other than the conditional IE 6 and below stylesheet with the gif alternatives to the PNGs.

    To leggomymeggoes, I was going to say the same thing that box did, but obviously he beat me to it.

    pab
    # June 26, 2008 at 8:20 pm

    I’ve used this concept before

    its a great way to fix anchor issues with ie6 and png iamges but you lose on design value depending on how the png images are being used in your design

    # June 26, 2008 at 9:15 pm
    "pab" wrote:
    I’ve used this concept before

    its a great way to fix anchor issues with ie6 and png iamges but you lose on design value depending on how the png images are being used in your design

    I don’t know if it’s really costing me a lot in design value considering it’s only effecting IE6 lower. IE7 and all other browsers are going to display the PNGs properly and don’t have to display the gifs in their place.

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".