One ASP.Net ImageButton not working in Chrome (but another is... and both work in IE 9)

Question

One of my image buttons is not working in Chrome, but the other button is (they both work in IE 9):

Not working

<asp:ImageButton ID="lblCustomer" 
    ImageUrl="~/images/Customer.jpg" 
    runat="server" 
    onmouseover="this.src='images/Customer.jpg';" 
    onmouseout="this.src='images/Customer.jpg';" 
    AlternateText="Customer" 
    CausesValidation="false" 
    OnClick="ibtnCustomer_Click" 
    ToolTip="Customer" />

Working:

<asp:ImageButton ID="ibtnUnRegisteredVendor" 
    ImageUrl="images/VendorButton.jpg" 
    runat="server" 
    onmouseover="this.src='images/VendorButtonHover.jpg';" 
    onmouseout="this.src='images/VendorButton.jpg';" 
    AlternateText="Vendor" 
    CausesValidation="false" 
    OnClick="btnUnRegisteredProvider_Click" 
    ToolTip="" />

The Customer button is not clickable in Chrome.
Any idea why the Customer button would not work in Chrome?

Update:

The rendered HTML from Chrome is:

<div id="Customer" style="width: 100%; left: 5px;">
    <input type="image" name="Master$cphMainContent$lblCustomer" id="cphMainContent_lblCustomer" title="Customer" onmouseover="this.src=&#39;images/Customer.jpg&#39;;" onmouseout="this.src=&#39;images/Customer.jpg&#39;;" src="images/Customer.jpg" alt="Customer" />
</div>


<div id="VendorsButton">
  <input type="image" name="Master$cphMainContent$ibtnVendor" id="cphMainContent_ibtnVendor" title="Vendor log in, registration or access without registration" onmouseover="this.src=&#39;images/VendorsButtonHover.jpg&#39;;" onmouseout="this.src=&#39;images/VendorsButton.jpg&#39;;" src="images/VendorsButton.jpg" alt="Vendors" />
<div id="VendorFeaturesContainer">

Silly, but did you try without the tooltip? It is the only difference that I see at first glance. — personaelit, Aug 13 '12 at 18:35
Would you post the actual HTML rendered by the ImageButton by viewing the HTML source of the .aspx page in a browser? — mclark1129, Aug 14 '12 at 14:32
Also as a side note, consider using CSS sprites instead of javascript for your hover styles. This is more performant and may help reduce any cross-browser issues dealing with Javascript: http://css-tricks.com/css-sprites/ — mclark1129, Aug 14 '12 at 14:33
You could try jquery if you are open to that technology. VERY easy and pain free. — Troy, Aug 19 '12 at 04:07

score 1 · Answer 1 · answered Aug 13 '12 at 18:36

1

Probably because you have a different path to both of them. Try changing the first one's ImageUrl to "images/Customer.jpg"

answered Aug 13 '12 at 18:36

Phillip Schmidt

8,805
3
43
67

@DotNetRookie what exactly is the error/problem you're getting? – Phillip Schmidt Aug 14 '12 at 18:29
wow..... didn't realize I didn't mention that. The button "lblCustomer" is not an imagebutton in Chrome. Meaning I can't click it to make anything happen. – DNR Aug 14 '12 at 19:07
the Customer_Click code is Server.Transfer("CustomerLogin.aspx"); – DNR Aug 15 '12 at 15:06

score 0 · Answer 2 · answered Aug 13 '12 at 22:17

0

If the previous suggestion didn't work, you may have problems with the ~/ shortcut in a virtual directory

answered Aug 13 '12 at 22:17

Ian Levy

65
8

score 0 · Answer 3 · answered Jun 27 '19 at 13:25

When a control (asp:ImageButton) is part of a "Content Placeholder" for an ASPX Master Page, the ../ and ~/ are interpreted differently by IE11 versus Chrome.

IE will respond as expected with the prefix ~/ to represent the root directory of the web application. IE is looking for the image directory (ImageUrl="~/images/Customer.jpg") one level down from the root.

In Chrome, the file inserted into the Master Page will respond as expected when using the ../ prefix when your images are in a directory at the same level as your "content ASPX file". Chrome is interpreting ~/ to be in the same directory as the "content ASPX file". That is, Chrome is looking for your image directory as a sub-directory of the directory holding your "content ASPX file".

The asp:ImageButton isn't amenable to a javascript function as far as I know. One work around is to have two image directories (where IE expects it, and where Chrome expects it) with the appropriate jpg, png, gif, et al files.

One of my projects uses SkinID that works in both IE and Chrome (rather than the ImageURL attribute). — sef, Jun 27 '19 at 13:36
My web app server is IIS7 (Windows Server). When I changed my slashes, the images were picked up by both IE and Chrome. Windows directory\subdirectory versus URLs and Linx directory/subdirectory
ImageUrl="~/includes/img/btn_cancel.gif" OKay in IE, not Chrome
ImageUrl="../includes/img/btn_cancel.gif" OKay in Chrome, not IE
ImageUrl="..\includes\img\btn_cancel.gif" OKay in both — sef, Jun 27 '19 at 13:52

One ASP.Net ImageButton not working in Chrome (but another is... and both work in IE 9)

3 Answers3