Here are a few other issues that I’ve run into as well:

1. Noticeable delay on style rendering when page first loads. When you first load a page using the CSS3 Pie fix there is a small delay before those CSS3 properties are put in place.  This delay increases with every element that has some type of CSS3 style applied to it.  So if you wanted to round the corners on 100 divs on a single page you could be seeing nearly a full half-second delay before those are rendered on the screen.  It appears to be affected purely by machine speed so even people with a very fast internet connection will experience a delay unless they’re on a powerful machine.
2. Many “position: relative” hacks required on more complex layouts. The more complex your styling gets the more you have to utilize the “position: relative” fix that is recommended on their site to trigger the proper layout method in IE.  This becomes extremely cumbersome as you go on with a layout as it isn’t necessarily used in the same elements every time, which leads to a lot of wasted time hunting down the particular element which needs the style applied to it.
3. Sometimes it just doesn’t work. Occasionally a page will load and the CSS3 Pie will not load at all this leaving it in the default styles.  This happens infrequently but the fact that it happens at all seals the deal on whether or not I would feel safe using this method for anything other than a proof of concept or demonstration site.

I’m sure the problems with CSS3 Pie are purely related to having to work around the huge amount of shortcomings within the IE browser and I applaud the author for getting it this far.  For now, though, I would still recommend against using this for any type of production work.

Initially, the sidebar area is set to a non-fixed position.  In my example I’m just floating it to the left of the main content area.  It also has overflow set to hidden.  Here is the CSS for the sidebar:

<style type="text/css">
#sidebar { float: left; width: 180px; margin: 10px 0 0 0; font-size: 11px; line-height: 15px; }
#sidebar #pinned { width: 180px; height: 100%; overflow-y: hidden; }
#sidebar #pinned.pin-set { position: fixed; height: 100%; top: 0px; z-index: 99; }
#sidebar:hover #pinned { overflow-y: auto !important; }
</style>

The pin-set class is what I’ll apply to the sidebar content area (#pinned) when the user scrolls far enough down that the header is covered.  Here is the JavaScript required for that effect.  I’m using jQuery for simplicity of selectors and events:

<script type="text/javascript">
(function($) {
$(function() {
var int_sideheight = $(window).height() - $('#header').height() - 10;
$('#pinned').css('height',int_sideheight+'px');
$(window).scroll(function() {
if ($(this).scrollTop() > $('#header').height()) {
$('#pinned').addClass('pin-set').css('height','100%');
} else {
var int_sideheight = $(window).height() - $('#header').height() - 10;
$('#pinned').removeClass('pin-set').css('height',int_sideheight+'px');
}
});
});
})(jQuery);
</script>

What I’m doing is checking to seel when the scrollTop() is greater than the height of the header area. If it is, then apply that pin-set class to the sidebar navigation area.  If it isn’t, I’m clearing the class so that the sidebar area will always remain below the header area.  The mouseover scroll bar effect is purely CSS-driven.

View a working demo of this code here.

$('li:contains("findthis")').filter(function() {
  return $(this).text() == "findthis";
}).addClass('active');

http://css3pie.com//

I’ve set up a working demo of the code described below here:

View Demo

Download Source Files

I tried this out on a new project that involved creating a tab-style content box with rounded corners.  Normally this would involve either using image sprites or living with the fact that IE-based browsers will not be able to render the corners as the designer wanted them.

Here’s a screenshot of the basic tabbed content boxes as they are rendered in Internet Explorer 6 and Internet Explorer 7/8.  I lumped 7 and 8 together since they were nearly identical except for some very minor font anti-aliasing differences.

Before CSS3 PIE

Internet Explorer 6

Internet Explorer 7 & 8

After CSS3 PIE

Internet Explorer 6

Internet Explorer 7 & 8

Implementation

There are a few things to watch out for when using CSS3 PIE.  A few of the CSS3 properties have to be done using the “-pie” prefix in order to trigger the proper rendering in Internet Explorer.  For example, to achieve this same multiple background declaration in CSS3 PIE:

background-color: #ccc;
background-image: url(quote-open.png), url(quote-close.png);
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
background-color: #ccc;	background-image: url(quote-open.png), url(quote-close.png);  background-position: left top, right bottom;  background-repeat: no-repeat, no-repeat;

You will need to add the CSS3 PIE specific declaration for backgrounds:

-pie-background: #ccc url(quote-open.png) no-repeat left top, url(quote-close.png) no-repeat right bottom;

Also, when you’re using JavaScript to manipulate styles on your page you need to add the following bit to your CSS to tell CSS3 PIE to “listen” to that element and watch for updates to it’s ancestors.

-pie-watch-ancestors: 1;

Finally, the last semi-tricky thing with CSS3 PIE is that for some elements you will have to apply the following CSS to their ancestor to get the CSS3 PIE to take effect. The symptom of needing to apply this fix is if the element you’re expecting to be styled disappears from the screen upon rendering:

position: relative;
z-index: 1;

All in all, I’ve found this system well worth the 2-3 minor tricky parts. In my opinion it’s a much better solution than letting the unsupported CSS3 elements degrade for those that are still using Internet Explorer 6-8.

HTML

<div class="agreement">
  <div class="agreement-inner">
    Content for agreement goes here...
  </div>
</div>
<div class="agreement-agree">
  This is the stuff I want activated when the agreement has been read.
</div>

jQuery JavaScript:

$(".agreement").scroll(function() {
  if ($(this).scrollTop() >= ($('.agreement-inner',this).height() - $(this).height())) {
    $('.agreement-agree').removeClass('disabled');
    $('.agreement').unbind('scroll');
    $('.agreement-agree').fadeTo(0,1);
  }
});

I’m currently working on deploying this to a generic jQuery plugin that will let you specify the content that needs to be scrolled through as well as the content should become enabled once that criteria is met.

“Gareth Stevens is one of the world’s most respected library and educational publishers. Our publishing program focuses on nonfiction titles carefully written and designed to align with current curriculum standards and objectives. Our mission is to lead children to a lifetime of learning. We do this through high-quality, high-interest books for every age group.”

Will work as intended within FireFox but not IE even though there is no space between the URL declaration and the “no-repeat” parameter. Change that code to:
background:transparent url(images/check.gif) no-repeat 0 6px;
And it will work fine all around.

These images are both generated on the fly via Google Maps.

[sourcecode lang=”html”]<img src="http://maps.google.com/maps/api/staticmap?center=Risdall+Marketing+Group,550+Main+St,New+Brighton,MN+55112&zoom=14&size=200×200&sensor=false&markers=size:mid|color:blue|550+Main+St,New+Brighton,MN+55112" />[/sourcecode]

[sourcecode lang=”html”]<img src="http://maps.google.com/maps/api/staticmap?center=Risdall+Marketing+Group,550+Main+St,New+Brighton,MN+55112&zoom=14&size=200×200&sensor=false&markers=size:mid|color:green|550+Main+St,New+Brighton,MN+55112&maptype=satellite" />[/sourcecode]

The bandwidth limitation is 1000 unique (different) image requests per viewer per day. Which means you would only see a limit on users who happen to view 1000 DIFFERENT static Google Maps images within a 24 hour period.

Here’s the full api developers guide.