Semi transparency in IE?

[KevinUK]

Hi, I'm trying to get this grey block to be semi transparent, I can get it working in FireFox if I use .png but in IE it isnt transparent. I tried .gif and .jpg but that gave me full transparency...

Is there a way of getting semi transparency working in IE? I cant make the page an image as the text may change fairly often.

http://www.kevinuk.co.uk/wmac_new/content/content.php?id=7 (The site isnt complete yet )

Any ideas how to get it to work?

Thanks, Kevin

 

[Jonty]

Hi KevinUK

Unfortunately IE currently only supports full transparency or nothing. Semi-transparency, or alpha-transparency, is usually available in PNGs (JPEGs don't support transparency, GIFs only support full transparency) but IE's implementation isn't working correctly at present.

There is, however, a simple enough work around detailed over on WebFX which may be suitable in certain instances. Alternatively if the background on which the PNG is to be shown is one solid colour, just shout as there is another more elegant way of doing things.

Kind Regards

Jonty

P.S. Internet Explorer 7, currently being developed, has fixed this issue.

 

[KevinUK]

Thanks for the link but that seems to just work if the transparency you want is of a fixed size? I tried fiddling with it to work as a background image for a table but dont think it was designed to do that.

Maybe I'll use one of my other designs that I didnt like as much.

Its annoying as even when IE7 is out, how many millions will still be on 5.5 or something heh.

 

[Jonty]

Sorry, KevinUK, I think I may have misread your post before, are you trying to make a <div>/<table>/<p> or other such element semi-transparent? If so just add the following CSS code to whatever elements you wish to modify:

opacity:0.5;
-moz-opacity:0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);

If you're adding the style inline, the code may look like:

<div id="mydivname" style="opacity:0.5; -moz-opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);">Content</div>

Or if you're styling the 'mydivname' element via an external stylesheet etc.:

#mydivname
{
  opacity:0.5;
  -moz-opacity:0.5;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}

Five things to note ...

• Firstly, this makes the element the style is applied to and all child elements within translucent (to prevent child elements from being translucent try styling them but with 1.0/100 opacity (I'm not sure if this works, though).
• Secondly, you don't need semi-transparent background images of any kind.
• Thirdly, the 'opacity' (official property used in CSS3) and '-moz-opacity' property (Mozilla specific) use a scale of 0-1, with 0.5 being semi-transparent, whereas the Microsoft code uses a scale of 0-100, with 50 being semi-transparent.
• Fourthly, this doesn't work in the Opera web browser last I checked.
• Finally, the Mozilla, but more specifically the Microsoft, code will prevent your CSS from validating (if you're concerned with that?).

If I've misread again, my apologies, just ignore this; if not, I hope it helps.

Kind Regards

Jonty

P.S. Good point about IE, there are still many times more users of IE5 than there are every Mozilla and non-IE users combined. That said, if IE7 comes with SP3, Microsoft managed to get 100 million SP2 updates in a matter of months, so potentially that's 100 million+ IE7-capable users in a matter of months when SP3 is released later this year/early next year (presuming, as is likly, it will feature IE7).

 

[SheepCow]

Can someone else visit
http://boneill.ninjagrapefruit.com/wp-content/bbc/newmaps/

In IE and confirm that the markers are semi-transparent? They are just pngs ...

 

[Jonty]

Hey SheepCow

That's a very impressive demo Sadly it makes IE hang on the system I'm on, but I think the markers may be transparent, so I'm not sure how it's accomplished. There's a fair bit of scripting and XML going on, so perhaps the answer is buried in there. Still, nice find

Kind Regards

 

[KevinUK]

Cheers Jonty, I'll give it a try

SheepCow, crashes for me in IE too. Works in FireFox, nice shadow when you click a marker.

 

[SheepCow]

I wrote it

Aha, IE didn't like the PNGs, the page now detects IE and doesn't use a png with alpha if you're in IE.

 

[Jonty]

Wow, well done SheepCow/Ben, really impressive

*bumps reputation*

hehe

Kind Regards

 

[Teren]

That's amazing

 

[MKJ]

Hi

Not sure if this is any help but here:

Semi transparent block.

You can take this a step further without too much difficulty. The demo above will show everything in the block to the settings you make on translucency and that includes any text you have added but I can see a way around this. If you make a transparent png image with your text on that you can put that over the semi transparent block (all text removed) by using a another div. That I think will do the job. Just view source to see the coding. Not my work but I have dabbled in this before so knew where to go for more info.

MKJ