HTML and CSS Reference
In-Depth Information
3.
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.
4.
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
property.
/* Gradients */
.intro
{
border: 1px solid #999999;
text-align:left;
margin-top: 6px;
padding-left: 15px;
border-radius:25px;
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);
behavior: url(Content/PIE.htc);
}
5.
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.
Note
6.
Close the browser, which will stop the debugger.
7. open the
Index.cshtml
file and add the following rule to the style element:
h1
{
padding: 20px 0;
}
8.
Save your changes, press F5, and then select the iE7 browser mode. The page
should now look like Figure
7-11
.
