2 identical versions of IE9 look different

Hi guys,

I was wondering if anyone else has ever had this issue,

I have 2 IDENTICAL versions of IE9 on different machines both are in IE9 standards mode and IE9 document mode but one of them isn’t rendering certain filter elements like drop-shadow and background gradients. Very strange, I don’t know what to do now because I worry about whether my users will have this behavior?

Is one on compatibility mode? If so that will cause the page to view like IE7. Depending on how the CSS is worked, filters will only work for certain versions of IE, and unless you account for all the versions of IE, you will have some that don’t have the dropshadows/gradients appear :).

Though we will need a site to confirm this, although that’s likely the reason for it.

Hey Ryan,
It is not in compatibility mode as far as I know but I have uninstalled and reinstalled IE9 now and it seems to have gone away.

Here is my page anyway just for you to confirm. I have deliberately left the terrible text shadow filter on to show you what I am struggling with in IE9, can you suggest an alternative to this. I am using filters for gradients, dropshadow and opacity wherever necessary because as an e-commerce business, many of our customers will have IE7,8,9.

This has been an interesting journey learning to use various CSS3 generators and using a combination of filters and CSS3 rules. I even went to the trouble of creating an SVG image background conditionally applied to IE9 to avoid the square gradient box showing through the rounded corners but I am a bit fed up of how long it takes so I would appreciate it if you could enlighten me on the text shadow issue.


Well you could always use images instead of the filters…

You also have an XML declaration above your doctype. Remove that. It causes quirks mode for IE (unrelated note) :).

Personally I’d be using images instead of filters but it’s your call.

The computer I’m on doesn’t have IE9 so I can’t test my theory.