# Wednesday, 29 September 2010
« Make your forms more user friendly with ... | Main | Visual Studio 2010 and Visual SourceSafe... »

Our team is working on a UI facelift for an intranet application that helps drive our internal yearly budgetary process.  During the beginning stages of the development of this effort we hired a new webmaster and we invited him to the effort to help give our UI a nice finish with all the CSS goodness and jQuery goodies.

During this process our webmaster began using some CSS3 magic to make things look nice.  As most good webmasters and designers firefox was used as the start of the design.  For our intranet however, IE is king and we have a mix of IE7 - 8 and they don’t support many CSS3 features.  Our webmaster turned to CSS3Pie.  I had no idea about this little gem and he had just recently come across it.  Download it, write your CSS3 and apply PIE and magically Internet Explorer renders CSS3.

As an example of what it can do, what if you wanted to apply a nice rounded edge to an element.  Fire up VS 2010 and start a new web forms project.  Let’s round the edges of the bottom of the border in the default page.

image

Let’s edit the page element in the site.css to get this going.

.page
{
    width: 960px;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
    border-radius: 0px 0px 10px 10px;
    -moz-border-radius: 0px 0px 10px 10px;
    -webkit-border-radius:  0px 0px 10px 10px;
}

We’ve added three items. The W3C standard for adding a rounded border is border-radius but for backwards compatibility we add the –moz-border-radius for older versions of Firefox and –webkit-border-radius for older versions of Chrome.

Now fire these up in Firefox and Chrome and you will have your rounded corner.  If you are using IE however, no luck.

Firefox sample:

image

Now to make this magic happen in IE we sprinkle in just a dash of CSS3Pie.  After downloading CSS3 Pie add the .htc file to your project and then add the below line to your page element in the site.css file:

.page
{
    width: 960px;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
    border-radius: 0px 0px 10px 10px;
    -moz-border-radius: 0px 0px 10px 10px;
    -webkit-border-radius:  0px 0px 10px 10px;
    behavior: url('./Scripts/PIE.htc');
}

Fire up IE again and CSS3 rounded corners appear thanks to CSS3Pie.

image 

Happy Coding

Posted 09.29.2010  #    Comments [0]  |