Opacity in IE

C

chrismitchell

Guest
Has anyone managed to do this successfully? I can't get it to work at all even with the progid: DXImageTransform.Microsoft.Alpha(opacity=value) technique ...

anyone got any other suggestions?
 
Can you not just use a png and the proprietary IE png fix? I've been using it a lot lately with no issues at all.
 
Hi Chris, I think thats for i.e 8 only, i.e 6/7 would need
filter:alpha(opacity=80);
& opacity:0.8; for other browsers.

Be aware though that placing opacity on a Div for example will also effect the child elements of that, so for example it won't just be the background thats transparent but also the text.

So as harry says a 1px X 1px transparent png for the background image may be better - check out the Transparent PNG Fills Pack here: Downloads
 
Ahhh ok ... bugger :( it works fine everywhere else apart from IE8 :( I didn't really want to use an image :( bad IE8 :(

Thanks for all your input guys :) once i've figured this out i'll show you all the final product :D
 
You can easily make cross browser compatable with jquery

$(“.transparent_class”).css(“opacity”, “0.5”);

but a bit overkill to include jquery just for that, depends if your already using it.
 
I was ... but i'm not 100% on the ball with my jQuery (like where to place the code etc :)) i might have to go down the transparent image route :( as much as I don't want to do it :(
 
here's the code if you want it mate:

<!--load jquery-->
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.1");
</script>
<script type="text/javascript">
$(document).ready(function() {
$(“.transparent_class”).css(“opacity”, “0.5”);
});
</script>

if you stick it in the footer it won't slow page loading down. Alternatively in the head of the doc, upto you. That should be all you need
 
ok well i will not use that then :p I just tried it and its not working either :( must be something i'm doing :p
 
Use the 1x1px png!

Code:
element{ background:url(/images/dot.png); }

In IE6:

Code:
element{ background-image:url(/images/dot.gif); filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale', src='/images/dot.png'); }

dot.gif being a 1x1px fully transparent gif.
 
i'll give it a go Harry :) if this doesn't work i'll show you guys what i've done anyways :D :lol: maybe you'll be able to see what the problem is if the 1px doesn't work :p
 
Sorry Chris, I think it was bad quote marks. Just checked and this would work

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.1");
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.transparent').css('opacity', '0.5');
});
</script>

You would just name give the div class="transparent" - best to use the transparent png though! if you have any problems let me know!
 
nope.. neither the png or gif or jquery.. though I think I probably made a mistake somewhere LOL :p :)
 
Yeah, hate to say it but I think it's you :p

I've been using that png fix for the last two days straight lol.
 
LOL yep must be me then :p its been a long day :p

what do you think of the site by the way Harry? :)
 
Those grey boxes are transparent in safari, ff, and ie 7 Chris, the white box is solid in ie7...
 
hmmmm very weird :) well I'll have to list all the transparency problems and try to fix them next week LOL :)
 
Not sure on the use of the standard login panel slider.... (though I currently have it used on a project I started a while back)
 
Back
Top