I am using 9.2. This is the code to generate the button.

Skin code:

<igtxt:webimagebutton SkinId="RoundedButton24" runat="server" CssClass="button" >
    <Appearance>
        <Style>
            <Padding Top="0px"></Padding>
            <Padding Right="5px"></Padding>
            <Padding Bottom="1px"></Padding>
            <Padding Left="10px"></Padding>
        </Style>
        <Style Cursor="hand" ></Style>
    </Appearance>
    <DisabledAppearance>
        <Style ForeColor="gray"  />
    </DisabledAppearance>
    <RoundedCorners ImageUrl="~/images/buttons/button24_full.png"
     DisabledImageUrl="~/images/buttons/button24_full_disabled.png" 
     HoverImageUrl="~/images/buttons/button24_full_hover.png"
     RenderingType="FileImages"
     HeightOfBottomEdge="0" MaxHeight="24"  MaxWidth="380" />  
</igtxt:webimagebutton>

 Code on aspx file:

<div class="buttonShell"><igtxt:WebImageButton ID="btnSubmit" SkinID="RoundedButton24" Text="Sign In" runat="server" CausesValidation="true" OnClick="btnSignIn_Click" /></div>

Css:

 .buttonShell table td
{
 padding-right:4px;
 vertical-align: middle;
}

Hi tnguyen13,

Thank you for your reply.

Unfortunately, using the last SR for 9.2 - build 2183 and the code you have provided I am still unable to replicate the behavior. Please provide me with a small sample page including the images used so that I can research this further.

Did you test the button in Google Chrome? The images are fine in IE and FF.

I have attached the images that I used.

Hi tnguyen13,

Thank you for your replies and for providing the used images. I was able to reproduce the matter and have logged this issue in our internal system with an id of 110184. Your support ticket number regarding this matter is CAS-77779-DGRFHL . Please feel free to continue sending us updates. You can view the status of the development issue connected to this case by going to the “My IG” tab on our website, hovering to the "My Support Activity" dropdown and selecting the "Development Issues" tab. 

The issue seems to be caused by the image button's input element being rendered with width of 1px under Chrome (which contrasting with the dark-colored images used appears as a dot). As a temporary solution I can suggest manually setting the width of the element to 0 on document.ready(). For instance:

        $(document).ready(function () {
            //this sets the width of the image button's input element to 0px
            $('#WebImageButton2').width("0px");
        });

Please feel free to contact me if you have any questions.

Hi tnguyen,

I tested WebImageButton with TabIndex under Chrome and Safari. It worked on my machine.
I tested codes similar to
<igtxt:WebImageButton ID="WebImageButton3" runat="server" Text="ImgButton1" DisplayMode="Block" TabIndex="10">
   <FocusAppearance>
    <ButtonStyle Font-Italic="True"></ButtonStyle>
   </FocusAppearance>
</igtxt:WebImageButton>
<igtxt:WebImageButton ID="WebImageButton4" runat="server" Text="ImgButton2" DisplayMode="Block" TabIndex="11">
   <FocusAppearance>
    <ButtonStyle Font-Italic="True"></ButtonStyle>
   </FocusAppearance>
</igtxt:WebImageButton>

While testing, I noticed that combination of Tab+TabIndex may generate thick blue border around "invisible" INPUT, which appears as blue circle. That side effect was missed and has been fixed and will be available in service releases.
In order to fix that focus circle in current version, application may set INPUT.style.outline=0;
Example:
<script type="text/javascript">
function WebImageButton1_Initialize(oButton){
  oButton.getElementAt(0).style.outline = 0;
}
</script>

I found out that this issue is more browser related. You can change how Safari handles tabbing, but Chrome doesn't have that feature.

This solution is much better than setting the width to 0px. In the process, I found another issue. When I use Safari/Chrome and try to tab to these image buttons, it does not focus on it, even if I set the tabindex.

Hi,

I noticed that question was not unswered. The issue with gray dot in Chrome was submitted and fixed few weeks ago.
The reason was failure of earlier versions of Safari/Chrome to support borderless INPUT and size (width/height) equals to 0px. Therefore WebImageButton used style with
width:1px;height:1px;border-top:1px solid #C0C0C0;
Current/latest versions of Chrome/Safari seems to support borderless INPUT. Fix included removing border and setting transparent background of INPUT.

Update will be available within service releases.

If application uses version of NetAdvantage older than 11.1 or it prefers to keep current version, then the best I can suggest, is to find reference to INPUT, remove its border and set transparent background. Below is example:

<script type="text/javascript">
function WebImageButton1_Initialize(oButton){
 var style = oButton.getElementAt(0).style;
 style.border = '0px';
 style.background = 'transparent';
 // line below may have side effects in some versions of Safari and Chrome
 // style.width = style.height = '0px';
}
</script>
<igtxt:WebImageButton ID="WebImageButton1" runat="server">
  <ClientSideEvents Initialize="WebImageButton1_Initialize" />
</igtxt:WebImageButton>

Do you know how I can fix this issue?