Browser compatibility problem with t:selectOneMenu and JavaScript calendar

Question

I'm having problem with <t:selectOneMenu> and JavaScript calendar on IE. It works fine on Firefox but doesn't work on IE.
The JSF code is as follows:
<tr>
                                   <td align="right">
                                        Archive Date
                                   </td>
                                   <td align="left" colspan="3">
                                   <table cellpadding="0" cellspacing="0" border="0">
                                   <tr>
                                   <td>
                                   <span class="tuny_text">After&#160;(Ex. Oct 18, 2007)</span>
                                        <h:outputLabel for="txtArchiveDateAfter" value="Archive Date After" rendered="false"/>
                                        <br/>
                                        <t:inputText required="false" value="#{nonItemImageSearchPage.stringArchiveDateAfter}" name="txtArchiveDateAfter" id="txtArchiveDateAfter" forceId="true"  styleClass="inp" style="width: 128px">
                                   </t:inputText>
                                        <t:graphicImage value="/images/calendar.png" id="dtpArchiveDateAfter" name="dtpArchiveDateAfter" forceId="true" style="border: 2px solid #EEE; cursor: pointer"></t:graphicImage>
                                        <br/>
                                        <t:message for="txtArchiveDateAfter" styleClass="form_error" replaceIdWithLabel="true"></t:message>
                                   </td>
                                   <td>
                                   <span class="tuny_text">Before&#160;(Ex. Oct 18, 2007)</span>
                                        <h:outputLabel for="txtArchiveDateBefore" value="Archive Date Before" rendered="false"/>
                                        <br/>
                                        <t:inputText value="#{nonItemImageSearchPage.stringArchiveDateBefore}" name="txtArchiveDateBefore" id="txtArchiveDateBefore" forceId="true" style="width:128px" styleClass="inp">
                                   </t:inputText>
                                        <t:graphicImage value="/images/calendar.png" id="dtpArchiveDateBefore" name="dtpArchiveDateBefore" forceId="true" style="border: 2px solid #EEE; cursor: pointer"></t:graphicImage>
                                        <br/>
                                        <t:message for="txtArchiveDateBefore" styleClass="form_error" replaceIdWithLabel="true"></t:message>
                                   </td>
                                   </tr>
                                   </table>
                                   </td>
                              </tr>
                              <tr>
                                   <td align="right" >
                                        <h:outputLabel for="drpBackground" value="Background"/>
                                   </td>
                                   <td align="left" class="right_separator">
                                        <t:selectOneMenu id="drpBackground" forceId="true" value="#{nonItemImageSearchPage.nonItemImageSearchModel.backgroundId}" styleClass="inp" style="width: 150px">
                                        <f:selectItem itemLabel="--------" itemValue="-1"/>
                                        <s:selectItems value="#{nonItemImageSearchPage.backgroundPrefsList}"
                                                  var="backgroundPrefs" itemValue="#{backgroundPrefs.id}" itemLabel="#{backgroundPrefs.description}" />
                                        </t:selectOneMenu>
                                   </td>
                                   <td  align="right" class="left_separator">
                                        <h:outputLabel for="drpTheme" value="Theme"/>
                                   </td>
                                   <td align="left" >
                                        <t:selectOneMenu id="drpTheme" forceId="true" value="#{nonItemImageSearchPage.nonItemImageSearchModel.themeId}" styleClass="inp WCHhider" style="width:150px;">
                                        <f:selectItem itemLabel="--------" itemValue="-1"/>
                                             <s:selectItems value="#{nonItemImageSearchPage.themePrefsList}"
                                                  var="themePrefs" itemValue="#{themePrefs.id}" itemLabel="#{themePrefs.description}" />
                                        </t:selectOneMenu>
                                   </td>
                              </tr>
                              <tr>
                                   <td align="right" >
                                        <h:outputLabel for="drpSeason" value="Season"/>
                                   </td>
                                   <td align="left" class="right_separator">
                                        <t:selectOneMenu id="drpSeason" forceId="true" value="#{nonItemImageSearchPage.nonItemImageSearchModel.seasonId}" styleClass="inp" style="width:150px">
                                        <f:selectItem itemLabel="--------" itemValue="-1"/>
                                             <s:selectItems value="#{nonItemImageSearchPage.seasonPrefsList}"
                                                  var="seasonPrefs" itemValue="#{seasonPrefs.id}" itemLabel="#{seasonPrefs.description}" />
                                        </t:selectOneMenu>
                                   </td>
                                   <td align="right" class="left_separator">
                                        <h:outputLabel for="drpClothing" value="Clothing"/>
                                   </td>
                                   <td align="left"  >
                                        <t:selectOneMenu id="drpClothing" forceId="true" value="#{nonItemImageSearchPage.nonItemImageSearchModel.clothingId}" styleClass="inp" style="width:150px">
                                        <f:selectItem itemLabel="--------" itemValue="-1"/>
                                             <s:selectItems value="#{nonItemImageSearchPage.clothingPrefsList}"
                                                  var="clothingPrefs" itemValue="#{clothingPrefs.id}" itemLabel="#{clothingPrefs.description}" />
                                        </t:selectOneMenu>
                                   </td>
                              </tr>
                              <tr>
                                   <td align="right" >
                                        <h:outputLabel for="drpToy" value="Toy"/>
                                   </td>
                                   <td align="left" class="right_separator">
                                        <t:selectOneMenu id="drpToy" forceId="true" value="#{nonItemImageSearchPage.nonItemImageSearchModel.toyId}" styleClass="inp" style="width:150px">
                                        <f:selectItem itemLabel="--------" itemValue="-1"/>
                                             <s:selectItems value="#{nonItemImageSearchPage.toyPrefsList}"
                                                  var="toyPrefs" itemValue="#{toyPrefs.id}" itemLabel="#{toyPrefs.description}" />
                                        </t:selectOneMenu>
                                   </td>
                                   <td align="right" class="left_separator">
                                        <h:outputLabel for="drpJuvenile" value="Juvenile"/>
                                   </td>
                                   <td align="left" >
                                        <t:selectOneMenu id="drpJuvenile" forceId="true" value="#{nonItemImageSearchPage.nonItemImageSearchModel.juvenileId}" styleClass="inp" style="width:150px">
                                        <f:selectItem itemLabel="--------" itemValue="-1"/>
                                             <s:selectItems value="#{nonItemImageSearchPage.juvenilePrefsList}"
                                                  var="juvenilePrefs" itemValue="#{juvenilePrefs.id}" itemLabel="#{juvenilePrefs.description}" />
                                        </t:selectOneMenu>
                                   </td>
                              </tr>
                              <tr>
                                   <td align="right">
                                        <h:outputLabel for="drpGroup" value="Grouping"/>
                                   </td>
                                   <td align="left"  class="right_separator">
                                        <t:selectOneMenu id="drpGroup" forceId="true" value="#{nonItemImageSearchPage.nonItemImageSearchModel.modelGroupingId}" styleClass="inp" style="width:150px;">
                                        <f:selectItem itemLabel="--------" itemValue="-1"/>
                                             <s:selectItems value="#{nonItemImageSearchPage.groupPrefsList}"
                                                  var="groupPrefs" itemValue="#{groupPrefs.id}" itemLabel="#{groupPrefs.description}" />
                                        </t:selectOneMenu>
                                   </td>
                                   <td class="left_separator">&#160;</td>
                                   <td>&#160;</td>
                              </tr>
The JavaScript code is as follows:
<script type="text/javascript" language="javascript">
     var dtpArchiveDateBefore = new MooCal("txtArchiveDateBefore");
     var dtpArchiveDateAfter = new MooCal("txtArchiveDateAfter");
     window.addEvent("domready", function(){
       $("dtpArchiveDateBefore").addEvent("click", function(e){
                var event = new Event(e).stop();
                  var x = (event.client.x)-150;
                  var y = event.client.y;
                  dtpArchiveDateBefore.show(x,y);  // Display the calendar at the position of the mouse cursor
                  dtpArchiveDateBefore.minYear = 1800;
                    dtpArchiveDateBefore.maxYear = 2017;
     /*$("txtArchiveDateBefore").addEvent("click", function(e){
             e.target.blur();
                var event = new Event(e).stop();
                  var x = (event.client.x)-150;
                  var y = event.client.y;
                  dtpArchiveDateBefore.show(x,y);  // Display the calendar at the position of the mouse cursor
                  dtpArchiveDateBefore.minYear = 1800;
                    dtpArchiveDateBefore.maxYear = 2017;
    $("dtpArchiveDateAfter").addEvent("click", function(e){
                var event = new Event(e).stop();
                  var x = (event.client.x)-150;
                  var y = event.client.y;
                  dtpArchiveDateAfter.show(x,y);  // Display the calendar at the position of the mouse cursor
                  dtpArchiveDateAfter.minYear = 1800;
                    dtpArchiveDateAfter.maxYear = 2017;
   /* $("txtArchiveDateAfter").addEvent("click", function(e){
             e.target.blur();
                var event = new Event(e).stop();
                  var x = (event.client.x)-150;
                  var y = event.client.y;
                  dtpArchiveDateAfter.show(x,y);  // Display the calendar at the position of the mouse cursor
                  dtpArchiveDateAfter.minYear = 1800;
                    dtpArchiveDateAfter.maxYear = 2017;
     </script>When the calendar is above t:selectOneMenu, it doesn't show up on t:selectOneMenu area. Could anyone help me solve the issue?
Thanks
Rashed

Answer 1

There are dozens of CSS attributes that can (and have to) be handwritten. Trouble with them is that, like text shadows, they don't appear in all browsers. I have nine different browsers installed and test pages in ALL of them before I "finish" building site or page for a template.
I try to build for Firefox, out of personal preference for it, but I have to do things that work with IE because it still holds the market share (46%IE to 42%FF), and I will only go with designs that work in IE, FF, NS, Opera, Safari, and Chrome.
As to your questions.
1. The compatibility check is most likely current with the time of the build. I don't know if that component updates as browsers do, but I'd tend to think it doesn't. I'm using CS4  and there haven't been any updates for it in nearly a year. Firefox has released 4.0, Opera released 11, and Safari released 5 since then. The updater would have found and downloaded something if it was available.
2. I could only guess. Text shadows DON'T show up in design view (or in IE) but they do in browser preview. It's just a UI quirk, and it means "trial and error" is the onyl way to get what you want.
3. The quick-selects which are in DW dropdowns or popouts are the ones most  common to CSS designs and have been proven to work with all browsers at the time of release of your particular build of DW.
Hope that helps..