Skip navigation
bnther
Currently Being Moderated

Opacity screws up font in IE

Feb 2, 2010 4:22 PM

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.

 

CSS:

#navBar {
    position:absolute;
    left:3px;
    top:362px;
    width:960px;
    height:37px;
    z-index:4;
    background-color:#eaeaea;
    filter:alpha(opacity=70);
    opacity:0.70;
    -moz-opacity:.70;
    font-family:Century Gothic,"Lucida Grande", "Lucida Sans", sans-serif;
    cursor:pointer;
}

 

You can see what I'm reffering to here:

hxxp://gtworkspace.com/

 
Replies
  • Currently Being Moderated
    Feb 2, 2010 4:43 PM   in reply to bnther

    Looks OK to me.  Almost exactly the same in Firefox, IE and Safari on WinXP. 

    Do you have cleartype enabled?

    http://www.microsoft.com/typography/cleartypeInfo.mspx

     

     

     

    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 3, 2010 5:43 AM   in reply to bnther

    Hi

     

    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.

     

    PZ

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 3, 2010 7:20 AM   in reply to bnther

    Hi

     

    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?

     

    PZ

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 3, 2010 10:23 AM   in reply to bnther

    bnther,

    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 -

    http://alt-web.com/Sample.html

     

     

     

    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 4, 2010 7:30 AM   in reply to bnther

    Hi

     

    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.

     

    PZ

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 4, 2010 10:02 AM   in reply to bnther

    bnther,

     

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 8, 2013 10:33 AM   in reply to bnther

    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.

     

    http://www.w3schools.com/cssref/css3_pr_opacity.asp
    http://www.w3schools.com/css/css_image_transparency.asp

     

    Conclusion: image transparency is showing promise, having separated itself from simple opacity sometime this winter season. Design accordingly.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 8, 2013 12:53 PM   in reply to Mark.Stewart

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 9, 2013 3:17 AM   in reply to Nancy O.

    Nancy O. , rgba <div style="background: rgba(255, 0, 0, 0.25);"> is cool, but...

     

    1. cross browser syntax ?
    2. cross browser text  wipout ?

     

    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

     

    1. a skin you edit with any dos text editor
    2. a file core distributing code enforcing groovy things like text wipout

     

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 9, 2013 10:09 AM   in reply to Mark.Stewart

    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. 

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points