Ok, yes, I admit I'm having a problem with opacity. You can view it at the website in my sig. I want the text to not be opaque. How can I do that?
EDIT: Woops, figured it out before you guys got to it!
EDIT 2: New problems.
Last edited by coreymanshack on Sat Aug 11, 2007 10:14 am; edited 1 time in total
I did some messing around and it looks like the opacity settings in the transparent div are messing the bodytext div.
A simple solution is to erase the
| Code: |
filter: alpha(opacity=50);
-moz-opacity: .50;
opacity: .50; |
(It is still not fully supported anyway)
And use a 50% transparent gif pixl for you bg image. | Handyman wrote: |
I did some messing around and it looks like the opacity settings in the transparent div are messing the bodytext div.
A simple solution is to erase the
| Code: | filter: alpha(opacity=50);
-moz-opacity: .50;
opacity: .50; |
(It is still not fully supported anyway)
And use a 50% transparent gif pixl for you bg image. |
Good idea, I was leaning towards that, but code is always easier to download than an image.i would suggest using a png picture though. anyways i hpe u got it figure it out.
I actually resorted to using a png, come to find out ie<6 doesn't support this type of png, anyone know a workaround (besides the half dotted half transparented gif)?
You could always just use the .png and use a conditional comment to serve up an alternate image for IE6.
Or not. Depends on what you need and why. Just a thought.
| riv_ wrote: |
You could always just use the .png and use a conditional comment to serve up an alternate image for IE6.
Or not. Depends on what you need and why. Just a thought. |
that's code i dont want to write, i just want a standard that all browsers support that will work with my situation.Sorry.. i'm quite newb..
why do you need to use PNG ?
| clydejaw wrote: |
Sorry.. i'm quite newb..
why do you need to use PNG ? |
it's the only format that supports transparent colored pixels | coreymanshack wrote: |
| I actually resorted to using a png, come to find out ie<6 doesn't support this type of png, anyone know a workaround (besides the half dotted half transparented gif)? |
| riv_ wrote: |
You could always just use the .png and use a conditional comment to serve up an alternate image for IE6.
Or not. Depends on what you need and why. Just a thought. |
Another way to get the benefit of transparency with png images would be to use the IE PNG Alpha Fix by Angus Turnbull, found here http://www.twinhelix.com, to get the png graphics to display in IE6. You can use conditional comment to hide the fix from newer browsers of course.
Unfortunately the fix won't work on IE5 for either the mac or the PC, and the small-scale testing I've done with it seems to suggest the support for pngs used as css background images is patchy to say the least, but in this case that wouldn't be a problem!
So depending on your target audience, it might be worth tacking the fix onto your pages - I didn't end up using it myself on the site I was doing at the time, as the target demographic used IE5, but it might work out okay for yours?
Hope this helps,
Cheers,
fuzzy | Fuzzy-Duck wrote: |
| coreymanshack wrote: | | I actually resorted to using a png, come to find out ie<6 doesn't support this type of png, anyone know a workaround (besides the half dotted half transparented gif)? |
| riv_ wrote: | You could always just use the .png and use a conditional comment to serve up an alternate image for IE6.
Or not. Depends on what you need and why. Just a thought. |
Another way to get the benefit of transparency with png images would be to use the IE PNG Alpha Fix by Angus Turnbull, found here http://www.twinhelix.com, to get the png graphics to display in IE6. You can use conditional comment to hide the fix from newer browsers of course.
Unfortunately the fix won't work on IE5 for either the mac or the PC, and the small-scale testing I've done with it seems to suggest the support for pngs used as css background images is patchy to say the least, but in this case that wouldn't be a problem!
So depending on your target audience, it might be worth tacking the fix onto your pages - I didn't end up using it myself on the site I was doing at the time, as the target demographic used IE5, but it might work out okay for yours?
Hope this helps,
Cheers,
fuzzy |
This is exactly what I was looking for, BUT (there always has to be a but) This puts nonstandard ccs on my page rendering it non xhtml 1.0 strict, correct? | Quote: |
| This puts nonstandard ccs on my page rendering it non xhtml 1.0 strict, correct? |
Absolutely. Lots of ugly, non-semantic, non-compliant code.
You're going to have to make a compromise somewhere. Just a matter of deciding what your style is, and which is the lesser of evils. | riv_ wrote: |
| Quote: | | This puts nonstandard ccs on my page rendering it non xhtml 1.0 strict, correct? |
Absolutely. Lots of ugly, non-semantic, non-compliant code.
You're going to have to make a compromise somewhere. Just a matter of deciding what your style is, and which is the lesser of evils. |
Guess I'll just have to tell ie6- users that their browsers suck and they need to upgrade 
Sounds like fun!
Resist temptation... there's always a workable compromise! 
| Quote: |
| This puts nonstandard ccs on my page rendering it non xhtml 1.0 strict, correct? |
This also put nonstandard css on your page:
| Quote: |
filter: alpha(opacity=50);
-moz-opacity: .50;
opacity: .50; |
I was trying today to change code for my new site. I am copy/paste code from W3C and get several errors. Then I was check their site (page where is opacity) and they got error. You cannot get OK validation if you use transparency with css. I am report this bug. 
Sonam | sonam wrote: |
| Quote: | | This puts nonstandard ccs on my page rendering it non xhtml 1.0 strict, correct? |
This also put nonstandard css on your page:
| Quote: | filter: alpha(opacity=50);
-moz-opacity: .50;
opacity: .50; |
I was trying today to change code for my new site. I am copy/paste code from W3C and get several errors. Then I was check their site (page where is opacity) and they got error. You cannot get OK validation if you use transparency with css. I am report this bug.
Sonam |
yea i knew about the filter: alpha opacity making it nonstandard css, that's why i'm trying to use a png for transparencyPNG's DO work on IE;
Well, almost 
Since 5.5 there is a way to display 16bit transparency PNG's.
take a look at http://bluevd.frih.net/template_treegen.php
The three images that you see up there are png's with transparency.
And they do work on IE 5.5 to 6;
Anyway, here's some JS you might want to use to make them work on ie:
| Code: |
function initialTransparency(img){
if(document.body.filters){
img.style.width=img.offsetWidth+"px";
img.style.height=img.offsetHeight+"px";
img.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img.src+"',sizingMethod='scale');"
img.src="blank.gif";
}
} |
All you need now is a tansparent GIF file (blank.gif) and make sure you got the path to it right in the script.
Now... To explain the trick:
Since IE 5.5, MS introduced a new filter AlphaImageLoader; This filter can load PNG's with transparency and display them properly. THe only problem is that it displays it somewhat as a background. Hence: the blank.gif.
The script above will replace the image with a blank gif, and use the png as background.
And now, to use the script: | Code: |
<img src="some_png_file.png" onload="javascript:initialTransparency(this);"> |
Cheers!
PS: the example I gave is a bit more complex and is part of my WDK. It uses rollover effects for the png's and most likely, it will be hell to understand the code. I sugest you start with the function I gave you Oh, and in case you want to convert pngs without having to write the onload event to each one of them (or you need the event for something else) you can use this:
| Code: |
function fixTransparency(){
imgArray=document.body.getElementsByTagName("IMG");
for(i=0;i<imgArray.length;i++){
if(imgArray[i].src.search(".png")!=-1){
initialTransparency(imgArray[i]);
}
}
delete imgArray;
} |
Cheers! why not use the png and code it so that in IE you will use the alpha:filter and in any other browser you will use the png?
that should work, and is a very easy workaround
| alalex wrote: |
why not use the png and code it so that in IE you will use the alpha:filter and in any other browser you will use the png?
that should work, and is a very easy workaround |
because the alpha filter is invalid css, even though they still wont see it at w3c validation services i still don't like to use invlalid css.what is the -moz-opacity for? Is that specific to mozilla firefox or is it just a property name that seems close to mozilla? I see that if I do opacity without it, that IE does not recognize my opacity rollover.
Thanks,
| taitj wrote: |
what is the -moz-opacity for? Is that specific to mozilla firefox or is it just a property name that seems close to mozilla? I see that if I do opacity without it, that IE does not recognize my opacity rollover.
Thanks, |
It is specific to mozilla firefox, you must be doing something wrong for IE to not recognize your opacity rollover.
