Stylesheets - display:block/none and "fixed" transparency in PNG for IE

Author

display:block/none and "fixed" transparency in PNG for IE

Sandman

2005-09-16, 7:45 pm

I'm having some problem here...

I have a javascript I've downloaded that goes through all PNG files and enables
the transparency channel in them for IE5.5+ by converting them to SPAN layers
with the image as background.

This works great until I put one of these PNG files inside a display:none block
and later sets the block to display:block - then the SPAN (that was the PNG
<img> ) remains hidden.

I've made an example page here:

http://www.sandman.net/test/png.php

If you visit that page with IE6 the middle icon will fail be show when you
press "display image", but the right one will work fine, since it is only
hidden by "visibility: hidden", and not "display: none".

Anyone have a good idea how to make the middle image appear?

--
Sandman[.net]

Mick White

2005-09-17, 4:27 am

Sandman wrote:

> I'm having some problem here...
>
> I have a javascript I've downloaded that goes through all PNG files and enables
> the transparency channel in them for IE5.5+ by converting them to SPAN layers
> with the image as background.
>
> This works great until I put one of these PNG files inside a display:none block
> and later sets the block to display:block - then the SPAN (that was the PNG
> <img> ) remains hidden.

<span> is not a block element, << Element.style.display="" >> will work
(best), or << display="inline" >> (better).
Mick
[...]

Sandman

2005-09-17, 4:27 am

In article <BBGWe.97764$Hx4.96564@twister.nyroc.rr.com>,
Mick White <mwhite13BOGUS@rochester.rr.com> wrote:

> Sandman wrote:
>
>
> <span> is not a block element, << Element.style.display="" >> will work
> (best), or << display="inline" >> (better).

Yes, but I am not setting display:block on the SPAN, I am setting it on the
containing block. It's like this:

<div style="display: none">
<img src="foo.png" />
</div>

The above, is replaced in IE5.5+ with the javascript to:

<div style="display: none">
<span style="(all the stuff that makes it transparent"></span>
</div>

When I set the display property to "block" of the containing DIV, the SPAN
stays hidden. Why?

--
Sandman[.net]

Richard Cornford

2005-09-17, 11:26 pm

Sandman wrote:
> I have a javascript I've downloaded that goes through all
> PNG files and enables the transparency channel in them for
> IE5.5+ by converting them to SPAN layers with the image
> as background.
>
> This works great until I put one of these PNG files inside a
> display:none block and later sets the block to display:block -
> then the SPAN (that was the PNG <img> ) remains hidden.
<snip>

When the script replaces the IMG with the SPAN it transfers the width
and height properties of the IMG to the CSS width and height properties
of the SPAN's style attribute. If the IMG is in a - display:none: -
block then its width and height values are both zero and those are the
values assigned to the SPAN's style. The span does become 'visible' when
the containing block is switched to - display:block; - it just doesn't
occupy any space because it has zero dimensions.

Different browsers have different attitudes towards the assignment of
values to the width and height properties of an IMG element, some always
reflect the values of the attributes in the HTML, some follow the actual
values from the image file, some dynamically reflect the current image
size (as applied through CSS). On some you can recover the original
attribute values with - getAttribute('width/height') -, but not on IE as
that is also dynamically updates them to reflect the current state of
the image.

As the problem only applies to IE I don't think you can get back to the
originally specified dimensions of the IMG while the image is
inheriting - dispaly:none; -; it is a condition that this PNG
compensating script has not taken into account. So the script needs to
be re-written. Two possibilities spring to mind:-

1. Double up the width and height assignments in custom attributes and
have the script use - getAttribute - calls to assign those values in the
SPAN's style attribute. (the result will not be valid HTML 4+/XHTML 1+)

2. Instead of creating a SPAN, create an IMG that has as it's SRC an
image that is of the same dimensions as the original (probably by
translating the original SRC into an alternative (e.g.:- imgFile.png - >
imgFile.gif) but is a transparent image, and use the Alfa filter as that
transparent IMG's background. The IMG should resort to its 'natural'
size when the container's display is switched to block.

I have not tired either.

Richard.

Sandman

2005-09-17, 11:26 pm

In article <dgh4od$q64$1$8302bc10@news.demon.co.uk>,
"Richard Cornford" <Richard@litotes.demon.co.uk> wrote:

> 1. Double up the width and height assignments in custom attributes and
> have the script use - getAttribute - calls to assign those values in the
> SPAN's style attribute. (the result will not be valid HTML 4+/XHTML 1+)

Hmm, ok. Not that validation should stand in my way here...

> 2. Instead of creating a SPAN, create an IMG that has as it's SRC an
> image that is of the same dimensions as the original (probably by
> translating the original SRC into an alternative (e.g.:- imgFile.png - >
> imgFile.gif) but is a transparent image, and use the Alfa filter as that
> transparent IMG's background. The IMG should resort to its 'natural'
> size when the container's display is switched to block.

I didn't follow really here. You want me to replace foo.png with foo.gif where
the *original* foo.gif file is of the exact same dimensions as foo.png - not
merely a 1x1 space.gif set to a specific width/height?

And do you meant that the translated <img> tag should be something like this:

<img src="space.gif" width=128" height="128" style="background-image:
url(foo.png); <enable transparency code>" />

?

--
Sandman[.net]

Sandman

2005-09-20, 4:24 am

In article <dgh4od$q64$1$8302bc10@news.demon.co.uk>,
"Richard Cornford" <Richard@litotes.demon.co.uk> wrote:

> 1. Double up the width and height assignments in custom attributes and
> have the script use - getAttribute - calls to assign those values in the
> SPAN's style attribute. (the result will not be valid HTML 4+/XHTML 1+)

This works! Thanks.

I am setting iewidth=XXX and iewidth=XXX on every PNG image, and the pngfix.js
script reads those through getAttribute.

It messes up validation, but what the hell...

> 2. Instead of creating a SPAN, create an IMG that has as it's SRC an
> image that is of the same dimensions as the original (probably by
> translating the original SRC into an alternative (e.g.:- imgFile.png - >
> imgFile.gif) but is a transparent image, and use the Alfa filter as that
> transparent IMG's background. The IMG should resort to its 'natural'
> size when the container's display is switched to block.

I could not get this to work. The width/height of the hidden <img> tag was
still 0.

--
Sandman[.net]

Richard Cornford

2005-09-21, 7:34 pm

Sandman wrote:
> Richard Cornford wrote:
<snip>
>
> I didn't follow really here. You want me to replace
> foo.png with foo.gif where the *original* foo.gif file
> is of the exact same dimensions as foo.png - not merely
> a 1x1 space.gif set to a specific width/height?

Yes, at the point at which the script acts the original width and height
attribute information has been lost as a result of having the
container - dispaly:none; -. When the container's display is switched to
block IE needs to be able to decide what size to make the now visible
image, and it can get that information from the image data, but only if
that information is in the image file.

> And do you meant that the translated <img> tag should be
> something like this:
>
> <img src="space.gif" width=128" height="128" style="
> background-image: url(foo.png); <enable transparency code>" />

No ALT attribute and mark-up in an Appendix C XHTML style in an IE
specific context? (given that IE does not understand XHTML at all - that
mark-up will be error-corrected back to 'normal' HTML by IE so it makes
more sense to omit the error and save the user's browser the trouble of
running its error-correction routines). Similar to that, but certainly
not that.

Richard.