Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

  1.  permalink
    Hi Does anybody knows any method to fix png problem in IE6 which actually works.
    There are several of them out there but I need the one that can applied to the
    div or class that contains background image.
    example:
    .frame {
    padding:30px;
    background: url('../images/frame.png') no-repeat 4px center;
    }

    Cheers, DS
  2.  permalink
    Hi,

    I have used the AlphaImageLoader Filter in the past.

    This one will stretch the background image to the size of the element:
    .frame {
    background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/frame.png', sizingMethod='scale');
    }


    This one will maintain the actual size of background image:
    .frame {
    background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/frame.png', sizingMethod='image');
    }


    I'm not sure about positioning the background image - you'd have to play around with it. Also, the CSS does no validate.
    •  
      CommentAuthorTetsuo
    • CommentTimeFeb 19th 2008 edited
     permalink
    The best fix I know of is:
    http://24ways.org/2007/supersleight-transparent-png-in-ie6

    This uses Javascript to apply the same method as above but without having to use CSS. It can also be used for background images and customised for background types if you alter the source, although works best for standard PNG's.
    •  
      CommentAuthorJJenZz
    • CommentTimeFeb 22nd 2008 edited
     permalink

    Also, the CSS does no validate.

    Indeed, however... If you put the CSS into an ie.css stylesheet and use conditional comments to reference it, then the validator will ignore that stylesheet as the validator is not IE. Therefore, your CSS will appear valid :)

    example:
    http://www.growldesign.co.uk/iecc/index.html

    Validation:
    http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.growldesign.co.uk%2Fiecc%2Findex.html&warning=1&profile=css21&usermedium=all
Add your comments
    Username Password
  • Format comments as (Help)