1

The code below is what i have so far for the configuration of my css button and all it displays right now is normal button. However, it does work if I would switch to id instead of class.

.phasesButton [type=submit]
{
  clear:both;
  display:block;
  margin-left: auto;
  margin-right: auto;
  width:125px;
  height:31px;
  background:rgba(0,0,0, .7);
  text-align:center;
  line-height:31px;
  color:#FFFFFF;
  font-size:13px;
  font-weight:bold;
  margin-top:30px;
  border: 1px solid #000000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .5);
  cursor: pointer;
}

This is my html

 <div id="phaseOne" class="frmPhaseOne">
    <table width="95%">
    .
    .
    .
    </table>
    <asp:Button ID="btnPhaseOne" class="phasesButton " runat="server" Text="Submit"/>
</div>

Even if I place the button outside the div or putting input[type=submit] instead, it still would not work.

Mike Stockdale
  • 5,256
  • 3
  • 29
  • 33
user3195396
  • 254
  • 2
  • 7
  • 21
  • Set the CSS class using the CssClass attribute instead. – Anthony Chu Apr 02 '14 at 02:20
  • @KingKing I believe quotes are not necessary if there are no special characters in the attribute value. Though it doesn't hurt to add them either. – Fabrício Matté Apr 02 '14 at 02:30
  • @FabrícioMatté yes, I'm used to add quotes because it is a very good practice, not using quotes are some kind of bad practice and should be avoided. – King King Apr 02 '14 at 02:40

2 Answers2

2

Remove the space:

.phasesButton[type=submit]

White space is a descendant selector, that is, the selector:

.phasesButton [type=submit]

Would look for elements which match [type=submit] inside of a .phaseButton.

Reference

Fabrício Matté
  • 69,329
  • 26
  • 129
  • 166
1

First remove the space between css selectors. Second the type=submit would not work. change it to type=button

change .phasesButton [type=submit] to .phasesButton[type=button]

Explanation:

  1. .phasesButton[type=button] this two are selector for same element so should not be separated.

  2. When you add a tag asp:button in your webform, the asp.net will render an input type="button" for you and when you click this button, it will submit a post to the same page (this is called postback) and will processing the life cycle and asp.net event associated with this button. The same is valid for every server control such as TextBoxes (render input type='text'), Panels (renders divs), Checkboxes (render input type='checkbox'), Labels (render spans) etc...

reference

Community
  • 1
  • 1
  • Well, you could just say that `asp:button` renders to `type=button` without copying half of [this other answer](http://stackoverflow.com/a/14306741/1331430). – Fabrício Matté Apr 02 '14 at 02:33