Infragistics WebImageButton width problems on non IE Browsers

While testing our application on different browsers, I came across a problem that Infragistic's WebImageButton has on non IE browsers. In particular the width somehow gets set to 0px and the button will not show up. The HTML to show a Save/Cancel set of buttons is as follows:

<div style="margin-left: 40%; margin-right: auto; width: 20%; margin-top: 2em; padding-bottom: 1em;
height: 2em;">
   <div style="width: 100%; height: auto;">
       <div clientselector="btnSave_Container" style="float: left; width: 48%; margin-right: 2%;height: auto;">
             <div style="width: 6em; float: right;" >
                  <igtxt:WebImageButton ID="btnSave" runat="server" Width="100%">
                         <ClientSideEvents Click="SaveView" />
                  </igtxt:WebImageButton>
             </div>
      </div>
      <div style="float: left; width: 45%; height: auto;">
          <div style="width:6em;float:left;" >
               <igtxt:WebImageButton ID="btnCancel" runat="server" Width="100%">
                    <ClientSideEvents Click="closeAddEditDialog" />
              </igtxt:WebImageButton>
          </div>
      </div>
  </div>
</div>
--------------------------------
When viewing this set of buttons in IE8 it looks as follows:

Note that the Save and Cancel buttons are the same size and appear to obey the CSS style of 100% of the containg <div> of width 6em.

Using IE's developer tools, this confirms my assumption:

 

Note that the <table> which is the WebImageButton rendered, has an inline width style of 100% .

However when viewing this same HTML in Chrome, I see the following:

Not what I would expect to see! Using Chrome's developer tools I saw that the <table> did NOT have the style width=100% as it did in IE but rather 0px. This also happens in Firefox. I didn't test Safari but would expect it to be the same as Chrome.

When I reported this to Infragistic's support, they were able to reproduce the problem as well which is good because I didn't want this to be a WOMM (Works On My Machine) issue. A work-around they suggested was to set the style's width in the PreRender Event of the WebImageButton :

WebImageButton1.Attributes.Add("style", width:100%");

Although this works, I would have to set this in code for every WebImageButton (which I have a few). The approach I used was to simply use a CSS class with a child selector to enforce the width as follows:

.WebImageButtonContainer

{

}

.WebImageButtonContainer > table

{

width:100% !important;

}
 
This will force the width of the <table> (WebImageButton) to be 100% no matter what, which is how I want this to work. By adding this class to the containg div-

<div style="margin-left: 40%; margin-right: auto; width: 20%; margin-top: 2em; padding-bottom: 1em;
height: 2em;">
     <div style="width: 100%; height: auto;">
          <div clientselector="btnSave_Container" style="float: left; width: 48%; margin-right: 2%;height:auto;">
               <div style="width: 6em; float: right;" class="WebImageButtonContainer" >
                   <igtxt:WebImageButton ID="btnSave" runat="server" Width="100%">
                       <ClientSideEvents Click="SaveView" />
                  </igtxt:WebImageButton>
               </div>
          </div>
         <div style="float: left; width: 45%; height: auto;">
               <div style="width:6em;float:left;" class="WebImageButtonContainer" >
                   <igtxt:WebImageButton ID="btnCancel" runat="server" Width="100%">
                        <ClientSideEvents Click="closeAddEditDialog" />
                  </igtxt:WebImageButton>
         </div>
    </div>
  </div>
</div>
--------


View the HTML with Chrome now works as desired:
 

Using Chrome's developer tools I can see that the class has overridden the inline width of 0px: