CSS Gradients in Ie7 & Ie8 Is Causing Text to Become Aliased

Text doesn't anti-alias on transparent background in IE7/8

Yes: don't use -ms-filter and filter:progid:DXImageTransform etc.

There's a bug in the implementation of the filters causing it to use the fallback text renderer. The only way to make it consistent is to either don't use it when text is involved, or use it on all text (so that all text is equally ugly and pixelated).

What I usually do is, i use only standard css for transparency such as rgba() colors, opacity etc. And in the IE-specific css I set the background/text color to an approximate match to how it would look whith real transparency.

And for images I create an IE-specific copy of the image sprite that are transparent. But transparent png's will cause the same problems in ie7 and older, so I usually fall back to full opacity (i.e. not transparent) in ie7.css

Floating text inside ul with Chrome, IE7 and IE8

If you don't have to use position relative, you can make both divs inline-block, and instead of left, use padding-left.

Here's an example: http://jsfiddle.net/bQthE/3/

How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

This works, although it's extra markup.

<div id="box_that_wants_a_gradient">
    <div class="gradient_background_1"></div>
    <div class="gradient_background_2"></div>

My content

</div>

There is a bonus to this tactic, as you can add multiple gradient boxes and set their heights/widths as a % of the parent, thus emulating the "colour stop" behaviour allowed in safari/moz.

For example:

<style>

#box_that_wants_a_gradient {
  position:relative;
  display:block;
  height:100px;
  width:100px}

.gradient_background_1 {
  position:absolute;
  height:20%;
  *cbf writing out microsoft filter code*;
  top:0;
  width:100%;
  left:0px}

.gradient_background_2 {
  position:absolute;
  height:80%;
  *still cbf writing out microsoft filter code*;
  top:20%;
  width:100%;
  left:0px}

</style>

ie problem with fading in text

Its an anti aliasing problem that IE has with opacity or the alpha filter i think. Possible fixes:

http://forum.jquery.com/topic/jquery-prevent-jagged-text-in-ie

http://hurtsmybrains.wordpress.com/2010/01/21/jquery-fadein-fadeout-cleartype/

http://www.kevinleary.net/jquery-fadein-fadeout-problems-in-internet-explorer/

white background problem in IE

If you use the Developer Tools in IE8 (Keyboard shortcut F12) and inspect the element with the white background you will notice the following inline style applied to the element:

<div class="slide" style="z-index: 5; position: absolute; background-color: #ffffff; zoom: 1; display: block; top: 0px; left: 0px;" cycleH="277" cycleW="500" jQuery1285163831375="11">

What is generating the HTML for you? I assume it's JQuery UI?

---

Related Topics