0

So i have a page with a bunch of images. And I have a function which fades out these layers using IE's opacity filter through javascript.

Now when i fade in these elements. I have to set the particular element (which has the opacity filter applied to it) with a background image or a background color (to prevent anti-aliasing of clear type fonts, read this for more http://www.jonathancross.com/projects/Ugly_font_anti-aliasing_problem_in_Internet_Explorer_6_7_and_8.html).

Now my questions are:

  1. For a group of elements is there any better solution than a case structure for setting the background-image/background-color for each element?
  2. Some text-boxes are not seen properly and appear to merge with the overall background image set (The background layer consists of a 1x1 px image which is repeated where ever necessary)

Thanks in advance!

KARASZI István
  • 30,900
  • 8
  • 101
  • 128
Ashwin Krishnamurthy
  • 3,750
  • 3
  • 27
  • 49

3 Answers3

2

There is a trick I have used... if the background behind the text is such that you can pick a solid color that will match it within a reasonable degree, you can use the following pair of CSS rules to do faux-antialiasing on the text, in IE only:

background-color: #CCCCCC; /pick the color that matches your background/ filter:progid:DXImageTransform.Microsoft.Chroma(color='#CCCCCC'); /use the same color here/

bbogovich
  • 341
  • 1
  • 7
1

  1. You have to define the background on each element, there's no getting round that as far as I am aware. You could do this with css, something like

    .mydiv p {background:#fff}

  2. Using 1x1 px background causes repeating issues. Using 2x2 px does not.

Blowsie
  • 40,239
  • 15
  • 88
  • 108
1

I "got around" this by disabling Anti-Aliasing in IE completely by appending an Opacity filter of 1.0 on every element on the page...

Ok, so it looks nasty - but at least everything looks like (and IE6/7 is nasty anyway ^_^).

Barrie Reader
  • 10,647
  • 11
  • 71
  • 139