I hope stupid css questions on character sheets are allowed

I'm a backend engineer so I'm definitely fumbling around with the html/css for custom character sheets.  I defined a character sheet with a bunch of skills: <div class="skills">     <div class="skillrow">         <div class="skilllabel"><label>Athletics</label></div>         <div class="skillvalue"><input type="number" name="skill_athletics"></div>     </div>      <div class="skillrow">         <div class="skilllabel"><label>Combat</label></div>         <div class="skillvalue"><input type="number" name="skill_combat"></div>     </div>      <div class="skillrow">         <div class="skilllabel"><label>Engineering</label></div>         <div class="skillvalue"><input type="number" name="skill_engineering"></div>     </div>      <div class="skillrow">         <div class="skilllabel"><label>Piloting</label></div>         <div class="skillvalue"><input type="number" name="skill_piloting"></div>     </div>      <div class="skillrow">         <div class="skilllabel"><label>Science</label></div>         <div class="skillvalue"><input type="number" name="skill_science"></div>     </div> </div> And I want those skill labels and values to be in a row, I tried various css to make that happen (from a stack overflow question).  My css doesn't seem to be applied: .charsheet skillrow {  display: table;  width: 100%;  table-layout: fixed;  border-spacing: 10px; } .charsheet skilllabel {     display: table-cell;     background-color: red;     font-size: 200%; } .charsheet skillvalue {     display: table-cell;     background-color: red; } I've tried it without the .charsheet and just used the classes like .skillvalue but no dice. I was looking at the kitchen sink example and thought maybe .charsheet was an implicit class.  Can anyone point me in the right direction?

Note that by default, any HTML classes defined in your HTML layout which don't begin with "attr_", "roll_" or "repeating_" will be prefixed with "sheet-". So for example, if you want to style some of your input tags to be shorter than others and you define the HTML as "&lt;input class='shortfield'&gt;", when processing your layout it will be changed to "&lt;input class='sheet-shortfield'&gt;". So basically, you should probably prefix your classes in your HTML and CSS with "sheet-" to avoid confusion. &nbsp; &nbsp; See:&nbsp; <a href="https://wiki.roll20.net/Building_Character_Sheets#CSS.2FStyling" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets#CSS.2FStyling</a> Basically, this should work: .charsheet sheet- skillrow { &nbsp;display: table; &nbsp;width: 100%; &nbsp;table-layout: fixed; &nbsp;border-spacing: 10px; } .charsheet sheet- skilllabel { &nbsp; &nbsp; display: table-cell; &nbsp; &nbsp; background-color: red; &nbsp; &nbsp; font-size: 200%; } .charsheet sheet- skillvalue { &nbsp; &nbsp; display: table-cell; &nbsp; &nbsp; background-color: red; }

Make sure your class names begin with "sheet-"&nbsp; So html use class="sheet-foo" and in css use .sheet-foo

(hehehehe, Vince!)

;-P

Dammit, I didn't RTFM thoroughly... thanks guys!

=D&nbsp; No worries.&nbsp; Frontend is not as straight forward as backend work with all the namby-pamby CSS and HTML crap.&nbsp; You have to wonder if the designers actually thought about the use it would be put to before they "designed" it. =D

Your html has another issue, not related to this problem. When defining attributes, their names must start with "attr_" or the values wont be saved. This: &lt;div class="skillvalue"&gt;&lt;input type="number" name="skill_athletics"&gt;&lt;/div&gt; should be &lt;div class="skillvalue"&gt;&lt;input type="number" name=" attr_ skill_athletics"&gt;&lt;/div&gt; Roll20 will recognise this as an attribute named "skill_athletics". When you use attribute calls in autocalc fields or sheet workers, leave off the "attr_". It's just used with html data fields like input, select and textarea.

Oh! Thanks for catching that, I was just trying to get things where I wanted them, I probably would have run into that issue as soon as I got back to working on the sheet.