I am currently working on a challenging form for players to save their personal character sheets in a database. To achieve this, I am incorporating numerous Input TAGs and utilizing tables for layout purposes, ensuring an organized and efficient design.
Each input is assigned specific classes that adjust 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;
}
Despite setting the classes, they seem to have minimal effect on the input tags. The dimensions default and applying IDs individually would become a laborious task. Some CSS rules only work with the !important declaration or not at all.
While using Dreamweaver in "Design view", everything appears well until switching it on, causing discrepancies in input format.
Things I've verified:
- No observable css conflicts affecting styles
- Inspecting through Chrome unveiled unknown widths applied to inputs
Could these anomalies be linked to user agent stylesheets? Evident from instances where Chrome yields unexpected values.
width: 84px;
.advanced table tr td - 50px
The mystery of the 84px persists without any identifiable rule attributing it. How could this issue be resolved?
More information added:
To witness the faulty stylings firsthand, access JSFiddle here. What corrective measures can be implemented?