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.

    • CommentAuthorkonitz
    • CommentTimeJul 7th 2006
     permalink
    hi i try to insert a png in ie... one method works with the image in the html with a .js with img pictures like this:
    <img src='img/ds_logo.png'/> ok fine!!!!!! BUT i need use in the CSS with background: (img/ds_logo.png); ... anybody have effective technique!!! png in the css... that works in ie 5.0 5.5 and course 6... the shity new of ie7 support png.

    thanks a lot ! anybody with a good technique for this?
  1.  permalink
    .png
    {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png',sizingMethod='scale');
    width:100px;
    height:100px;
    }
    html>body .png
    {
    background:url(test.png) no-repeat left top;
    }
    •  
      CommentAuthornifkin
    • CommentTimeJul 8th 2006
     permalink
    Drew McLellan has a JS based solution that I've used in a number of places recently, and has always worked just peachy for me.
    • CommentAuthorkonitz
    • CommentTimeJul 10th 2006
     permalink
    the second of michael dont workds in ie !! the second its for .gigs... PLEASE A REAL EXAMPLE IN CSS
    • CommentAuthorkonitz
    • CommentTimeJul 10th 2006
     permalink
    fuck microshit dont works nathing!!!!! any KNOW A REAL THING!!!!!!! the png works with a external CSS???

    this example exist in all major sites and dont works!! ANY SERIOUS PERSON THAT KNOW A REAL EXAMPLE

    the html ---------------
    <div class="png"></div>

    the css -----------------
    .png {
    width: 100%;
    height: 127px;
    background-image:url(../img/logo.png);
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='(../img/logo.png');
    _background-image:none;
    }

    THANKS
  2.  permalink
    I'm gradually being brought round to the notion that IE7 will support PNG's, once it's out of Beta why should we waste development time trying to appease users of an outdated browser. Bryan Veloso talked about this concept in his latest ep. of http://livefromthe101.com .
    •  
      CommentAuthorfake
    • CommentTimeJul 11th 2006
     permalink
    can't you serve pngs to everyone that can read them, but serve gifs to those 'lt IE 7' in conditional comments?

    In the past, I've managed to make decent hacks using a special style sheet for IE which only linked gifs that act visually like their png counterparts. You can predict how a repeating texture will show up if the background is aligned in the center of the area rather than on the side. So a print screen of the region from Firefox saved as a gif might do the trick for you as it did for me. (http://www.themusictank.com -- the grass under the site logo is the body's background if you can load pngs, otherwise it's a gif)
    • CommentAuthorneXus
    • CommentTimeJul 12th 2006 edited
     permalink
    Taken from My site:
    Html:
    <div class="alert"></div>

    Default Style for all browers (define height and width as .png height/width):
    .alert{position:relative; height:100px; width:100px; border:1px solid #FFCC00; background:url(images/orange_tr.png); }

    IE Only style:
    *html .alert{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/orange_tr.png', sizingMethod='scale'); }

    place both styles in style sheet (or place second one in an IE only style sheet so main style sheet will validate)

    and that'll do it for you..
    •  
      CommentAuthorpremii
    • CommentTimeJul 12th 2006
     permalink
    IMO, this is the best solution

    DIV#PNG {
    width: 100%;
    height: 127px;
    background-image:url(../img/logo.png);
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://localhost/img/logo.png', sizingMethod='crop');
    _background-image:none;
    }

    IE6 will use activeX for PNG, and IE7 & other browsers will use png background image.

    AlphaImageLoader loader has its own problem. If this DIV(id=png) contains link or button, it won't be clickable.
    • CommentAuthorneXus
    • CommentTimeJul 12th 2006 edited
     permalink
    links and buttons are clickable if they are absolutly positioned inside the relativly positioned element

    a {position:absolute;}

    .alert{
    position:relative;
    height:100px;
    width:100px;
    border:1px solid #FFCC00;
    background:url(images/orange_tr.png);
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/orange_tr.png', sizingMethod='scale');
    _background-image:none;
    }
    <div class="alert"><a href="#" >click me</a></div>

    ;)
    • CommentAuthorxbing
    • CommentTimeJul 14th 2006
     permalink
    I wrote an article on this proble a while back - read here: http://www.sodhi.org/ee/index.php/v6/comment/png_image_with_alpha_shadow_on_internet_explorer_55/

    Hope this helps.
Add your comments
    Username Password
  • Format comments as (Help)