# Thursday, April 19, 2012
« SelfSSL on IIS 7 | Main | Mercurial for a small team series–Mercur... »

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

Please login with either your OpenID above, or your details below.
(will show your gravatar icon)
Home page

Comment (Some html is allowed: b, blockquote@cite, em, i, strike) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.  

[Captcha]Enter the code shown (prevents robots):

Live Comment Preview