<asp:Button text jerks in IE8+

Question

The text inside the button jerks or moves down by few pixels.

<div>
<asp:Button runat="server" ID="Button1" CssClass="ButtonClass" Text="" runat="server" />
</div>

ascx.cs:

Button1.Text = LocalizationResourceManager.GetLocalizedValue("Button_Text");

CSS:

.ButtonClass{
 background: url('/Button.png') no-repeat scroll 0 0 transparent;
 cursor: pointer;
 font-weight: bold;
 font-size: 14px;
 height: 33px;
 padding-bottom: 7px;
 padding-right: 19px;
 width: 180px;
 border: solid 0px;
 color: #fff!important;
 background-position: 0px -31px;
}

If there was <span>, however, I could have used:

{position:relative;top;0;left:0;}

Since span cannot be used inside of asp:button, I want to have a fix for this button itself.

I tried:

<asp:LinkButton ID="Button1" runat="server" CssClass="ButtonClass">
    <span runat="server" id="ButtonText"></span>
</asp:LinkButton>

ascx.cs:

 ButtonText.text = LocalizationResourceManager.GetLocalizedValue("Button_Text");

I am having error: Error 9 'System.Web.UI.HtmlControls.HtmlGenericControl' does not contain a definition for 'text' and no extension method 'text' accepting a first argument of type 'System.Web.UI.HtmlControls.HtmlGenericControl' could be found (are you missing a using directive or an assembly reference?)

What am I missing here?

Answer 1

Not sure if you CSS actually is applied to the button but if you would like to use span inside a button why not change your control to a linkbutton like so:

<asp:LinkButton ID="Button1" runat="server" CssClass="Button1">
<span>Register 2</span>
</asp:LinkButton>

Edit:

<asp:LinkButton ID="Button1" runat="server" CssClass="Button1">
<span>
<asp:Label ID="ButtonText" runat="server" ></asp:Label>
</span>
</asp:LinkButton>

I think this should work for you.