CSS3 PIE

PIE.htc  makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.

Let’s say you want to make a fancy contact form with rouded-corner inputs and textarea, and a background color for the entire form, like the one below.

You use the following:

form { background: #f8f8f4; }
input, textarea {
border: 1px solid #d8d6ba;

-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;

behavior: url(/PIE.htc);
}

But in IE8 and IE7 the background of the form ruins everything and the inputs aren’t visible, like in the photo below:

In order to repair the inputs and the textarea, and to keep the form’s background, use the following trick: position your elements:

input, textarea { position: relative; }

Using this trick, IE7 and IE8 will work just fine.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s