Why doesn't -moz-binding work in my code?

I have a file SolarCalendar.htc, its contents are below:

<script language="javascript">
//My java Script Code
</script>

<public:property put=fnPutDay                  get=fnGetDay                name="day">
<public:property put=fnPutMonth                get=fnGetMonth              name="month">
<public:property put=fnPutYear                 get=fnGetYear               name="year">
<public:property put=fnPutMonthLength          get=fnGetMonthLength        name="monthLength">
<public:property put=fnPutDayLength            get=fnGetDayLength          name="dayLength">
<public:property put=fnPutFirstDay             get=fnGetFirstDay           name="firstDay">
<public:property put=fnPutGridCellEffect       get=fnGetGridCellEffect     name="gridCellEffect">
<public:property put=fnPutGridLinesColor       get=fnGetGridLinesColor     name="gridLinesColor">
<public:property put=fnPutShowDateSelectors    get=fnGetShowDateSelectors  name="showDateSelectors">
<public:property put=fnPutShowDays             get=fnGetShowDays           name="showDays">
<public:property put=fnPutShowTitle            get=fnGetShowTitle          name="showTitle">
<public:property put=fnPutShowVerticalGrid     get=fnGetShowVerticalGrid   name="showVerticalGrid">
<public:property put=fnPutShowHorizontalGrid   get=fnGetShowHorizontalGrid name="showHorizontalGrid">
<public:property put=fnPutValue                get=fnGetValue              name="value">
<public:property put=fnPutValueIsNull          get=fnGetValueIsNull        name="valueIsNull">
<public:property put=fnPutReadOnly             get=fnGetReadOnly           name="readOnly">
<public:property put=fnPutHoliday              get=fnGetHoliday            name="holiday">

<public:event id="onChange"         name="onchange">
<public:event id="onPropertyChange" name="onpropertychange">
<public:event id="onError"          name="onerror">

And I have SolarCalendar.htm file that uses this 'SolarCalendar.htc' as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html XMLNS:IE>
    <head>
        <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
        <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
        <STYLE> IE\:Calendar  
            {
                behavior: url(SolarCalendar.htc) ;
                -moz-binding: url(bindings.xml#SolarCalendar.htc);
                 width : 100%; 
             }
        </STYLE>

    </head>
    <body onkeypress="Window_Keypress()" onload="Window_Onload()" onunload="Window_OnUnload()">
        <CENTER><IE:CALENDAR id="cal"></IE:CALENDAR></CENTER>
    </body>
</html>

But it doesn't work in FireFox (it works on IE). Do you know what is wrong in this code? I used bindings.xml in my project and simple examples with it work well, but the above code doesn't.

Solution

Can Firefox select your custom HTML element?

Does your selector for the <IE:CALENDAR> element work? You could try using the following styles, instead of the -moz-binding rule, and see if they have any effect:

IE\:Calendar {
    width: 100px;
    height: 100px;
    display: block;
    background-color: green;
}

If not, the selector (IE\:Calendar) may be the problem.

Is your filename correct?

Here’s your -moz-binding line:

-moz-binding: url(bindings.xml#SolarCalendar.htc);

If I understand correctly, that says:

Find the file “bindings.xml”, and within it, find the element with an id attribute of SolarCalendar.htc.

If your file is called “SolarCalendar.htc”, then Firefox won’t find it, because it’s not called “bindings.xml”.

Maybe you could take the XML content out of SolarCalendar.htc, and save it in a file called bindings.xml? Then remove #SolarCalendar.htc from your -moz-binding rule?