Finderski said: Can you post an image, along with the html and css code? Also, what browser are you using? Right, sorry for taking so long. Busy weekend. anyway, here's the screenshot: And here's the HTML and CSS respectfully. <input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="Character"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Warbird"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Map of Azure"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span>
<div class="sheet-tab-content sheet-tab1">
<h1>Character</h1>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<div class='sheet-2colrow'>
<!--Character info-->
<div class='sheet-col'>
<label>Character Name:</label><input type="text" name="attr_character_name"/>
<label>Callsign:</label><input type="text" name="attr_callsign"/>
<label>Player Name:</label><input type="text" name="attr_player_name"/>
<label>Nationality:</label><input type="text" name="attr_nationality"/>
<label>Squadron:</label><input type="text" name="attr_squadron"/>
<label>Flight:</label><input type="text" name="attr_squadron"/>
<label>Backround:</label><input type="text" name="attr_backround"/>
<label>Appearance & Mannearisms:</label><textarea name="attr_appearance_mannearisms"></textarea>
<!--health track-->
<div>
<h3>Health Track</h3>
<table border="1px">
<tr>
<td colspan="2">Health Mod-></td>
<td colspan="2"><input type="radio" value="0" checked="true" name="attr_health_mod">0</td>
<td colspan="2"><input type="radio" value="-1" name="attr_health_mod">-1</td>
<td colspan="2"><input type="radio" value="-2" name="attr_health_mod">-2</td>
<td colspan="2"><input type="radio" value="-3" name="attr_health_mod">-3</td>
</tr>
<tr>
<td><input type="number" name="attr_h1" style="width: 36px"/></td>
<td><input type="number" name="attr_h2" style="width: 36px"/></td>
<td><input type="number" name="attr_h3" style="width: 36px"/></td>
<td><input type="number" name="attr_h4" style="width: 36px"/></td>
<td><input type="number" name="attr_h5" style="width: 36px"/></td>
<td><input type="number" name="attr_h6" style="width: 36px"/></td>
<td><input type="number" name="attr_h7" style="width: 36px"/></td>
<td><input type="number" name="attr_h8" style="width: 36px"/></td>
<td><input type="number" name="attr_h9" style="width: 36px"/></td>
<td><input type="number" name="attr_h0" style="width: 36px"/></td>
</tr>
<tr>
<td><input type="checkbox" name="attr_0a"/></td>
<td><input type="checkbox" name="attr_-1a"/></td>
<td><input type="checkbox" name="attr_-1b"/></td>
<td><input type="checkbox" name="attr_-2a"/></td>
<td><input type="checkbox" name="attr_-2b"/></td>
<td><input type="checkbox" name="attr_-3a"/></td>
<td><input type="checkbox" name="attr_-3b"/></td>
<td><input type="checkbox" name="attr_-3c"/></td>
<td><input type="checkbox" name="attr_-3d"/></td>
<td><input type="checkbox" name="attr_-3e"/></td>
</tr>
<tr>
<td><input type="checkbox" name="attr_0aa"/></td>
<td><input type="checkbox" name="attr_-1aa"/></td>
<td><input type="checkbox" name="attr_-1ab"/></td>
<td><input type="checkbox" name="attr_-2aa"/></td>
<td><input type="checkbox" name="attr_-2ab"/></td>
<td><input type="checkbox" name="attr_-3aa"/></td>
<td><input type="checkbox" name="attr_-3ab"/></td>
<td><input type="checkbox" name="attr_-3ac"/></td>
<td><input type="checkbox" name="attr_-3ad"/></td>
<td><input type="checkbox" name="attr_-3ae"/></td>
</tr>
</table>
</div>
<!--Skills-->
<h3>Skills</h3>
<fieldset class="repeating_skill">
<table border="1px" class="skills">
<thead>
<tr>
<th>Knack</th>
<th>Skills</th>
<th>Level</th>
<th>Stat</th>
<th>Roll</th>
<th>XP</th>
</tr>
</thead>
<tbody>
<td><input type="checkbox"/></td>
<td><input type="text" name="attr_skill_name" style="width: 187px"/></td>
<td><input type="number" name="attr_skill_level"/></td>
<td>
<select name="attr_stat_for_skill" style="width: 64px">
<option value="@{body}">Body</option>
<option value="@{mind}">Mind</option>
<option value="@{spirit}">Spirit</option>
<option value="@{sa}">SA</option>
</select>
</td>
<td>
<button type="roll" value="/roll 1d6 + @{stat_for_skill} + @{skill_level} + @{health_mod}"></button>
</td>
<td><input type="number" name"attr_xp_level"/></td>
</tbody>
</table>
</fieldset>
</div>
<!--Start of Column 2-->
<div class='sheet-col'>
<!--Primary Stats-->
<h3>Stats</h3>
<div class='sheet-2colrow'>
<div class='sheet-col'>
<label>Body:</label><input type="number" name="attr_body"/><button type="roll" value="/roll 1d6 + @{body} + @{health_mod}"></button>
<label>Mind:</label><input type="number" name="attr_mind"/><button type="roll" value="/roll 1d6 + @{mind} + @{health_mod}"></button>
<label>Spirit:</label><input type="number" name="attr_spirit"/><button type="roll" value="/roll 1d6 + @{spirit} + @{health_mod}"></button>
<label>Stat Points:</label><input type="number" name="attr_stat_points"/>
</div>
<div class='sheet-col'>
<label>Fame:</label><input type="number" name="attr_fame"/><button type="roll" value="/roll 1d6 + @{fame}"></button>
<label>Fame Points:</label><input type="number" name="attr_fame_points"/>
<label>Reserve:</label><input type="number" name="attr_reserve"/>
<label>Armor:</label><input type="number" name="attr_persinal_armor"/>
</div>
</div>
<!--Secondary Stats-->
<div>
<h3 align="centert">Secondary Stats</h3>
<table border="1px">
<thead>
<th>3+Body</th>
<th>+Athletics</th>
<th>=Defence</th>
</thead>
<tbody>
<td><input type="number" value="3 + @{body}" name="attr_body_defence" disabled="true"/></td>
<td><input type="number" name="attr_athletics"/></td>
<td><input Type="number" value="3 + @{body} + @{athletics}" name="attr_defence" disabled="true"/></td>
</tbody>
</table>
<table border="1px">
<thead>
<th>Spitit</th>
<th>+Armor</th>
<th>=Resist</th>
</thead>
<tbody>
<td><input type="number" value="@{spirit}" name="attr_spirit_resist" disabled="true"/></td>
<td><input type="number" value="@{persinal_armor}" name="attr_armor_resist" disabled="true"/></td>
<td><input type="number" value="@{spirit} + @{persinal_armor}" name="attr_resist" disabled="true"/></td>
</tbody>
</table>
<table border="1px">
<thead>
<th>3+Body</th>
<th>+Spirit</th>
<th>=Health</th>
</thead>
<tbody>
<td><input type="number" value="3 + @{body}" name="attr_body_health" disabled="true"/></td>
<td><input type="number" value="@{spirit}" name="attr_spirit_health" disabled="true"/></td>
<td><input type="number" value="3 + @{body} + @{spirit}"name="attr_health" disabled="true"/></td>
</tbody>
</table>
</div>
<div>
<!--Weapons table-->
<h3>Persinal Weapon</h3>
<fieldset class="repeating_weapon">
<table border="1px">
<tr>
<td>Weapon Name & Range:</td>
<td>Damage:</td>
<td>Ammo in Mag:</td>
<td>Total Ammo:</td>
</tr>
<tr>
<td><input type="text" name="attr_weapon_name" style="width: 187px"></td>
<td>Lead+<input type="number" name="attr_persinal_damage"/></td>
<td><input type="number" name="attr_ammo_mag"/></td>
<td><input type="number" name="attr_ammo_total"/></td>
</tr>
<tr>
<td>Stat:</td>
<td>Skill lvl:</td>
<td>Other Mods:</td>
<td>Total:</td>
</tr>
<tr>
<td>
<select name="attr_stat_for_weapon" style="width: 187px">
<option value="@{body}">Body</option>
<option value="@{mind}">Mind</option>
<option value="@{spirit}">Spirit</option>
</select>
</td>
<td><input type="number" name="attr_weapon_skill"/></td>
<td><input type="number" name="attr_attack_mods"/></td>
<td><button type="roll" value="/roll 1d6 + @{stat_for_weapon} + @{weapon_skill} + @{attack_mods} + @{health_mod}"><input type="number" value="@{stat_for_weapon} + @{weapon_skill} + @{attack_mods} + @{health_mod}" name="attr_weapon_total" disabled="true"/></button></td>
</tr>
</table>
</fieldset>
</div>
<div>
<h3>Advantages & Dasadvantages</h3>
<fieldset class="repeating_vantages">
<table>
<tr>
<td><label>Advantage:</label><input type"text" name="attr_advantage"/></td>
<td><label>Disadvantage:</label><input type"text" name="attr_disadvantage"/></td>
</tr>
</table>
</fieldset>
</div>
</div>
</div>
<div class="sheet-tab-content sheet-tab2">
<h1>Warbird</h1>
consectetur adipisicing elit
</div>
<div class="sheet-tab-content sheet-tab3">
<h1>Map of Azure</h1>
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</div>
<div class="sheet-tab-content sheet-tab4">
<h1>Fourth Tab</h1>
Ut enim ad minim veniam
</div>
div.sheet-tab-content { display: none; }
input.sheet-tab1:checked ~ div.sheet-tab1,
input.sheet-tab2:checked ~ div.sheet-tab2,
input.sheet-tab3:checked ~ div.sheet-tab3,
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }
input.sheet-tab {
width: 150px;
height: 20px;
position: relative;
top: 5px;
left: 6px;
margin: -1.5px;
cursor: pointer;
z-index: 1;
opacity: 0;
}
input.sheet-tab + span::before {
content: attr(title);
border: solid 1px #a8a8a8;
border-bottom-color: black;
text-align: center;
display: inline-block;
background: #fff;
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
width: 150px;
height: 20px;
font-size: 18px;
position: absolute;
top: 12px;
left: 13px;
}
input.sheet-tab:checked + span::before {
background: #dcdcdc;
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
border-bottom-color: #fff;
}
input.sheet-tab:not(:first-child) + span::before { border-left: none; }
input.sheet-tab2 + span::before {
background: #fee;
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);
left: 163px;
}
input.sheet-tab2:checked + span::before {
background: #dcdcdc;
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);
border-bottom-color: #fcecec;
}
input.sheet-tab3 + span::before { left: 313px; }
input.sheet-tab4 + span::before { left: 463px; }
div.sheet-tab-content {
border: 1px solid #a8a8a8;
border-top-color: #000;
margin: 2px 0 0 5px;
padding: 5px;
}
div.sheet-tab2 { background-color: #fcecec; }