Re: [OT/2] Making IE display PNG (or GIF?) with transparency
ביום שלישי 07 אוגוסט 2007, 10:20, נכתב על ידי Amos Shapira: > On 07/08/07, Yuval Hager <[EMAIL PROTECTED]> wrote: > > Try to avoid PNG transparency if you can, but if not, this one worked for > > me > > for a couple of sites: http://koivi.com/ie-png-transparency/ > > Thanks. Gadi's suggestion seems to work for me (on a real Windows XP with > IE 6). (you can try the URL I gave in my original post: > http://tinyurl.com/2chzba) > No, I can't :) > What do you suggest to use instead of transparent PNG? Give up on > transparency altogether or can you suggest something else? > The problem is with alpha transparency, not PNG transparency. GIF does not support alpha transparency, but binary transparency, which is widely supported by all modern browsers (yes, IE too..). Transparent GIF might or might not work for you. If it doesn't work, and you still need transparency, go for PNG alpha transparency with your favorite hack for IE.. --yuval pgpj0CnqAlPmE.pgp Description: PGP signature
Re: [OT/2] Making IE display PNG (or GIF?) with transparency
On 07/08/07, Yuval Hager <[EMAIL PROTECTED]> wrote: > Try to avoid PNG transparency if you can, but if not, this one worked for > me > for a couple of sites: http://koivi.com/ie-png-transparency/ Thanks. Gadi's suggestion seems to work for me (on a real Windows XP with IE 6). (you can try the URL I gave in my original post: http://tinyurl.com/2chzba) What do you suggest to use instead of transparent PNG? Give up on transparency altogether or can you suggest something else? Thanks, --Amos
Re: [OT/2] Making IE display PNG (or GIF?) with transparency
בשבת 04 אוגוסט 2007, 14:47, נכתב על ידי Amos Shapira: > Hello, > > I'm looking for a way to make IE 5.0/5.5/6 display a transparent background > on a web page. > > Sample that works on Firefox: http://preview.tinyurl.com/2chzba > > I tried all sorts of fixes I found on the net but none of them works with > IE. > > Does anyone here have experience with solving this problem? > > I know IE sucks but it's a business web site that needs to reach the widest > audience possible. > Try to avoid PNG transparency if you can, but if not, this one worked for me for a couple of sites: http://koivi.com/ie-png-transparency/ --yuval pgpyfuJP2w05j.pgp Description: PGP signature
Re: [OT/2] Making IE display PNG (or GIF?) with transparency
Ariel Bar-David wrote:
> >From my experience with those CSS stuff, it can cause a situation in
> which the text on the transparent image cannot be selected, and links
> on the transparent image don't work. To solve that problem, if you're
> making a transparent background that contains only one color, and that
> repeats itself, you must make the background tile height not more than
> 1 pixel.
>
oh actually, I think that might have been the problem that the second
bit of code I provided fixed. I remember having this problem and I
remember getting the buttons working without needing to resize the pic.
you can see the site which used all this stuff at
http://www.habonimcampsite.co.za/ - all buttons work great :) took me a
while though, was a very frustrating experience.
> I also think that this CSS code won't apply to FF (as
> far as I recall), and so you'll might have to check which browser is
> used by the client, and if it's FF, you'll only need to load the image
> (without any extra code).
>
That's exactly it, only IE will use stuff marked like _this in the CSS
code... so you don't have to have to do any checks for which browser is
being used.
Gadi
>
> --
> Ori. (^-^)
>
> - Original Message
> From: Amos Shapira <[EMAIL PROTECTED]>
> To: linux-il@cs.huji.ac.il
> Sent: Sunday, August 5, 2007 3:10:30 AM
> Subject: Re: [OT/2] Making IE display PNG (or GIF?) with transparency
>
> On 04/08/07, Gadi Cohen <[EMAIL PROTECTED]> wrote:
>
>
>
>
>
>
> I also spent alot of
> time on this issue... there are alot of solutions, but I think I
> finally found the best one. Make a CSS class like this for your object:
>
>
>
>
>
> div.transback {
>
> background:
> url('opac/black3.png'); /* and now for IE only stuff */
>
>
> _background-image: none;
>
>
> _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='opac/black3.png');
>
> }
>
>
> Thanks. At last it works!
> I added the lines above to the style for the main paragraph, like this:
> #main {
> width:20%;
> margin: 0 auto;
> padding: 20px 40px 20px 40px;
>
> border:solid 1px #555;
> background: url('75p_white.png'); /* and now for IE only stuff */
> _background-image: none;
> _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='75p_white.png');
>
> }
>
>
> And now I get the transparent background through IE 6. Unfortunately it
> doesn't seem to work for IE under Linux (using Ies4Linux) so I'm stuck with
> testing IE 6 on my wife's Windows XP.
>
>
>
> of course, you'll need
> to specify the png files here too... i guess instead of class="transback"> you could do etc instead. Most browsers will use the
> 'background' atttribute and of course can render PNG files directory.
> Explorer reads _attributes (attribute names with a _ before them), in
> reality I think it's probably meant to ignore it like most other
> browsers, but it's a good way to put stuff for explorer only in CSS.
>
>
>
>
>
> there are alot of other
> broken things in explorer which need work arounds... can't remember
> what this was for but maybe you'll need it too:
>
>
>
>
>
> body {
>
> overflow: hidden;
> /* fix/hack for position:fixed in IE */
>
> }
>
>
>
>
>
> i think it was
> related... vaguely recall something about scrolling properly with
> transparent backgrounds, but can't remember exactly.
>
>
> Thanks. At least currently with IE6, shrinking the window and scrolling the
> page seems to work perfectly. I'll keep that in mind.
>
>
> Cheers,
>
> --Amos
>
>
>
>
>
>
>
>
>
>
>
>
> Take the Internet to Go: Yahoo!Go puts the Internet in your pocket: mail,
> news, photos & more.
> http://mobile.yahoo.com/go?refer=1GNXIC
> =
> To unsubscribe, send mail to [EMAIL PROTECTED] with
> the word "unsubscribe" in the message body, e.g., run the command
> echo unsubscribe | mail [EMAIL PROTECTED]
>
--
Gadi Cohen aka Kinslayer <[EMAIL PROTECTED]> www.wastelands.net
Freelance admin/coding/design HABONIM DROR linux/fantasy enthusiast
KeyID 0x93F26EF5: 256A 1FC7 AA2B 6A8F 1D9B 6A5A 4403 F34B 93F2 6EF5
Re: [OT/2] Making IE display PNG (or GIF?) with transparency
>From my experience with those CSS stuff, it can cause a situation in
which the text on the transparent image cannot be selected, and links
on the transparent image don't work. To solve that problem, if you're
making a transparent background that contains only one color, and that
repeats itself, you must make the background tile height not more than
1 pixel.
I also think that this CSS code won't apply to FF (as
far as I recall), and so you'll might have to check which browser is
used by the client, and if it's FF, you'll only need to load the image
(without any extra code).
--
Ori. (^-^)
- Original Message
From: Amos Shapira <[EMAIL PROTECTED]>
To: linux-il@cs.huji.ac.il
Sent: Sunday, August 5, 2007 3:10:30 AM
Subject: Re: [OT/2] Making IE display PNG (or GIF?) with transparency
On 04/08/07, Gadi Cohen <[EMAIL PROTECTED]> wrote:
I also spent alot of
time on this issue... there are alot of solutions, but I think I
finally found the best one. Make a CSS class like this for your object:
div.transback {
background:
url('opac/black3.png'); /* and now for IE only stuff */
_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='opac/black3.png');
}
Thanks. At last it works!
I added the lines above to the style for the main paragraph, like this:
#main {
width:20%;
margin: 0 auto;
padding: 20px 40px 20px 40px;
border:solid 1px #555;
background: url('75p_white.png'); /* and now for IE only stuff */
_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='75p_white.png');
}
And now I get the transparent background through IE 6. Unfortunately it doesn't
seem to work for IE under Linux (using Ies4Linux) so I'm stuck with testing IE
6 on my wife's Windows XP.
of course, you'll need
to specify the png files here too... i guess instead of you could do etc instead. Most browsers will use the
'background' atttribute and of course can render PNG files directory.
Explorer reads _attributes (attribute names with a _ before them), in
reality I think it's probably meant to ignore it like most other
browsers, but it's a good way to put stuff for explorer only in CSS.
there are alot of other
broken things in explorer which need work arounds... can't remember
what this was for but maybe you'll need it too:
body {
overflow: hidden;
/* fix/hack for position:fixed in IE */
}
i think it was
related... vaguely recall something about scrolling properly with
transparent backgrounds, but can't remember exactly.
Thanks. At least currently with IE6, shrinking the window and scrolling the
page seems to work perfectly. I'll keep that in mind.
Cheers,
--Amos
Take the Internet to Go: Yahoo!Go puts the Internet in your pocket: mail, news,
photos & more.
http://mobile.yahoo.com/go?refer=1GNXIC
=
To unsubscribe, send mail to [EMAIL PROTECTED] with
the word "unsubscribe" in the message body, e.g., run the command
echo unsubscribe | mail [EMAIL PROTECTED]
Re: [OT/2] Making IE display PNG (or GIF?) with transparency
On 04/08/07, Gadi Cohen <[EMAIL PROTECTED]> wrote:
>
> I also spent alot of time on this issue... there are alot of solutions,
> but I think I finally found the best one. Make a CSS class like this for
> your object:
>
>
> div.transback {
>
> background: url('opac/black3.png'); /* and now for IE only stuff
> */
>
> _background-image: none;
> _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
> (sizingMethod='scale',src='opac/black3.png');
> }
>
Thanks. At last it works!
I added the lines above to the style for the main paragraph, like this:
#main {
width:20%;
margin: 0 auto;
padding: 20px 40px 20px 40px;
border:solid 1px #555;
background: url('75p_white.png'); /* and now for IE only stuff */
_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(sizingMethod='scale',src='75p_white.png');
}
And now I get the transparent background through IE 6. Unfortunately it
doesn't seem to work for IE under Linux (using Ies4Linux) so I'm stuck with
testing IE 6 on my wife's Windows XP.
of course, you'll need to specify the png files here too... i guess instead
> of you could do etc instead. Most browsers will use the
> 'background' atttribute and of course can render PNG files directory.
> Explorer reads _attributes (attribute names with a _ before them), in
> reality I think it's probably meant to ignore it like most other browsers,
> but it's a good way to put stuff for explorer only in CSS.
>
>
> there are alot of other broken things in explorer which need work
> arounds... can't remember what this was for but maybe you'll need it too:
>
>
> body {
>
> overflow: hidden; /* fix/hack for position:fixed in IE */
>
> }
>
>
> i think it was related... vaguely recall something about scrolling
> properly with transparent backgrounds, but can't remember exactly.
>
Thanks. At least currently with IE6, shrinking the window and scrolling the
page seems to work perfectly. I'll keep that in mind.
Cheers,
--Amos
Re: [OT/2] Making IE display PNG (or GIF?) with transparency
I also spent alot of time on this issue... there are alot of solutions,
but I think I finally found the best one. Make a CSS class like this
for your object:
div.transback {
background: url('opac/black3.png'); /* and now for IE only
stuff */
_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='opac/black3.png');
}
of course, you'll need to specify the png files here too... i guess
instead of you could do etc instead. Most browsers will use the
'background' atttribute and of course can render PNG files directory.
Explorer reads _attributes (attribute names with a _ before them), in
reality I think it's probably meant to ignore it like most other
browsers, but it's a good way to put stuff for explorer only in CSS.
there are alot of other broken things in explorer which need work
arounds... can't remember what this was for but maybe you'll need it too:
body {
overflow: hidden; /* fix/hack for position:fixed in IE */
}
i think it was related... vaguely recall something about scrolling
properly with transparent backgrounds, but can't remember exactly.
just wait till you have to debug javascript in IE, that's the real fun
part... something that works fine on every other browser fails
wordlessly in IE... and if you install their debugger, it gives you a
column and line number which has nothing to do with anything :)
Gadi
P.S. IE should displays GIF with transparency no problem. I'm assuming
you meant PNG's with opacity settings, there are other ways to make
entire opaque images transparent all at once, but I've never used it.
Amos Shapira wrote:
> Hello,
>
> I'm looking for a way to make IE 5.0/5.5/6 display a transparent
> background on a web page.
>
> Sample that works on Firefox: http://preview.tinyurl.com/2chzba
>
>
> I tried all sorts of fixes I found on the net but none of them works
> with IE.
>
> Does anyone here have experience with solving this problem?
>
> I know IE sucks but it's a business web site that needs to reach the
> widest audience possible.
>
> Thanks,
>
> --Amos
>
--
Gadi Cohen aka Kinslayer <[EMAIL PROTECTED]> www.wastelands.net
Freelance admin/coding/design HABONIM DROR linux/fantasy enthusiast
KeyID 0x93F26EF5: 256A 1FC7 AA2B 6A8F 1D9B 6A5A 4403 F34B 93F2 6EF5
