Small detail that prevents JQuery UI dialog working with custom button CSS classes in IE7 and IE8. Should we start taxing people using IE7?

As much as I like Microsoft technologies there are few products made by Microsoft that I deliberately try to stay away from. Most of all these are Microsoft browsers, especially those that are IE9 and older (IE8 and IE7 specifically). Not only IE7-IE8 and in many cases even the latest IE9 are significantly slower than Chrome and FireFox, but also it's a living hell for developers, trying to make standards-compliant web-site. 

I was not at all surprised to read about a company that charges its customers using IE7 a special fee (tax) to make up for the expenses towards making the web-site IE7 compatible. It's understandable that most of the users are in fact late adopters of any new technology on the market, but not when we're speaking about free software that takes a mere minutes to update and that will in fact run much better and faster. So I suppose this is the right move and users need to be pushed once in a while for the sake  of technical progress. 

In the meantime I still have to fully support IE7 for most of my customers. Last week I had yet another hour or so totally wasted trying to decipher another IE7-specific problem, this time with JQuery UI library. I needed to create a simple confirmation dialog box with two buttons ('go ahead' and 'cancel') each of the buttons having its own CSS class. Very simple thing for my fav browser Chrome as well as for IE9, but not for IE8 and IE7. Not a single word in developer tools console or anywhere else, just does not work at all. 

<script language="javascript" type="text/javascript">

$(document).ready(function() {

$(".removelink").click(function() {

$( "#dialog-confirm" ).dialog({
         resizable: false,
         height:200,
         width:730,
         modal: true,
         buttons: {

                "Cancel":  { 'class': 'class1', click:function() {

                  $( this ).dialog( "close" );

              }},
                "Delete all items": { 'class':'class2', click:function() {

                  $( this ).dialog( "close" );

                                        self.location = '...';
               }}
            }

     }); return false;

});

});

</script>

The small detail that makes a big difference in a world of IE7-IE8 is this: 'class': 'class1', click:function(). It's really important to put quotation marks for the 'class' attribute. Otherwise it just does not work. Hopefully soon this won't be necessary at all, but as there's still some 3-5% of visitors with IE7, customers are reluctant to declare it's not supported. They are clients after all.