Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×

Why is part of this centre-justified?

1646873250

Edited 1646876483
Code:             <tr>                 <td colspan="3" class="sheet-statlabel-big" style="font-size: 1.5em; width: 750px;">Skills</td>             </tr>             </table>     <button type="roll" value="/em attempts a ?{Skill name} check.
[[d100<?{skill rating}]]
Success = 1, Failure = 0" name="skill-roll" ></button> Universal Skill Roll     <div class="sheet-tabbed-panel">         <div class="sheet-row-panel">             <input type="checkbox" name="attr_OCC-Skill-toggle" class="sheet-arrow" />             <h4>D20 'Base' Skillset</h4>             <div class="body">             <table style="width:90%">                 <tr>                     <td style="width:10%"></td>                     <td style="width:25%"><h5>Name</h5></td>                     <td style="width:8%"><h5>Rating</h5></td>                     <td style="width:10%"><h5>+/ Level</h5></td>                     <td><h5>Notes</h5></td>                 </tr>             </table>             <fieldset class="repeating_skillocc">                 <table>                     <tr>                         <td><div class="sheet-ability"><button type="roll" value="@{character_name}'s @{skill_name} check:
/roll d100<@{skill_rating}"></button></div></td>                         <td><div class="sheet-ability"><input class="sheet-input-center-aligned" type="text" style="width:220px" value="" name="attr_skill_name" placeholder="Skill name"/></div></td>                         <td><div class="sheet-ability"><input class="sheet-input-center-aligned" type="number" value="" name="attr_skill_rating" /><b>%</b></div></td>                         <td><div class="sheet-ability"><input class="sheet-input-center-aligned" type="number" style="width:60px" value="+" name="attr_skill_level" /><b>%</b></div></td>                         <td><div class="sheet-ability"><input class="sheet-input-center-aligned" type="text" style="width:300px" value="" name="attr_skill_reference" placeholder="Notes here"/></div></td>                         <td></td>                     </tr>                 </table>             </fieldset>             </div>         </div>     </div>     <br>         </table>     <div class="sheet-tabbed-panel">         <div class="sheet-row-panel">             <input type="checkbox" name="attr_OCC-Skill-toggle" class="sheet-arrow" />             <h4>Elective Skills</h4>             <div class="body">             <table style="width:90%">                 <tr>                     <td style="width:10%"></td>                     <td style="width:25%"><h5>Name</h5></td> Screenshot:  "D20 Base Skillset" should be left-justified, like "Elective Skills" and the Universal Skill Roll should likewise be left-justified. Not sure what's going on.  Thanks! Dan
1646875672

Edited 1646875734
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
I'd recommend checking your CSS to make sure there isn't something hinky there. Additionally, code is easier to read in forum posts if you post it with code formatting, which is available from the wand button (the first button in the row at the top of the post edit panel).
1646876540

Edited 1646876561
Thanks Scott. Gotcha! (unfortunately, I have no idea what to do on the CSS page. I barely know what I'm doing on the HTML page!) I guess I'll have a go at it. 
1646877661
Kraynic
Pro
Sheet Author
If you put that bit of code in a fresh editor by itself and it is not centered, then you know you have something from the previous code that is affecting it. 
1646878084

Edited 1646878137
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Yep, what Kraynic said. To be fair, I'm not sure what CSS could be in there that would be affecting those two headers differently since they have pretty much the same selectors (e.g. classes, ids, etc) on them, but it's possible there's some sort of nth-child selector being used or something. Also, I'd really recommend not using tables for your sheet layout, especially when repeating sections are in the mix. Trying to mix the two is just asking for headaches from beating your head against styling and button functions. CSS flexbox, CSS Grid, and CSS Multi-column are much better ways to go. Additionally, they make it simple to create a responsive layout, which is difficult to impossible with a table.
1646906473
David
Sheet Author
Open developer tools (More Tools\Developer Tools) and make sure the Elements tab is selected. Then  right click "D20 Base Skillset" and select inspect.  In the right hand pane in the development tools click the computed tab and look for text-align.