ImageButton Shows the Ugly 'Submit Query' Text
This was happening for me when I was setting the background image of the button using CSS. If you don't specify the ImageUrl attribute (or the value is empty string) 'Submit Query' will be shown. So the simple fix is to make sure this is specified in the tag declaration.
In my case I wanted the ImageUrl to be different depending on what theme was applied, this is the reason I was originally setting the image using the theme's style sheet.
How to Set the Image Depending On the Theme
The correct way to do this is of course through the theme .skin file. I created a declaration for the
ImageButton in my skin file with a unique SkinId:
<asp:ImageButton SkinId="btnCalendar" ImageUrl="./Images/calendar.gif" runat="server" />
And then in my .aspx:
<asp:ImageButton ID="btnSelect" runat="server" SkinId="btnCalendar" />
Note my theme images are located in an 'Images' folder under the particular theme's folder.
So now the correct image is shown (no 'submit query') and if I change the theme, all I need to do is
modify the .skin file with a new ImageUrl (or just change the calendar.gif file in the theme's 'Images'
folder).
If I need other ImageButtons to show different images I just need to create a declaration in the .skin
file with a unique SkinId.
One More Quirk - Vertical Alignment Of the ImageButton
By default the image button doesn't line up with an adjacent text box:
The fix for this is to set the style of the ImageButton through CSS:
.imageButton
{
position:absolute;
}
So now my skin file looks like this:
<asp:ImageButton CssClass="imageButton" SkinId="btnCalendar" ImageUrl="./Images/calendar.gif" runat="server" />
And everything looks pretty!
Jimmy