Hi,
When I tested my login form in IE and FF, I don't see the dot before the submit button text. But when I view it in Chrome, I see the dot. I have attached a screenshoot in Chrome. Do you know why this is happening?
Thank you,
Trent
Hi Trent,
Thank you for posting in the community.
I have unsuccessfully tried to replicate the behavior using 11.2.20112.1019. Please provide me with a small sample illustrating the behavior as this would allow me to study the matter in more detail. It would also help to know the exact version of .NetAdvantage which you are using.
Please feel free to contact me if you have any additional questions.
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;}
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.
Can I used css to accomplish this? I am using asp.net so I won't know the button's input element name.
Nevermind, I found another way. Thank you very much for resolving this issue.
I used:
$(document).ready(function() {
$('input[type="submit"]').width("0px"); });
I spoke too soon. When I click the button in Chrome/Safari, it would disappear, but the label still remains.
Do you know how I can fix this issue?
I found the issue. It is caused by the HoverImageUrl property in the RoundedCorners element.