Comments on: Cool cross-browser styling with CSS and IE’s filter

By: jawance

jawance — Wed, 07 Dec 2011 02:30:55 +0000

a good view testing solution.
you do a better thing.

By: φωτοβολταικα

φωτοβολταικα — Sat, 16 Apr 2011 08:25:19 +0000

To solve the problem of fuzzy text in IE when using a filter, wrap the content of filtered element and set it’s position style to relative

By: isak

isak — Wed, 15 Sep 2010 17:29:18 +0000

I think you answered my question. It just took a bit to sink in. I was trying to make it work in IE.
Many thanks.

By: Wouter Bos

Wouter Bos — Mon, 13 Sep 2010 20:37:13 +0000

I don’t know exactly what you are referring to, but I guess you want to know how the columns of the website itself are styled.

i use this background color: “background-color: rgba(255, 255, 255, 0.8)”, the last value is an alpha value. It’s not supported by IE yet, but all other major browsers support it.

By: isak

isak — Mon, 13 Sep 2010 19:49:55 +0000

How are you placing your text on top so it stays black but your content box expands/contracts to allow more/less text?

By: Wouter Bos

Wouter Bos — Wed, 08 Sep 2010 17:44:47 +0000

That’s what happens if you use a filter. Very annoying actually, because you get different aliasing in the same page. On top of it: text rendering can get really ugly when implementing custom fonts with CSS3 font-face. But if you don’t want anti-aliasing, you could force it by applying the following filter to the body-tag:

-ms-filter: “progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffffffff, endColorstr=#ffffffff)”; /* IE8+ */
filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffffffff, endColorstr=#ffffffff); /* IE7 and lower */

This will disable the default anti-aliasing.

By: isak

isak — Tue, 07 Sep 2010 20:27:25 +0000

It seems you have figured out how to make your text appear anti-aliased on an opaque background. How???

By: fewa

fewa — Tue, 01 Jun 2010 21:18:55 +0000

@Chrissteven81: It’s just that IE doesn’t follow any standards. Usually when we develop website layouts for applications, we first make them work with Firefox, Opera, Chrome and Safari.

IE comes later if we have time, because making layouts look nice on it takes more time because of all the “IE-only” tricks it requires. After seven years into this business, I have yet to see any benefit in NOT following the standard. These IE-only things don’t provide any more possibilities than the standard ones.

However, of course we understand that many people still use IE and that’s why we have to take the time to provide support for our web applications that are being used in IE.

By: Wouter Bos

Wouter Bos — Tue, 16 Mar 2010 20:14:30 +0000

I think you have to replace background; ... ; with background: ... ;
The best thing is to auto generate such CSS3 stuff:
http://www.css3generator.com/
http://css3please.com/

By: Jabes88

Jabes88 — Tue, 16 Mar 2010 17:11:44 +0000

I’m not sure what this is .. but it contains a syntax error.
“background; -o-gradient(top, bottom,from(#cccccc),to(#888888));”
Also I’ve found another opacity solution that I’m pretty fond of. You can view it here: http://snipplr.com/view/28205/cross-browser-css-opacity/