I just recently discovered how to use opacity with CSS and while I'm getting transparency where I want it, IE does not display font correctly. Not even close! Mozilla and Safari work fine, so no problems there. But for some reason the font looks like the old lettering, back in the days when the only font color was green It's especially noticable on the 'C' in Contact.
font-family:Century Gothic,"Lucida Grande", "Lucida Sans", sans-serif;
You can see what I'm reffering to here:
Looks OK to me. Almost exactly the same in Firefox, IE and Safari on WinXP.
Do you have cleartype enabled?
Never even heard of it.
I did a quick Google on it, and it looks like Vista has that already enabled. But here's the real catch, it's only on the opacity that the font looks glitchy. If I turn the opacity off, then things look great.
I don't know if it makes a difference, but I'm using IE 7.
IE does this, but as you are using a relatively positioned div the solution will require you to rethink your coding.
The fix, (and reason why this happens) is described here - http://cookbooks.adobe.com/post_IE8_clearType_fix_when_using_filters-1 6676.html.
Thanks for the reply.
I changed to position: relative; and it didn't seem to make any difference for me. But like the article mentioned, this is a fix for IE8 and I'm using IE7. It probably would have worked just fine for IE8. Also, as Nancy O. mentioned earlier, everything looked just fine on her machine. And that's the never-ending issue; how much time do you spend trying to make something work across all browsers?
Thanks again for the link.
Sorry I could not help, the fix I found and pointed you too was for IE8 or IE8 in compatibility mode, but IE7 occasionally works with this fix, but not across all the filters, (sorry but checking all of them in all browsers, is not something I was considering, but I may just build a test page to find out).
Anyway this is what microsoft had to say about the bug in IE7 -
To ensure good readability of Text in IE, in the Release Candidate build we decided to disable ClearType on elements that use any DXTransform. We will render the text in those elements as aliased text, in order to increase readability. The rest of the text in the page will render with ClearType. This may explain why some sites (or portions of sites) will render as aliased text, rather than ClearType.
Unfortunately they decided not to fix this in the IE7 release, or the IE8 release, I find it interesting that they say it increases the readability, if so why have cleartype at all?
"if so why have cleartype at all?"
I had to chuckle on that one. It can be really interesting, if not outright frustrating, to try and stay in step with everything. It seems if it isn't the 'browser wars' then it's Apple out to kill Adobe. I just read an article last night titled "Did Steve Jobs just kill Flash?" I admire what the man has accomplished, but he's starting to turn me anti-Apple. Point in fact, I've never really cared for the fat font display of Safari.
To be honest, I've never seen a platform that caters so well to designers AND developers as Flash/AS3. It really will meet you where your strengths are at and this is exactly the kind of utlity that people like us need. I'm not sure what the real issue is with Apple, but as much as I despise the Microsoft Monster, I don't see myself buying a Mac anywhere in the near future.
Thanks again for the reply.
I typically use a semi-transparent PNG background-image instead of opacity/filters. It works in all browsers except pre-IE7. If that matters to you, do a Google search for PNG FIX.js to help older browsers correctly display PNGs with alpha transparency.
Opacity image demo -
After some experimenting yesterday, I may have found a fix, works in IE8 but have not tested in IE7, so could you let me know if it works.
For the 'hopefull' fix see my answer to this thread - http://forums.adobe.com/message/2567354#2567354.
I had debated using a semi-transparent.png for that. In retrospect, I probably should have done that from the start. It's always a balance between being profitable -- with regards to time and expanding a skill level.
My thoughts were to save time overall by being able to adjust the CSS opacity % rather than adjusting the transparency of a .png, save and reload. That was my hope anyway.
Thanks for the follow-up.
There is another solution and that is to literally create an image in Adobe's Photoshop with exactly the look of transparency that you want. Then, preload them.
Of course that takes all of the fun out of using the new css tags.
With respect to Apple versus Adobe:
You're arguing religion here. I've owned a Mac (or Mac clone) ever since Microsoft's Windows 95 destroyed all of my data on two hard drives when I tried to install it on my PC. I'm not likely to switch back, unless I'm running a version of Windows on my Mac to check for Microsoft's browser incompatibilities so I can create websites that work for all users.
I understand Jobs' frustration with Flash. One can completely design a novel user interface using Flash and Jobs doesn't want that capability on his iPhone and now, his new iPad. Jobs wants to control the experience everyone has on these new appliances. There are also, perhaps, ways one can use Flash to create malware, but I have not yet seen that happen. He describes Adobe as "lazy." I don't think I've seen too many lazy Adobe software engineers but, perhaps Jobs knows one or two.
I find Flash for video is a real winner. I don't like its use for website design and navigation because it's not accessible to people who are visually-handicapped. My sister cannot see very well and she simply cannot navigate (and increasingly cannot understand) the content of sites that primarily rely on Flash for content. There are websites that contain two sets of pages, one that is standard XHTML (and sometimes not as pretty) and one that uses all Flash for content. I think that, for accessibility, there ought to be a standard that we be required to create our content like that; Flash and non-Flash. But since designing a Flash site takes, roughly, the same amount of resources that designing one in XHTML and CSS takes, companies tend to not want to pay for two versions.
While Apple's paranoia about their user interface and user experience may be useful for the iPhone, their new tablet ought to accept the plugin. And Adobe's Flash ought to be better designed to be accessible to all users or we, as people creating content on the Internet ought to be sensitive about doing the extra work necessary to create more accessibility if we use Flash.
I have nothing against Adobe, Microsoft or Apple. And I do my best to make my websites as accessible to as many people as possible.
And I try not to argue religion in the forums.
Thanks for the reply.
It's not my intention to start a flame war on Apple. I apologize if I came across that way. Actually, my very first computer was the Apple IIe with dual-drives! I went all on that one It's amazing that my eyes aren't worse than they are considering how much I stared at the green and black picture.
I do feel a certain amount of frustration with regards to this anti-Adobe sentiment. I'm coming to the conclusion, that Steve Jobs is more focused on his ideals than the person that matters the most...the user. I really believe that it should be explained to each person considering purchasing an 'i' product, that these devices will not be able to play anything related to Flash; games, video ect. You wonder how many of these poor kids (even the grown up ones) are getting their new toy home only to realize that it won't work like they might have expected.
Shouldn't the users come first?
Just to bring everyone up-to-date! Opacity is 'not yet fixed', meaning while it is supported by all current browsers, they all (also) misbehave, transferring background opacity to foreground text. Check out the following links for some possible creative insights.
Conclusion: image transparency is showing promise, having separated itself from simple opacity sometime this winter season. Design accordingly.
Opacity has always effected contents. If you desire a semi-transparent background without effecting contents, use RGBA color values instead of the opacity property.
<div style="background: rgba(255, 0, 0, 0.25);">
This background has 25% opacity</div>
<div style="background: rgba(255, 0, 0, 0.5);">
This background has 50% opacity</div>
<div style="background: rgba(255, 0, 0, 0.75);">
This background has 75% opacity</div>
<div style="background: rgba(255, 0, 0, 1.0);">
This background has 100% opacity</div>
Nancy O. , rgba <div style="background: rgba(255, 0, 0, 0.25);"> is cool, but...
opacity: 0.50; /* Firefox ab 3 */
filter:alpha(opacity=50); /* IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha (Opacity=70); /* IE 6-8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
-moz-opacity: 0.5; /* Mozilla firefox + Netscape navigator */
-khtml-opacity: 0.5; /* Safari old + Chrome old + Chromium */
opacity: 0.5; /* Good browsers */
burb !! prog id -- bugging dw today (lol) that html file is 2 things
Also, style weighting sometimes demands image backgrounds !
So finally, hexadecimal #aaaaaa is universal - RGBA support is :
IE9+, Firefox 3+, Chrome, Safari, and Opera 10+ ( tablet and handheld ? )
and CSS3 opacity support is :
IE9+, Firefox 2+, Chrome, Safari, and Opera ( tablet and handheld ? )
... which brings us back to png transparent backgrounds
and DW's very rare transfer of PNG opacity to text
Message was edited by: Mark.Stewart to include link annotations.
I no longer concern myself with obsolete browsers like Netscape Navigator, & IE5-7. If you're so concerned with older browsers, use Conditional Comments and images. It's all just eye candy anyway.