# Thursday, 19 April 2012

I’m developing an ASP.Net MVC application with Knockout 2.0/2.1rc.  I’m using modernizr (2.5.3) and css3pie (1.0 beta 5) to get CSS3 and HTML5 support on as many browsers as I can.

On a particular view I am using imageless add/delete buttons. I’m using Knockout to dynamically add and remove items from two tables.

I had to use css3pie to help make the buttons work in IE 6-8 with this line for the add button:

/* no fix currently for radial gradient in IE6-8... using linear instead.*/
-pie-background: linear-gradient(-90deg, #1b9918,#1b9918 65%,transparent 65%, transparent); 

and for the delete:

-pie-background: linear-gradient(-90deg, #da7d83, #da7d83 50%, #ca444e 50%, #ca444e);

When I apply the binding in KO (.applybinding), the buttons disappeared in IE 8.  At first I thought something was wrong in modernizr but after some testing I realized it was only IE 8 that was failing.  That got me thinking about css3Pie. After some searching around on the internet I found this post. The final response gave me my answer:

I have the same problem with a native ko templates, if I use "foreach" without a container element. Also, I was trying to use PIE.js instead of PIE.htc - but without success. For templates like data-bind="template: { name: 'itemTmpl', foreach: items }" css3pie works fine. Try to refactor templates using a container element. May be it is workaround solution.

I was using an anonymous/inline template:


    
        
+

When I changed the code to use a named template:



...
    

IE6-8 began working again.

According to the forum post, this may be an issue with KO 2.0.  I didn’t try it on an older version of KO but I did with KO 2.1rc and had the same results.

Happy Coding! Smile

Posted 04.19.2012  #    Comments [0]  | 
# Wednesday, 29 September 2010

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]  |