This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Dreamweaver > February 2006 > PNG in IE
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
|
|
| wwscoper 2006-02-07, 10:56 pm |
| I am better at layout and design then coding. I am trying to add a header
element that is a png with transparency. It shows up great in Mozilla Firebox,
but is this god-aweful blue color in IE. I tried copying and pasting some code
into my page, but it didn't seem to work. I am obviously doing something wrong.
Does any know an easy fix for this? If so, I would greatly appreciate the
help!
www.mydigitalscott.com
| |
| Michael Fesser 2006-02-07, 10:56 pm |
| ..oO(wwscoper)
>I am better at layout and design then coding. I am trying to add a header
>element that is a png with transparency. It shows up great in Mozilla Firebox,
>but is this god-aweful blue color in IE.
http://www.google.com/search?q=png+ie
Micha
| |
| AdamLemmo 2006-02-07, 10:56 pm |
| dont use a .png, IE doesnt like them.
| |
| Michael Fesser 2006-02-07, 10:56 pm |
| ..oO(AdamLemmo)
>dont use a .png, IE doesnt like them.
It just requires some art of pursuasion to make IE like them ...
Micha
| |
| Donna Casey 2006-02-07, 10:59 pm |
| AdamLemmo wrote:
> dont use a .png, IE doesnt like them.
With very little effort, they work flawlessly in IE. That effort is
worth what you can do using pngs, in terms of translucency.
:D
| |
| Donna Casey 2006-02-07, 10:59 pm |
| wwscoper wrote:
> I am better at layout and design then coding. I am trying to add a header
> element that is a png with transparency. It shows up great in Mozilla Firebox,
> but is this god-aweful blue color in IE. I tried copying and pasting some code
> into my page, but it didn't seem to work. I am obviously doing something wrong.
> Does any know an easy fix for this? If so, I would greatly appreciate the
> help!
>
> www.mydigitalscott.com
>
I read this really interesting email over at the css-discuss list (from
Nick Fitzsimmons) about png transparency in both background and
foreground images....
To get PNG background images to work, I use the normal background
property in a stylesheet imported by every (supported) browser:
background: #eaf5fb url(/blue_bullet.png) 0 0 no-repeat;
and then link in an additional stylesheet via an IE conditional comment,
which applies the following rules to the same element as the above:
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/blue_bullet.png',sizingMethod='crop');
The important bit is the background-image being removed; if it's left
there, you'll get a transparent PNG with a broken PNG rendering showing
through the transparent regions. With variable transparency this might
be obvious, but if the transparency is 100% (the common case), it looks
like nothing's happened.
For inline images (<img> tags) the technique is similar, except using
yet another IE-only filter: the Alpha filter. So I have:
#imageContainer {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png',sizingMethod='crop');
}
#imageContainer img
{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
which makes the image 100% transparent, allowing the
pseudo-background-image applied to the containing element to show through.
| |
| Murray *TMM* 2006-02-07, 10:59 pm |
| That's good info, Donna!
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"Donna Casey" <infoREMOVETHIS@n2dreamweaver.com> wrote in message
news:ds02h2$ea1$1@forums.macromedia.com...
> wwscoper wrote:
>
>
> I read this really interesting email over at the css-discuss list (from
> Nick Fitzsimmons) about png transparency in both background and foreground
> images....
>
> To get PNG background images to work, I use the normal background
> property in a stylesheet imported by every (supported) browser:
>
> background: #eaf5fb url(/blue_bullet.png) 0 0 no-repeat;
>
> and then link in an additional stylesheet via an IE conditional comment,
> which applies the following rules to the same element as the above:
>
> background-image: none;
> filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/blue_bullet.png',sizingMethod='crop');
>
> The important bit is the background-image being removed; if it's left
> there, you'll get a transparent PNG with a broken PNG rendering showing
> through the transparent regions. With variable transparency this might
> be obvious, but if the transparency is 100% (the common case), it looks
> like nothing's happened.
>
> For inline images (<img> tags) the technique is similar, except using
> yet another IE-only filter: the Alpha filter. So I have:
>
> #imageContainer {
> filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png',sizingMethod='crop');
> }
>
> #imageContainer img
> {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
> }
>
> which makes the image 100% transparent, allowing the
> pseudo-background-image applied to the containing element to show through.
| |
| wwscoper 2006-02-07, 11:00 pm |
| probably a stupid question, but what goes in place of the smiley faces in your code? thanks!
| |
| Joe Makowiec 2006-02-07, 11:00 pm |
| On 03 Feb 2006 in macromedia.dreamweaver, wwscoper wrote:
> probably a stupid question, but what goes in place of the smiley
> faces in your code? thanks!
What smiley faces in whose code?
Offhand guess - you're viewing the group from the (brain-dead) web forum.
The web forum allows (encourages?) things like smileys, and translates
from text ;) (semicolon-right parenthesis) to images. (Is there a smiley
in this paragraph?)
If you're talking about Donna Casey's code, there are several instances
of ); (right parenthesis - semicolon) in it, occuring at the end of
lines. Is this where you're seeing smileys?
Suggestion: use a news client, and come over to the NNTP side of the
forum:
news://forums.macromedia.com/macromedia.dreamweaver
--
Joe Makowiec
http://makowiec.net/
Email: http://makowiec.net/email.php
| |
| Donna Casey 2006-02-07, 11:00 pm |
| wwscoper wrote:
> probably a stupid question, but what goes in place of the smiley faces in your code? thanks!
Donna
semi-colonDonna
I think :D
is a smiley face, right?
| |
|
| Hi Donna,
>For inline images (<img> tags) the technique is similar, except using
>yet another IE-only filter: the Alpha filter. So I have: --snip--
You can create a translucent or transparent effect using the Alpha filter in
both IE & Moz...
filter: alpha(opacity=80, style=0); /* only used in IE*/
OR
-moz-opacity: .80; /* only used in NN */
If you need 0 opacity set to "0"
bob
"Donna Casey" <infoREMOVETHIS@n2dreamweaver.com> wrote in message
news:ds02h2$ea1$1@forums.macromedia.com...
| wwscoper wrote:
| > I am better at layout and design then coding. I am trying to add a
header
| > element that is a png with transparency. It shows up great in Mozilla
Firebox,
| > but is this god-aweful blue color in IE. I tried copying and pasting
some code
| > into my page, but it didn't seem to work. I am obviously doing something
wrong.
| > Does any know an easy fix for this? If so, I would greatly appreciate
the
| > help!
| >
| > www.mydigitalscott.com
| >
|
|
| I read this really interesting email over at the css-discuss list (from
| Nick Fitzsimmons) about png transparency in both background and
| foreground images....
|
| To get PNG background images to work, I use the normal background
| property in a stylesheet imported by every (supported) browser:
|
| background: #eaf5fb url(/blue_bullet.png) 0 0 no-repeat;
|
| and then link in an additional stylesheet via an IE conditional comment,
| which applies the following rules to the same element as the above:
|
| background-image: none;
|
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/blue_bullet.png',sizingMethod='crop');
|
| The important bit is the background-image being removed; if it's left
| there, you'll get a transparent PNG with a broken PNG rendering showing
| through the transparent regions. With variable transparency this might
| be obvious, but if the transparency is 100% (the common case), it looks
| like nothing's happened.
|
| For inline images (<img> tags) the technique is similar, except using
| yet another IE-only filter: the Alpha filter. So I have:
|
| #imageContainer {
|
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png',sizingMethod='crop');
| }
|
| #imageContainer img
| {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
| }
|
| which makes the image 100% transparent, allowing the
| pseudo-background-image applied to the containing element to show through.
| |
| Donna Casey 2006-02-07, 11:00 pm |
| Bob wrote:
> Hi Donna,
>
>
>
>
> You can create a translucent or transparent effect using the Alpha filter in
> both IE & Moz...
>
> filter: alpha(opacity=80, style=0); /* only used in IE*/
> OR
> -moz-opacity: .80; /* only used in NN */
>
> If you need 0 opacity set to "0"
>
I'm always happy to learn new methods, but...
I like this scripted method because it doesn't require that I build
separate style rules for every different png image I want to display.
There's one rule, one blank.gif image, one .htc file and everything else
is just putting images in as usual. No special class or id need be
applied to the image or its container. If it is a png file, then it
works. Doesn't bother standards browsers. Yes, if scripting is off,
well, that might cause problems, but so would other things.
[And it's been 5+ years since anyone griped about things because their
javascript was disabled. Either I am extremely lucky or maybe scripting
being off isn't as big an issue as many would like to think. Those that
are likely to be so paranoid as to turn of javascript are probably not
displaying images, either. For whatever reason, I've just never had a
client call me up and complain about it. ]
Donna
| |
|
| All I was trying to say is IE is not the only browser that you can use
"filter" (by any other name is the same) and this can be done in Fire Fox,
Opera, and NN too!
They just call the "Alpha" channel with the word opacity but the results are
the same as in IE and using filter.
It was meant more as an FYI post.....
bob
"Donna Casey" <infoREMOVETHIS@n2dreamweaver.com> wrote in message
news:ds0uhf$ihr$1@forums.macromedia.com...
| Bob wrote:
| > Hi Donna,
| >
| >
| >>For inline images (<img> tags) the technique is similar, except using
| >>yet another IE-only filter: the Alpha filter. So I have: --snip--
| >
| >
| > You can create a translucent or transparent effect using the Alpha
filter in
| > both IE & Moz...
| >
| > filter: alpha(opacity=80, style=0); /* only used in IE*/
| > OR
| > -moz-opacity: .80; /* only used in NN */
| >
| > If you need 0 opacity set to "0"
| >
|
| I'm always happy to learn new methods, but...
|
| I like this scripted method because it doesn't require that I build
| separate style rules for every different png image I want to display.
| There's one rule, one blank.gif image, one .htc file and everything else
| is just putting images in as usual. No special class or id need be
| applied to the image or its container. If it is a png file, then it
| works. Doesn't bother standards browsers. Yes, if scripting is off,
| well, that might cause problems, but so would other things.
|
| [And it's been 5+ years since anyone griped about things because their
| javascript was disabled. Either I am extremely lucky or maybe scripting
| being off isn't as big an issue as many would like to think. Those that
| are likely to be so paranoid as to turn of javascript are probably not
| displaying images, either. For whatever reason, I've just never had a
| client call me up and complain about it. ]
|
| Donna
| |
| Michael Fesser 2006-02-07, 11:01 pm |
| ..oO(Joe Makowiec)
>If you're talking about Donna Casey's code, there are several instances
>of ); (right parenthesis - semicolon) in it, occuring at the end of
>lines. Is this where you're seeing smileys?
You could call it "funny code".
SCNR ;)
Micha
| |
| Gary White 2006-02-07, 11:01 pm |
| On Fri, 3 Feb 2006 20:01:29 -0600, "Bob" <Someone@microsoft.com> wrote:
>All I was trying to say is IE is not the only browser that you can use
>"filter" (by any other name is the same) and this can be done in Fire Fox,
>Opera, and NN too!
Using that approach, however, applies the translucency to the entire
image and doesn't just use a .png's alpha channel to make portions of it
translucent.
Gary
| |
| Donna Casey 2006-02-07, 11:02 pm |
| Gary White wrote:
> On Fri, 3 Feb 2006 20:01:29 -0600, "Bob" <Someone@microsoft.com> wrote:
>
>
>
>
> Using that approach, however, applies the translucency to the entire
> image and doesn't just use a .png's alpha channel to make portions of it
> translucent.
>
> Gary
yes, exactly. The scripted method makes the actual png work, so you get
full transparency, translucency, and opacity all at the same time.
:)
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|