Character Sheet merging for a Custom sheet [Help Please!]

So I mainly like the D&D 3.5 sheet that R20 has but I also like the D20 Modern sheet. I have created my own system and I have been trying to merge aspects of both sheets together and failing at it quite hard since I know pretty much nothing about CSS and HTML coding. I've read through a lot of things and I just think I'm failing hard. I've tried coping coding from both sheets with the 3.5 sheet as the main and scooping the class table that Modern has for use, as well as adding a seventh attribute called Appearance (aka App). This just seems to be breaking things on top of the fact I'm trying to add two new skills, one called "Seduction" and the other "Sexual Techniques" (Yes I know pervy, but I run a 18+ campaign) those skills take the modifiers from multiple attributes and I don't even know if it's possible to do that. Seduction uses Charisma and Appearance, and Sexual Techniques uses Dexterity, Appearance, and Constitution. To go with those I'm wanting to remove Racial Abilities, Class Abilities and Feats from the front page and have them under their own tab that is for those three as well as Flaws and Traits, but I want to use the set up that D20 Modern has where you fill out the name of what ever it is, then click a box and it opens a spot for you to fill out a description of what that thing does. Suffice to say I'm not making really any progress at it and was hoping someone would be able to help in merging those pieces and adding those new things? Also, I'm thinking I might be having issues because I'm dyslexic and the stuff I'm reading to help might not be translating properly in my head. I'm not sure.

Everything you've mentioned that you are trying to do is possible. It sounds like you are trying to do too much at once. Take the D&D 3.5 sheet as the basis. Then make ONE change to it, and see if it works. If it does, move on to the next change. If it doesn't work, post what you tried (not the full sheet, just the bit you are trying to do), and we'll try to help. 

Alright So I kinda said screw it on the 3.5 editing. Got tinkering with the D20 Modern sheet and it's much more agreeable when it comes to changing things. So I've been working on it. Though I've run into a weird issue I'm not sure if it's in the HTML or the CSS.  As you can see there is a weird gap between Silver, Copper, and Dollar. But the gap goes away between Dollar and Credit. Not really sure at all as to how I'm suppose to fix that. x.x

Would need to see the HTML and CSS code.  Looks like the "Silver" label is off, too. Should be fairly easy to correct, but I'm guessing you removed 2 or 3 other types of money...

Nope, those spots had only "Base" and "Other" spots there to effect it. I added all those types. I also I can easily get the HTML code, but I'm not goign to lie, where that spot is on the CSS code, I haven't a clue.

Here is the HTML:                 <tr>                     <th><button type="roll" class="sheet-skillbtn" name="roll_Wealth" value="/e attempts to buy something: [[@{Wealth}]]" >Wealth</button></th>                     <th><input type="number" class="sheet-ability" name="attr_Wealth" value="@{Wealth-Dollar}+@{Wealth-Credit}" disabled="true"/></th>                     <td><input type="number" class="sheet-number" name="attr_Wealth-Platinum" value="0" /></td>                     <td><input type="number" class="sheet-number" name="attr_Wealth-Gold" value="0"/></td>                     <td><input type="number" class="sheet-number" name="attr_Wealth-Silver" value="0"/></td>                     <td><input type="number" class="sheet-number" name="attr_Wealth-Copper" value="0"/></td>                     <td><input type="number" class="sheet-number" name="attr_Wealth-Dollar" value="0"/></td>                     <td><input type="number" class="sheet-number" name="attr_Wealth-Credit" value="0"/></td>                 </tr>                 <tr>                     <th></th>                     <th class="sheet-heading">Total</th>                     <th class="sheet-heading">Platinum</th>                     <th class="sheet-heading">Gold</th>                     <th class="sheet-heading">Silver</th>                     <th class="sheet-heading">Copper</th>                     <th class="sheet-heading">Dollar</th>                     <th class="sheet-heading">Credit</th>                 </tr> Here is the CSS (I think this is the right section): } input[type=number] {     -moz-appearance:textfield; } input[type=number]:hover {     -moz-appearance:none; } .sheet-ability {     background: white;     border:none;     border-radius:5px;     box-shadow:none;     text-align:center;     color:black:     font-size:1.2em;     margin:2px; } .sheet-ability[type="text"] {     background: white;     border:none;     border-radius:5px;     box-shadow:none;     text-align:center;     color:black:     font-size:1.2em;     margin:2px;     width:100px;     } select.sheet-number {      background: transparent;     width:80px;     border:none;     border-radius:0px;     margin-bottom: 0;     -webkit-appearance: none;     -moz-appearance: none;     text-indent: 1px;     text-overflow: '';      padding-top:0;     font-size:0.9em; } .sheet-type {     border:none;     border-radius:0px;     box-shadow:none;     text-align:center;     background: transparent;     width:130px; } .sheet-Rating[type="number"]:-ms-input-placeholder, .sheet-Specialty[type="number"]:-ms-input-placeholder{     font-size:0.5em; }  .sheet-Rating[type="number"]:placeholder, .sheet-Specialty[type="number"]:placeholder{     font-size:0.5em; }  .sheet-Rating[type="number"]::-webkit-input-placeholder, .sheet-Specialty[type="number"]::-webkit-input-placeholder{     font-size:0.5em;     } .sheet-Rating[type="number"]:-moz-placeholder, .sheet-Specialty[type="number"]:-moz-placeholder{     font-size:0.5em; }  .sheet-Rating[type="number"]::-moz-placeholder, .sheet-Specialty[type="number"]::-moz-placeholder {     font-size:0.5em; }  select.sheet-Specialty {      width:90px;     margin-bottom: 0;     -webkit-appearance: none;     -moz-appearance: none;     text-indent: 1px;     text-overflow: '';      padding-top:0;     font-size:0.7em; } Unless you'd rather I post the whole sheets code for both HTML or CSS in this case?

There's a table row above the code you posted that is directly or indirectly setting the width of the cells for the entire table. My bet is it is the black row that has "Total Base Other" in it. Can you post the whole code of that section from <table> tag to </table> tag?

Yeah, I saw what you're talking about. It has to do with the leadership points up there. I tried editing it to see if it would fix the lower area and it doesn't. Here is the code though: <h4>Other</h4>             <table class="sheet-tableII">                 <tr>                     <th></th>                     <th class="sheet-heading">Total</th>                     <th class="sheet-heading">Base</th>                     <th class="sheet-heading">Other</th>                     <th class="sheet-heading"><div style="width:75px;"></div></th>                     <th class="sheet-heading"><div style="width:75px;"></div></th>                 </tr>                 <tr>                     <th><button type="roll" class="sheet-skillbtn" name="roll_Leadership" value="/e rolls Leadership [[1d20+@{Leadership}]]" >Leadership</button></th>                     <th><input type="number" class="sheet-ability" name="attr_Leadership" value="[[@{Leadership-Base}+@{Leadership-Other}]]" disabled="true"/></th>                     <td><input type="number" class="sheet-number" name="attr_Leadership-Base" value="0" /></td>                     <td><input type="number" class="sheet-number" name="attr_Leadership-Other" value="0"/></td>                 </tr>                 <tr>                     <th><button type="roll" class="sheet-skillbtn" name="roll_Action_Point" value="/e uses an Action Point! [[@{Action_Point-die}]]" >Action Points</button></th>                     <th><input type="number" class="sheet-ability" name="attr_Action_Point" value="0"/></th>                     <td><select class="sheet-number" name="attr_Action_Point-die" style="width:40px;">                             <option value="1d6" selected>d6</option>                             <option value="2d6k1">2d6</option>                             <option value="3d6k1">3d6</option>                             <option value="1d8k1">1d8</option>                             <option value="2d8k1">2d8</option>                             <option value="3d8k1">3d8</option>                         </select>                     </td>                 </tr>                 <tr>                     <th><button type="roll" class="sheet-skillbtn" name="roll_Wealth" value="/e [[@{Wealth}]]" >Wealth</button></th>                     <td><input type="number" class="sheet-number" name="attr_Wealth-Platinum" value="0" /></td>                     <td><input type="number" class="sheet-number" name="attr_Wealth-Gold" value="0"/></td>                     <td><input type="number" class="sheet-number" name="attr_Wealth-Silver" value="0"/></td>                     <td><input type="number" class="sheet-number" name="attr_Wealth-Copper" value="0"/></td>                     <td><input type="number" class="sheet-number" name="attr_Wealth-Dollar" value="0"/></td>                     <td><input type="number" class="sheet-number" name="attr_Wealth-Credit" value="0"/></td>                 </tr>                 <tr>                     <th></th>                     <th class="sheet-heading">Platinum</th>                     <th class="sheet-heading">Gold</th>                     <th class="sheet-heading">Silver</th>                     <th class="sheet-heading">Copper</th>                     <th class="sheet-heading">Dollar</th>                     <th class="sheet-heading">Credit</th>                 </tr>             </table>

You have some <div>s with defined widths in there and that is affecting the lower cells. The best fix is to convert the table to <div>s and <span>s and use CSS for positioning and alignment, but that can take some time and can be frustrating. In the meantime, change: <th class="sheet-heading"><div style="width:75px;"></div></th> <th class="sheet-heading"><div style="width:75px;"></div></th> to <th class="sheet-heading"></th> <th class="sheet-heading"></th>

Oh! Nice, that did fix things. Thank you so much!

Now for another part I'm getting weird results with. Here is the HTML code for that section: <!-- Tab 3 Feats/Talents/Traits/Flaws --> <div class="sheet-section-3">     <div class='sheet-2colrow'>         <h3>Feats/Talents/Traits/Flaws</h3>         <div class='sheet-col'>             <h4>Feats</h4>             <fieldset class="repeating_Feats">                 <table class="sheet-table">                     <tr>                         <td><button type="roll" class="sheet-btn" name="roll_Feat-show" value="&{template:show}{{character= @{character_name}}}  {{title= @{Feat-name}}}{{details= @{Feat-details}}}" style="width:60px;">Show</button></td>                         <td><input type="text" class="sheet-number" name="attr_Feat-name" placeholder="Feat Name" style="width:200px;"/></td>                         <th><input type="checkbox" class="sheet-bigcheck" name="attr_Feat-show" value="1"/><span></span></th>                     </tr>                 </table>                 <input type="checkbox" class="sheet-hidden sheet-hider" name="attr_Feat-show" value="1"/><span></span>                 <div class="sheet-hold">                     <table class="sheet-table" style="width:100%;">                         <tr>                             <td><textarea class="sheet-notes" name="attr_Feat-details" wrap="soft" placeholder="Feat Details"></textarea></td>                         </tr>                     </table>                 </div>             </fieldset>         </div>         <div class='sheet-col'>             <h4>Talents</h4>             <fieldset class="repeating_Talents">                 <table class="sheet-table">                     <tr>                         <td><button type="roll" class="sheet-btn" name="roll_Talent-show" value="&{template:show}{{character= @{character_name}}}  {{title= @{Talent-name}}}{{details= @{Talent-details}}}" style="width:60px;">Show</button></td>                         <td><input type="text" class="sheet-number" name="attr_Talent-name" placeholder="Talent Name" style="width:200px;"/></td>                         <th><input type="checkbox" class="sheet-bigcheck" name="attr_Talent-show" value="1"/><span></span></th>                     </tr>                 </table>                 <input type="checkbox" class="sheet-hidden sheet-hider" name="attr_Talent-show" value="1"/><span></span>                 <div class="sheet-hold">                     <table class="sheet-table" style="width:100%;">                         <tr>                             <td><textarea class="sheet-notes" name="attr_Talent-details" wrap="soft" placeholder="Talent Details"></textarea></td>                         </tr>                     </table>                 </div>             </fieldset>         </div>         <div class='sheet-col'>             <h4>Traits</h4>             <fieldset class="repeating_Traits">                 <table class="sheet-table">                     <tr>                         <td><button type="roll" class="sheet-btn" name="roll_Trait-show" value="&{template:show}{{character= @{character_name}}}  {{title= @{Trait-name}}}{{details= @{Trait-details}}}" style="width:60px;">Show</button></td>                         <td><input type="text" class="sheet-number" name="attr_Trait-name" placeholder="Trait Name" style="width:200px;"/></td>                         <th><input type="checkbox" class="sheet-bigcheck" name="attr_Trait-show" value="1"/><span></span></th>                     </tr>                 </table>                 <input type="checkbox" class="sheet-hidden sheet-hider" name="attr_Trait-show" value="1"/><span></span>                 <div class="sheet-hold">                     <table class="sheet-table" style="width:100%;">                         <tr>                             <td><textarea class="sheet-notes" name="attr_Trait-details" wrap="soft" placeholder="Trait Details"></textarea></td>                         </tr>                     </table>                 </div>             </fieldset>         </div>         <div class='sheet-col'>             <h4>Flaws</h4>             <fieldset class="repeating_Flaws">                 <table class="sheet-table">                     <tr>                         <td><button type="roll" class="sheet-btn" name="roll_Flaw-show" value="&{template:show}{{character= @{character_name}}}  {{title= @{Flaw-name}}}{{details= @{Flaw-details}}}" style="width:60px;">Show</button></td>                         <td><input type="text" class="sheet-number" name="attr_Flaw-name" placeholder="Flaw Name" style="width:200px;"/></td>                         <th><input type="checkbox" class="sheet-bigcheck" name="attr_Flaw-show" value="1"/><span></span></th>                     </tr>                 </table>                 <input type="checkbox" class="sheet-hidden sheet-hider" name="attr_Flaw-show" value="1"/><span></span>                 <div class="sheet-hold">                     <table class="sheet-table" style="width:100%;">                         <tr>                             <td><textarea class="sheet-notes" name="attr_Flaw-details" wrap="soft" placeholder="Flaw Details"></textarea></td>                         </tr>                     </table>                 </div>             </fieldset>         </div>     </div> </div> As you can see, instead of them being side by side it several on top with one on the side.