Applying CSS to .NET ImageButton

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?

MikeM · Accepted Answer · 2011-04-13 22:12:04Z

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

answered Apr 13, 2011 at 22:12

MikeM

27.5k4 gold badges68 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Town · Accepted Answer · 2011-04-13 23:04:37Z

1

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.

answered Apr 13, 2011 at 23:04

Town

14.9k3 gold badges50 silver badges72 bronze badges

Comments

Biff MaGriff · Accepted Answer · 2011-04-13 22:10:57Z

0

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...

edited Apr 13, 2011 at 22:10

answered Apr 13, 2011 at 22:05

Biff MaGriff

8,2619 gold badges65 silver badges100 bronze badges

7 Comments

Jagd Over a year ago

@Biff - No can do and here's why. I have RequiredFieldValidators on the webpage, and when the input tag tries to submit the page then the RFV's are triggered and can cause the page submit to fail. Ultimately, this is what led me to wanting to use the .NET ImageButton because it has the CausesValidation attribute and can submit the page without causing the RFV's to trigger.

Biff MaGriff Over a year ago

@Jagd - So set CausesValidation on the <asp:Button /> ?

Biff MaGriff Over a year ago

Ahh, wait I see. Change it from a submit input type to a regular button.

Biff MaGriff Over a year ago

And if that doesn't work just use a regular image and put the onclick on the div.

Biff MaGriff Over a year ago

Anyways, what I'm trying to say is the asp controls are a pain to work with stylistically. Let me know if you are having any troubling implementing it my way. I'll try to help.

|

Collectives™ on Stack Overflow

Applying CSS to .NET ImageButton

3 Answers 3

Comments

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related