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.
- Friends
-
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? -
- CommentAuthorMichaelWRitchie
- CommentTimeJul 7th 2006
.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;
} -
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.
-
the second of michael dont workds in ie !! the second its for .gigs... PLEASE A REAL EXAMPLE IN CSS
-
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 -
- CommentAuthorchris.garrett
- CommentTimeJul 11th 2006
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 . -
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) -
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.. -
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. -
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>
;) -
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.
1 to 11 of 11