HTML and CSS Reference
From the Solution Explorer, right-click the Content folder and select the
Add ➤ Existing item links. navigate to the Content folder and select the PIE.htc file.
open the Index.cshtml file and find where the rules for the . intro class are
defined. Add the following lines shown in bold. This code will add another vendor-
prefixed attribute ( -pie- ) and then invoke the PiE component using the behavior
/* Gradients */
border: 1px solid #999999;
background-image: -o-linear-gradient(45deg, #ffffff, #6699cc);
background-image: -webkit-linear-gradient(45deg, #ffffff, #6699cc);
background-image: linear-gradient(45deg, #ffffff, #6699cc);
-pie-background: linear-gradient(45deg, #ffffff, #6699cc);
Save your changes, press F5 to debug the application, and switch the browser
mode to iE7. You should now have a linear gradient that looks just like the native
gradient. You might have also noticed that the corners are rounded as well. The PIE.
htc shim also supports rounded corners and took care of that for you. However, you
probably noticed that the padding on top of the h1 text is missing. The height was
not calculated correctly. That's an easy thing to fix.
■ PiE is designed to backfill several CSS3 features, which are listed in this article:
http://css3pie.com/documentation/supported-css3-features . it will attempt to address any of these features
that are included in the element that references the PIE.htc shim . However, it does not do anything with features
that are supported natively.
Close the browser, which will stop the debugger.
7. open the Index.cshtml file and add the following rule to the style element:
padding: 20px 0;
Save your changes, press F5, and then select the iE7 browser mode. The page
should now look like Figure 7-11 .