CSS problems

I can't find this issue anywhere else in the forums, though it is yet another problem I'm having with the custom sheet editor. I had my sheet almost exactly the way I wanted it, with table, row and td borders the color I wanted and laid out the way I liked it. However, after I hit "save changes" all my formatting disappeared. The html and CSS are intact, but now changing it does nothing to the sheet. I've also tried using inline CSS (on each table row & data cell), but to no avail. Formatting seems to be stripped out. Has anyone else had this problem?

I have not. Are you doing everything in the online editor on roll20? I do all my coding offline and cut and paste into the roll20 editor so I have it saved externally and can troubleshoot a little easier by just rolling back the changes that I made if something breaks. Can you share your html/css code? Perhaps someone can spot the problem?

Here's what I'm talking about: The sheet as it is supposed to look: The sheet as it appears after saving the changes: Note that the table parameters are completely missing and seem to default to no borders, no background etc. Here's the code: (sorry no formatting indents; notepad stripped them out) <table style="width: 100%; background-color: #cccccc"> <tr> <td style="width: 100%; text-align: center"> <span style="font-weight: bold; font-size: 20px"> YARPS Character Sheet 1.0 </span> </td> </tr> </table> <hr> <table style="table-width: 100%"> <tr> <td style="width: 400px; height: 10px">Character Name</td> <td style="width: 400px; height: 10px">Race</td> <td style="width: 400px; height: 10px">Racial Variant </td> </tr> <tr> <td style="height: 30px"><input type="text" name="attr_ChrName" style="width: 250px"></td> <td style="height: 30px"><input type="text" name="attr_race" style="width: 250px"></td> <td style="height: 30px"><input type="text" name="attr_variant" style="width: 250px"></td> </tr> <tr> <td style="height: 10px">Class </td> <td style="height: 10px">Level </td> <td style="height: 10px">Experience </td> </tr> <tr> <td> <select style="width: 200px; height: 30px" name="attr_class"> <option style="width: 200px" value="Fighter">Fighter</option> <option style="width: 200px" value="Hunter">Hunter</option> <option style="width: 200px" value="Caster">Caster</option> <Option style="width: 200px" value="Rogue">Rogue</Option> <option style="width: 200px" value="Priest">Priest</option> </select> </td> <td><input type="number" name="attr_level" style="width: 250px"></td> <td><input type="text" name="attr_Experience" style="width: 250px"></td> </tr> </table> <hr> <!-- Put the content for the first column here --> <table style="table-width: 100%"> <tr> <td style="width: 7%">Strength</td> <td style="width: 7%"><input type="number" name="attr_Str"></td> <td style="width: 7%">Resilience</td> <td style="width: 7%"><input type="number" name="attr_Res"></td> <td style="width: 7%">Attack Base</td> <td style="width: 7%"><input type="number" name="attr_AtkBase"></td> <td style="width: 7%">Guild </td> <td style="width: 7%"><input name="name" name="attr_Guild"></td> </tr> <tr> <td>Agility</td> <td><input type="number" name="attr_Agi"></td> <td>Alertness</td> <td><input type="number" name="attr_Alt"></td> <td>Melee</td> <td> <input type="number" name="attr_MelAtk"></td> <td>Fame</td> <td><input type="number" name="attr_Fame"></td> </tr> <tr> <td>Wisdom</td> <td> <input type="number" name="attr_Wis"></td> <td>Willpower</td> <td><input type="number" name="attr_Wil"></td> <td>Ranged</td> <td> <input type="number" name="attr_RanAtk"></td> <td>Infamy</td> <td><input type="number" name="attr_Infamy"></td> </tr> <tr> <td>Intelligence</td> <td> <input type="number" name="attr_Int"></td> <td>Savvy</td> <td><input type="number" name="attr_Sav"></td> <td>Defense Base</td> <td> <input type="number" name="attr_Def"></td> <td style="width: 7%">Trust</td> <td style="width: 7%"> <input type="number" name="attr_Trust"></td> </tr> <tr> <td>Finesse</td> <td> <input type="number" name="attr_Fin"></td> <td>Dignity</td> <td><input type="number" name="attr_Dig"></td> <td>Encumbrance</td> <td><input type="number" name="attr_Enc"></td> <td colspan="2" rowspan="2"> <table> <tr> <td style="height: 10px; text-align: center">Gold</td> <td style="height: 10px; text-align: center">Silver</td> <td style="height: 10px; text-align: center">Copper</td> </tr> <tr> <td style="text-align: center"><input type="number" name="attr_Gold"></td> <td style="text-align: center"><input type="number" name="attr_Silver"></td> <td style="text-align: center"><input type="number" name="attr_Copper"></td> </tr> </table> </td> </tr> <tr> <td>Charisma</td> <td> <input type="number" name="attr_Cha"></td> <td> Stamina</td> <td> <input type="number" name="attr_Sta"></td> <td> <select style="width: 100px; height: 30px" name="attr_EssenceType"> <option style="width: 90px" value="power">Power</option> <option style="width: 90px" value="focus">Focus</option> <option style="width: 90px" value="mana">Mana</option> <option style="width: 90px" value="guile">Guile</option> <option style="width: 90px" vallue="faith">Faith</option> </select> </td> <td><input style="width: 50px" type="number" name="attr_essence"></td> </tr> </table> <hr> <table> <tr> <td>Melee Weapon <input type="text" name="attr_melweap"></td> <td>Type <select name="attr_melweaptype"> <option value="Blunt">Blunt</option> <option value="sharp">Sharp</option> <option value="pierce">Pierce</option> </select> </td> <td>Damage <input type="number" name="attr_melweapdam"></td> <td>Hand <input type="number" name="attr_melweaphand"></td> <td>AP <input type="number" name="attr_melweapAP"></td> <td>Action <select name="attr_melweaponact"> <option value="simple">Simple</option> <option value="normal">Normal</option> <option value="Complex">Complex</option> <option value="Full">Full</option> </select> </td> </tr> </table> <table> <tr> <td>Ranged Weapon <input type="text" name="attr_ranweap"></td> <td>Range<input type="number" name="attr_ranweaprange"></td> <td>Damage <input type="number" name="attr_ranweapdam"></td> <td>Hand <input type="number" name="attr_ranweaphand"></td> <td>ROF<input type="number" name="attr_ranweaprof"></td> <td>Reload <select name="attr_ranweaponreload"> <option value="simple">Simple</option> <option value="normal">Normal</option> <option value="Complex">Complex</option> <option value="Full">Full</option> </select> </td> <td>Restrictions <input type="text" name="attr_ranweapres" style="width: 100px"></td> </tr> </table> <table> <td>Armor <input type="text" name="attr_armor"></td> <td>Type <select name="attr_armortype" style="width: 140px"> <option value="cloth">Cloth</option> <option value="leather">Leather</option> <option value="mail">Mail</optoin> <option value="scale">Scale</option> <option value="plate">Plate</option> </select> </td> <td>Rating (Blunt) <input type="number" name="attr_armorblunt"></td> <td>Rating (Sharp) <input type="number" name="attr_armorsharp"></td> <td>Rating (Pierce) <input type="number" name="attr_armorpierce"></td> <td>Encumbrance <input type="number" name="attr_armorenc"></td> </table> And the CSS: body { background-color: #dddddd; } table { border-collapse: separate; background-color: #eeeeee; border-width: 2px; border-color: #333333; border-style: outset; padding: 2px; width: 100%; } td { border-width: 2px; border-color: #eeeeee; border-style: outset; padding: 2px; height: 35px; } tr { background-color: #cccccc; border-width: 2px; border-color: #cccccc; border-style: outset; padding: 4px; } .center { position: absolute; text-align: center; }

Have you looked at it in game? It might show up like you want it.

Aha! You're right, HoneyBadger! Apparently, it's the Preview panel on the Campaign Settings page that isn't displaying properly. In-game, it looks fine. I still can't alter the body elements using the css though. I tried making the background of the body of the page different colors, but nothing worked. I'm assuming (possibly in error) that this has something to do with the ability to place character sheet pictures underneath the html and css elements?

Jador said: I still can't alter the body elements using the css though. I tried making the background of the body of the page different colors, but nothing worked. I'm assuming (possibly in error) that this has something to do with the ability to place character sheet pictures underneath the html and css elements? It's because the page body is not the same thing as the character sheet's "body". The selector body matches against the <body> tag in the HTML document, which contains the entire VTT. To protect against character sheets modifying the display of the VTT, all selectors are prefixed with .charsheet . This means that when viewing the sheet, your CSS looks like: .charsheet body { background-color: #dddddd; } Naturally, the page's <body> tag is not a descendant of a tag with the "charsheet" class. If you simply want to color the background of the whole character sheet, use .charsheet instead of body .