I have two absolutely positioned divs inside a relatively positioned div which has a fixed width applied and a border. I am applying border-radius to the contained divs. When the page loads, the borders initially show unrounded, and then shift down and right a few pixels when the radius is applied. The content stays in the same place.

If I remove the border from the containing div, the contained divs' borders do not shift. In browsers other than IE, the contained divs' borders are correctly located with or without a border on the containing div.

Using 1.0 beta 3, compressed .htc.

Great - so the only reply I get is comment spam

Here's the problem:

The containing div had a border with a thickness of "medium" -



This displays in most browsers as a 3px border. For some reason this causes css3pie to shift the contained rounded borders 3px left and down.

The solution:

Specifying the border width in pixels causes no shifting:


tl;dr - use numeric values for border thickness and not "thin", "medium", or "thick."

I'm sorry no one responded, but it does help when you provide some code, the site it is being used on, or the best, an entire test case containing just the defect. For future reference.

Glad you figured out your problem though.

Well, my rolleyes was more about the spam - which was far ranging and promised to answer many unasked questions - than about the lack of response.

Should I put together a demonstration test case and submit a bug, or is not using the CSS predefined widths an adequate solution?

I don't think so.

I am happy you figured out the problem for future people who may run into the issue, but it isn't a bug, so no worries.

Pie just doesn't support it.

Actually this sounds like a legitimate bug to me. PIE should be smart enough to position things right when the parent element has a non-px border-width. If you wouldn't mind opening a ticket in GitHub that would be awesome.

My apologies for not responding promptly, I'm traveling this week so I haven't been able to check in much.