How to work with PNG formats with Cross Browser Compatibility

Discussion in 'CSS' started by clobberx, Jun 13, 2008.

0
  1. #1
    can u please guide how to do with css
     
    clobberx, Jun 13, 2008 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Simple. Don't use alpha transparancy, and remember that IE applies extra gamma correction to .png for no apparant reason. (or is it that it applies correction to everything BUT .png - I can never keep that straight)

    So long as when you use .png you use all .png where color matching counts, and only use palette transparancy instead of alpha, your completely safe.

    ... and frankly if you are using alpha, you are probably bloating out your page for some goof assed effect that could be just as easily pre-composited using files a fifth the size.
     
    deathshadow, Jun 13, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I use a goof-assed effect here for menu items, which I like, but did give it try with the checkerboard gif black/transparency trick back when IE6 was an issue with this one, and it never quite looked as good (made it harder to read the text).

    This is proper use of a goof assed effect with PNG?

    (ps say nothing about the size of the header, all links plan to skip direct to the h2 anyway)
     
    Stomme poes, Jun 13, 2008 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    I think we discussed that once. I'd have precomposited the "greyed out" areas onto the image as a normal jpg, lined up the menu items on them with them having no background, then set a background on the hover state... Though given the image and alignment seem to load in radically different sizes from browser to browser I'm not 100% sure.

    Either way the page is made of /fail/ because it's over 600 pixels from the top before you even get to CONTENT on the page. Excellent example of too much graphic yet not enough graphics - or as I call it 'banner splash' - a banner so big it's effectively a splash page.

    ... and we know how splash pages are a BAD thing, right?
     
    deathshadow, Jun 13, 2008 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Normally, except it was wanted, so I stuck a skip in there. The dog placeholder is neither static nor positioned relative to the menu-- so any jpg's would need to go on the ul itself. To have the image show through then, the ul would have to have lower opacity. Which meant I'd have to dick with moving the menu over a box with the opacity and images instead.
    Yes, flex width and centered means the left side is not in the same place between 600x800 montiors compared to my 14000px screen.
     
    Stomme poes, Jun 13, 2008 IP