0

I'm using CSS3PIE to apply some rounded corners to elements in Internet Explorer that will get them by stylesheet in other browsers. I've run into some issues with it though.

In IE8, I discovered that any element that had the PIE behaviour would behave strangely. The container would jump a few pixels to the right, but the content would stay in its original position, giving the appearance that the content had all shifted left relative to its container. This would be especially problematic on elements with no or small amounts of padding.

I was able to hack my way around the problem in IE8 by using X-UA-Compatible, but I'd rather avoid this solution if at all possible. I don't have access to IE9 for testing but my understanding hacks like PIE aren't necessary and it would be wasteful to force a compatibility mode in a browser that doesn't need it.

I have worse issues in IE6, with the PIE layout breaking down completely on a list that is set up to use display:inline; zoom:1; list items (to simulate inline-block, which works in IE8 and the other browsers). Here the borders of the list items get rendered in completely the wrong place.

So ideally, I'd like to have PIE work properly in IE6, and in IE8 without having to resort to compatibility mode. As far as IE6 goes, a graceful fallback where PIE is just not applied will do. IE7 is the only browser where the page displays as intended.

I can't provide an example page just at the moment unfortunately, I can add one later though.

Follow up:

Here are some screen grabs made with IE Tester. I'm hoping they will make things a little more clear for everybody. As you can see, IE7 is fine. However, in IE8, the containers are offset to the left relative to their content, and in IE6 the list elements (with the rounded 1 pixel border) are a complete mess!

Internet Explorer 8 with offset boxes IE7 is correct IE6 is really mangled!

Full size versions for IE8, IE7 and IE6 are also available

Followup 2

Here's a link to a demo page.

As other designers are working on the stylesheets and other parts of the design I can't promise it will remain fully reflective for very long, but hopefully it will for long enough to solve the problem. (Yes, I'm aware there's JS errors in IE6, those aren't my problem).
Example page

Kara
  • 6,115
  • 16
  • 50
  • 57
GordonM
  • 31,179
  • 15
  • 87
  • 129
  • Re your comment on IE9: IE9 will (should) support all the features that PIE implements, so PIE explicitly switches itself off under IE9. IE9 should pick up rounded corners etc from your standard CSS. You can (and should) download the IE9 preview version to test with; it can be run alongside other versions of IE, so it won't do any harm. – Spudley Jan 10 '11 at 09:46
  • Unfortunately IE9 is not an option, my primary machine is a Mac, and the Windoes systems I have access to are XP based. – GordonM Jan 10 '11 at 10:36

3 Answers3

1

i prefer using http://www.curvycorners.net/

kamal
  • 1,536
  • 2
  • 22
  • 32
  • How does that compare against PIE? Have you tried both and found issues in one that weren't in the other? – GordonM Jan 10 '11 at 10:37
  • yes. i used to use PIE and i got problems. and i found curbycorners which runs well and i am using it. here is the site i m useing it. it works both on image and divs. http://www.timimeromatimro.com/timimeromatimro – kamal Jan 10 '11 at 16:31
1

I was experiencing a similar issue with IE8. The elements PIE was applied to would first display 10-20px lower, then jump up to the proper position. Applying the rule "display: inline" to the element seemed to stop the issue. "Position: relative;" and "zoom: 1" on the element or parent element seemed to have no effect.

It's a bit weird. Once the rule "display: inline" is applied, the issue dissappears on refresh. But if you remove the rule, it still looks okay on refresh, until you close and reopen the browser window - then the jumping reappears.

Hope that helps someone.

Todd
  • 11
  • 1
0

Try adding

position:relative;
z-index: 0;

as suggested here http://css3pie.com/forum/viewtopic.php?f=3&t=10

This question is similar to the one posted here: CSS3 PIE - Giving IE border-radius support not working?

Community
  • 1
  • 1
Daniel Rehner
  • 1,771
  • 12
  • 8
  • Sorry, no joy with that. I can only get it to work in 8 with x-ua compatibility mode meta tag, and not at all in IE6. – GordonM Jan 14 '11 at 23:31