Input TAG inside table, css classes are not working at all

Question

I'm creating a complex form that a player will use to save his own personal character sheet via database. For this I'm using a lot of Input TAGs and for the Layout I'm using tables to help me set it up easy and in orthogonal way.

For the input I'm uses classes that modify their height, width and text-align.

HTML

<div id="a_ability" class="advanced">
  <h3>Advanced</h3>
    <table id="tab02" width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th scope="col">Ability</th>
        <th scope="col">Temp Value</th>
        <th id="tab02" scope="col">Bonus</th>
        <th scope="col">Magic Obj</th>
      </tr>
      <tr>
        <td>Strenght</td>
        <td><input type="text" name="temp_str" class="50x50"></td>
        <td><input type="text" name="bonus_str" class="50x50"></td>
        <td><input type="text" name="mag_str" class="50x200"></td>
       </tr>
       <tr>
         <td>Dexterity</td>
         <td><input type="text" name="temp_dex" class="50x50"></td>
         <td><input type="text" name="bonus_dex" class="50x50"></td>
         <td><input type="text" name="mag_dex" class="50x200"></td>
        </tr>
   </table>
 </div>

CSS

.50x50 {
height: 50px;
width: 50px;
text-align: center;
}
.50x200{
height: 50px;
width: 190px;
text-align: left;
padding-left: 10px;
}

The result of this is like that the class do not apply at all on the tag. The dimension are default one and I can apply only if I apply an ID for every input (the work will be impossibly long) or sometimes if I apply the !important attribute (but only work with some css rules).

I'm working on Dreamweaver (if you know the program) when I'm on "Design view" without the "Live" option enbled, everything seems fine, but when I put the design view On the input are wrongly formatted.

I've checked:

• I have not any css conflict (for example one rule that overwrite another one)
• I have checked the "inspection" inside Chrome (for example) and the input take a widht are of 183px from apparently nowhere

Is it could be some user agent stylesheet of the browser? Because when I open the inspection element in Chrome there is this line:

width: 84px;
   .advanced table tr td - 50px

it get's from the css the 50px, but where it gets the 84px?? There is no rule at all with that value!

How can I solve this?

I add more information

Here is the JSFiddle link link and you can see that it's not working the styling of the input. What am I doing wrong?

Answer 1

Don't create class or id starting with numbers...

See your fiddle with an extra i (the letter doesn't matters)
http://jsfiddle.net/Sr9Vx/1/

Edit:
I just see the link that @Trey give's you in his comment (Which characters are valid in CSS class names/selectors?) there you can find a few explanations & link's with the reason and even better link's with official references.

Example:
http://www.w3.org/TR/2003/WD-css3-syntax-20030813/#characters
http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier

Good luck with your proyect.