CODEWITHSUNDEEP
asp.netcssbutton
danish
danish

Reputation: 5600

Setting Vertical-Align for a button

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.

Upvotes: 4

Views: 20632

Answers (3)

nonopolarity
nonopolarity

Reputation: 151066

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.

Upvotes: 0

Keltex
Keltex

Reputation: 26436

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;
}

Upvotes: 4

Jonathan Fingland
Jonathan Fingland

Reputation: 57167

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

Upvotes: 2

Related Questions