Setting Vertical-Align for a button

Question

I have a in a user control. In that, I have added a HTML table in which there is a button. I need to have the buttons aligned to the bottom of the cell. I tried setting the property in the CSS file the style does not gets applied. What is it that I am doing wrong?

ASCX file:

<link href="CSSFile.css" rel="stylesheet" type="text/css" />
.
.
.
<td>
  <asp:Button ID="btnOK" runat="server" Text="OK" Width="66px" CssClass="ButtonClass"/>
  <asp:Button ID="btnClose" runat="server" Text="Close" Width="66px"/>
</td>

CSS File:

ButtonClass
{
  border: thin groove #000000;
  vertical-align: bottom;
  color: #000000;
  background-color: #99FFCC;
}

The CSS file and the user control reside in the same folder.

Answer 1

Should be:

.ButtonClass
{
  border: thin groove #000000;
  vertical-align: bottom;
  color: #000000;
  background-color: #99FFCC;
}

ButtonClass would refer to ButtonClass elements e.g. <ButtonClass>...</ButtonClass> (which is of course, not correct in this case), .ButtonClass refers to elements having the class ButtonClass

Answer 2

You need to set the style on the cell, not the button itself:

<td class='ButtonCell'>
  <asp:Button ID="btnOK" runat="server" Text="OK" Width="66px" CssClass="ButtonClass"/>
  <asp:Button ID="btnClose" runat="server" Text="Close" Width="66px"/>
</td>

In your Css:

.ButtonCell
{
  vertical-align:bottom;
}

Answer 3

yes, you need it for the "td" element, not the button. if you apply to the button, it is vertically aligning to the line, which is centered in the cell. when you apply to the table cell, then the line will be aligned to the bottom of the cell.