So, here's my HTML: <div class='sheet-col sheet-red' style='width: 400px; padding: 5px; border-radius: 10px; font-weight: bold; font-size: 2em; margin-top: -10px;'>
Combat Stats<br />
<div class='sheet-row' style='width: 398px; margin-top: 3px; background-color: white; border: none;'>
<div class='sheet-row' style='width: 100%; padding: 5px; vertical-align: top;'>
<div class='sheet-combatstat' style='width:198px; text-align: left; height: 85px;'>
Mode 1: <input type='text' name='attr_mode1' style="width:145px; border: none; color: #801421;" /><br />
<span style="color: black;">Affinity: </span><input type="text" name="attr_affinity1" style="width:150px; border: none; color: black;"/><br />
<textarea name="attr_modedesc1" placeholder="description" style="width: 95%; color: black; border: none; height:25px;"></textarea>
</div>
<div class='sheet-combatstat' style='width:50px; margin-left: -7px; height: 85px;'>
ROLL<br />
<input type="number" style="border: none; font-size: 2em; color: black; font-weight: bold; width:47px; height: 68px;" name="attr_roll1" />
</div>
<div class='sheet-combatstat' style='width:45px; margin-left: -7px; height: 85px;'>
DX<br />
<input type="number" style="border: none; font-size: 2em; color: black; font-weight: bold; width:43px; height: 68px;" name="attr_dx1" />
</div>
<div class='sheet-combatstat' style='width:50px; margin-left: -7px; border-right: none; height: 85px;'>
END<br />
<input type="number" style="border: none; font-size: 2em; color: black; font-weight: bold; width:47px; height: 68px;" name="attr_end1" />
</div>
</div>
</div>
</div>
Here's the CSS: .charsheet .sheet-combatstat {
display: inline-block;
background-color: white;
color: #801421;
border: 1px solid #801421;
border-top: none;
border-left: none;
padding: 5px;
margin: 0px;
font-size: .5em;
font-weight: normal;
text-align: center;
}
And here's what it's doing: Why the heck are the Roll, Dx and End divs lower than the first? When I was setting the divs up with nothing in them, they all aligned perfectly. Now...not so much. :-/ I've even tried doing a margin-top: -10px; to get those pesky divs to move higher, but that doesn't work, either.
