I have boxes styled like this:

.gradient_box{
behavior: url(/stylesheets/PIE.htc);
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
background-color:white;
padding:15px;
border: 1px solid #aaa;
overflow:hidden;
margin-bottom:15px;
}

With the htc applied, IE still doesnt show rounded corners. But when I hover over the box it shartly flickers and rounded corners shine through.
So they seem to be there, but not visible.

Could it be related to a gradient I'm applying to the box as well like so:

.gradient_box{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EDE8EE', endColorstr='white'); /* for IE */
background: -webkit-gradient(linear, 0% 0%, 30% 0%, from(#EDE8EE), to(white));
background: -moz-linear-gradient(left, #EDE8EE, white); /* for firefox 3.6+ */
}

Best Regards
Nico

Could be. Is there a reason you're using the gradient filter rather than letting PIE do it with linear-gradient?

Ooops. Wasn't aware PIE does that as well... I'll try that!

Well, still doesn't work....

Now there is no gradient at all in IE and when I hover over the boxes the border disappears.
On one box I saw rounded corners for a second...

I wonder if i got the syntax right:

background: -webkit-gradient(linear, 0% 0%, 30% 0%, from(#EDE8EE), to(white));
background: -moz-linear-gradient(left, #EDE8EE, white); /* for firefox 3.6+ */
-pie-background: linear-gradient(left, #EDE8EE, white);

Any advice?

Disappearing backgrounds are usually a z-index issue. Read the top section on the Known Issues documentation page and see if that helps.

Hi, there is neither a z-index set on any of the boxes parents nor on the box itself.
Would adding position:relative to the target element (the box) help? Right now it doesn't have any position css.

Nico

I had multiple problems with elements without relative positioning and PIE, so I would say yes.

But it wouldn't hurt to try it and see if it worked. I am a fan of the guess and check method.

Well, thanks for the answer, I will try then. It's just very much a pain to me to test anything IE related.
I am developing on a Mac, so I have to deploy to our staging server and reboot with Windows anytime I make an update.
It takes ages to test just simple things... I do have a virtual machine on my Mac OS but it only has IE6. And as IE6 can't
coexist with newer IE Versions I would have to add an additional virtual machine with those versions, but I don't have more windows licenses....
And even virtual machines are not ideal for testing as I still have to deploy to the web to test because my local webserver is not accessible
from within virtual machines.

Nico

Ouch I feel bad for you. I haven't began testing for IE6 yet, but I have a feeling it's going to be terrible.

But I think it will fix your problem, though I am by no mean an expert with this stuff...

Okay, so indeed, adding position:relative did help! However, not fully.
In IE 7 everything works perfect. In IE 8 first I don't see the rounded corners.
Only when hovering with the mouse over the boxes they appear.
In IE 9 it looks okay (IE 9 can render css3 rounded corners), BUT when I hover over the boxes
the 1px border disappears. At least the IE9 thing I could handle with only conditionally
including PIE, for IE7 and 8.

Any suggestions what to do about IE8, where the borders only appear after hovering over the box?
How could I fix this?

Nico