Applying CSS to .NET ImageButton - asp.net

Question

I have the following CSS that I can apply to an HTML input tag.
#headerSearch
{
width: 265px;
}
#headerSearch .text
{
width: 215px;
}
#headerSearch #searchButton
{
background: url(../images/searchButton.png) no-repeat 0 0;
width: 36px;
border: 1px solid #ccc;
margin: 0;
}
#headerSearch #searchButton:hover
{
background: url(../images/searchButton.png) no-repeat 0 -28px;
}
And the HTML to which I apply it...
<div id="headerSearch" class="float">
<input id="txtSearch" class="text left" type="text" />
<input id="searchButton" class="submit right" type="submit" value="" />
</div>
It works wonderfully.
However, I want to use an ImageButton control instead of the input tag because I want the page submit behavior of the ImageButton (which occurs when you click on it and click event is raised, etc.), but I am not sure how to go about mixing CSS with the ImageButton. I tried something simple like
<asp:ImageButton ID="ibtnSrch" runat="server" CssClass="searchBtn" onclick="ibtnSrch_Click" AlternateText="Search" />
but what occurs is the image displays with a red X in a white box (the default image is missing icon) over top of it.
So, more succinctly, how do I mix elegant CSS with the .NET ImageButton?

Answer 1

based on the sample code you have set the <asp:ImageButton /> CssClass to "searchBtn" but there is no CSS for .searchBtn
perhaps add this to your css
.searchBtn {
background: url(../images/searchButton.png) no-repeat 0 0;
border: 1px solid #ccc;
margin: 0;
}
.searchBtn:hover {
background: url(../images/searchButton.png) no-repeat 0 -28px;
}
an <asp:ImageButton /> renders down to <input type="image" name="ibtnSrch" id="ibtnSrch" class="searchBtn" src="" alt="Search" style="border-width:0px;" />
since the control is an image input with no image source that is why you get a red x

Answer 2

If you change your searchButton style to be a class, then you can just use an <asp:Button>
<asp:Button ID="ibtnSrch" runat="server"
CssClass="submit right searchButton" OnClick="ibtnSrch_Click" />
You can then put that button in a separate ValidationGroup or set CausesValidation="false".
If you want to keep it all client-side and do the redirect to the search page in JavaScript but also want to take advantage of the ASP.NET validation you've set up on your controls, you can use the client-side ASP.NET validation.

Answer 3

In short I would not use the asp image button.
I would use your current html controls and then add some javascript to click a hidden asp:Button control when your submit input is clicked.
<div id="headerSearch" class="float">
<input id="txtSearch" class="text left" type="text" />
<input id="searchButton" class="submit right" type="submit" value="" onclick="<% hiddenSearch.ClientID %>.click();" />
<asp:Button ID="hiddenSearch" runat="server" style="display:none;" />
</div>
I don't quite recall if that is the correct syntax to get the client id...