[SOLVED] Cannot get two CSS3 behavior to work simultaneously on IE8

Cannot get two CSS3 behavior to work simultaneously on IE8

I am trying to get CSS3 behavior on IE8 using the .htc file

So there are two things that I am applying on the same element (rounded corner & gradient)

But for some reasons, I cannot get the two effects to work simultaneously: the gradient is applied, but rounded corner is not. It works if I apply the class individually (i.e. only rounded corner OR only gradient).

You can see the page at http://uiux.atwebpages.com/skeletal.html (See the Curriculum/Classes divs)

Solution

Not possible to tell without looking at your CSS code, but there's probably a syntax error in your CSS which is causing one of them to fail. To confirm this, add a property directly below the one that fails and you should see it has no effect.

Edit: this doesn't work in IE8, but it doesn't cause my CSS to break in IE8 either.

border-radius: 10px;

Microsoft also has its propriety gradient tool:

filter:progid:DXImageTransform.Microsoft.gradient(...);

But the best way to show a gradient is to draw one on photoshop, then cut the width to 1px and use that image as a background image.