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

user_165694 0
Viewed 3144

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">
imagebutton google-chrome asp.net c#
3 Answers

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.

user_51491710
Related