One tab same, others differ

So, I am working with Raire R. on making a single Classic (ish) World of Darkness sheet, combining Werewolf, Wraith, Vampire, Mage, and Changeling all on one sheet.  The current set up is to have each type of supernatural creature to have their own set of sub-tabs (for each 'page' of the character sheet). My idea is to have the first sub tab in all five groups be the same page, listing all of the traits shared by all of the games (basic attributes and skills).  Duplicating does not work, because of the number of the radio buttons.  Anyone have any other ideas?

<input type="radio" name="attr_splat" value="1" class="sheet-splat sheet-vampire" checked> <input type="radio" name="attr_splat" value="2" class="sheet-splat sheet-werewolf"> <!-- etc, choose game type --> <input type="radio" name="attr_tab" value="1" class="sheet-tab sheet-tab-1 sheet-common-tab" checked> <input type="radio" name="attr_tab" value="2" class="sheet-tab sheet-tab-2 sheet-vampire-only"> <input type="radio" name="attr_tab" value="3" class="sheet-tab sheet-tab-3 sheet-vampire-only"> <input type="radio" name="attr_tab" value="4" class="sheet-tab sheet-tab-4 sheet-werewolf-only"> <!-- etc, choose tab --> <div class="sheet-tab sheet-tab-1"> <!-- common tab contents --> </div> <div class="sheet-tab sheet-tab-2"> <!-- vampire #1 tab contents --> </div> <div class="sheet-tab sheet-tab-3"> <!-- vampire #2 tab contents --> </div> <div class="sheet-tab sheet-tab-4"> <!-- werewolf #1 tab contents --> </div> <script type="text/worker"> on('change:splat', function() { setAttrs({ tab: 1 }); // reset to common tab when switching splats }); </script> .sheet-tab { display: none; } .sheet-common-tab, .sheet-vampire:checked ~ .sheet-vampire-only, .sheet-werewolf:checked ~ .sheet-werewolf-only { display: inline; } input.sheet-tab-1 ~ div.sheet-tab-1, input.sheet-tab-2 ~ div.sheet-tab-2, input.sheet-tab-3 ~ div.sheet-tab-3, input.sheet-tab-4 ~ div.sheet-tab-4 { display: block; } Should work fine.

This works great...except I am using the radio buttons hidden under spans for the tabs.  They are not disappearing when they are told too.   When I use just radio buttons, everything seems to work.  When I use nicely style radio buttons with tabs, I get nothing. Also, had to add 'checked' to the css.  Like so: input.sheet-tab-1 :checked ~ div.sheet-tab-1, input.sheet-tab-2 :checked ~ div.sheet-tab-2, input.sheet-tab-3 :checked ~ div.sheet-tab-3, input.sheet-tab-4 :checked ~ div.sheet-tab-4 { display: block; }

Duplicating does not work, because of the number of the radio buttons. I would ditch radio buttons for a simple select anyway. <select class="sheet-dots" name="attr_Streetwise"> <option value="0" selected>⚪⚪⚪⚪⚪</option> <option value="1">⚫⚪⚪⚪⚪</option> <option value="2">⚫⚫⚪⚪⚪</option> <option value="3">⚫⚫⚫⚪⚪</option> <option value="4">⚫⚫⚫⚫⚪</option> <option value="5">⚫⚫⚫⚫⚫</option> <option value="6">⚫ 6</option> <option value="7">⚫ 7</option> <option value="8">⚫ 8</option> <option value="9">⚫ 9</option> </select> own set of sub-tabs This might not work since IDs are out. With IDs you could have just made a single div (I think so at least). Btw. There's little amount of things that are duplicated in the cWoD systems. Check Abilities for example. Each system has it's own set, some even not in the same column. I would just ditch the idea. EDIT: The only way it could be done is to have: Common Tab Vampire Tab - Vampire Sub Tab1 - Vampire Sub Tab2 Werewolf Tab - Werewolf Sub Tab1 ...

Coal Powered Puppet said: This works great...except I am using the radio buttons hidden under spans for the tabs.  They are not disappearing when they are told too.   When I use just radio buttons, everything seems to work.  When I use nicely style radio buttons with tabs, I get nothing. Also, had to add 'checked' to the css.  Like so: input.sheet-tab-1 :checked ~ div.sheet-tab-1, input.sheet-tab-2 :checked ~ div.sheet-tab-2, input.sheet-tab-3 :checked ~ div.sheet-tab-3, input.sheet-tab-4 :checked ~ div.sheet-tab-4 { display: block; } Right, that was just a derp on my part. Hiding/showing the spans used for styling the radio buttons would work the same way, though: .sheet-tab, input.sheet-tab + span { display: none; } .sheet-common-tab + span, .sheet-vampire:checked ~ .sheet-vampire-only + span, .sheet-werewolf:checked ~ .sheet-werewolf-only + span { display: inline; }

Tried that.  It appears that is now hides the span, but shows the button that was hidden underneath (this time styled like the span).  I say appears because I am splashing around in the kiddie pool and aspiring to be the next Michael Phelps. I am going to have to strip the my code back down, build it back up around your code, and get back to you on it.  

Hide the input as well as the span. =P

Coal Powered Puppet said: Tried that.  It appears that is now hides the span, but shows the button that was hidden underneath (this time styled like the span).  I say appears because I am splashing around in the kiddie pool and aspiring to be the next Michael Phelps. At least you know how to swim CPP.  ;-P

I am seriously doing something wrong.  Any ideas what? Here is my html: <input type="radio" name="attr_splat" value="1" class="sheet-splat sheet-vampire" checked><span></span> <input type="radio" name="attr_splat" value="2" class="sheet-splat sheet-werewolf"><span></span> <input type="radio" name="attr_splat" value="3" class="sheet-splat sheet-mage"><span></span> <input type="radio" name="attr_splat" value="4" class="sheet-splat sheet-wraith"><span></span> <input type="radio" name="attr_splat" value="5" class="sheet-splat sheet-changeling"><span></span> <br> <!-- etc, choose game type --> <input type="radio" name="attr_tab" value="1" class="sheet-tab sheet-tab-1 sheet-common-tab" checked/><span class="sheet-tab"></span> <input type="radio" name="attr_tab" value="2" class="sheet-tab sheet-tab-2 sheet-vampire-only"/><span class="sheet-tab sheet-vampire-only"></span> <input type="radio" name="attr_tab" value="3" class="sheet-tab sheet-tab-3 sheet-vampire-only"/><span class="sheet-tab sheet-vampire-only"></span> <input type="radio" name="attr_tab" value="4" class="sheet-tab sheet-tab-4 sheet-werewolf-only"/><span class="sheet-tab sheet-werewolf-only"></span> <input type="radio" name="attr_tab" value="5" class="sheet-tab sheet-tab-5 sheet-werewolf-only"/><span class="sheet-ta sheet-werewolf-onlyb"></span> <input type="radio" name="attr_tab" value="6" class="sheet-tab sheet-tab-6 sheet-werewolf-only"/><span class="sheet-tab sheet-werewolf-only"></span> <input type="radio" name="attr_tab" value="7" class="sheet-tab sheet-tab-7 sheet-mage-only"/><span class="sheet-tab sheet-wraith-only"></span> <input type="radio" name="attr_tab" value="8" class="sheet-tab sheet-tab-8 sheet-wraith-only"/><span class="sheet-tab sheet-wraith-only"></span> <input type="radio" name="attr_tab" value="9" class="sheet-tab sheet-tab-9 sheet-changeling-only"/><span class="sheet-tab sheet-changeling-only"></span> <input type="radio" name="attr_tab" value="10" class="sheet-tab sheet-tab-10 sheet-changeling-only"/><span class="sheet-tab sheet-changeling-only"></span> <!-- etc, choose tab --> <div class="sheet-tab sheet-tab-1">     <!-- common tab contents -->     Common </div> <div class="sheet-tab sheet-tab-2">     <!-- vampire #1 tab contents -->     Vampire 1 </div> <div class="sheet-tab sheet-tab-3">     <!-- vampire #2 tab contents -->     Vampire 2 </div> <div class="sheet-tab sheet-tab-4">     <!-- werewolf #1 tab contents -->     Werewolf 1 </div> <div class="sheet-tab sheet-tab-5">     <!-- werewolf #1 tab contents -->     Werewolf 2 </div> <div class="sheet-tab sheet-tab-6">     <!-- werewolf #1 tab contents -->     Werewolf 3 </div> <div class="sheet-tab sheet-tab-7">     <!-- mage #1 tab contents -->     Mage 1 </div> <div class="sheet-tab sheet-tab-8">     <!-- wraith #1 tab contents -->     Wraith 1 </div> <div class="sheet-tab sheet-tab-9">     <!-- changeling #1 tab contents -->     changeling 1 </div> <div class="sheet-tab sheet-tab-10">     <!-- changeling #1 tab contents -->     changeling 2 </div> <script type="text/worker">     on('change:splat', function() {         setAttrs({ tab: 1 }); // reset to common tab when switching splats     }); </script> And here is my css: input.sheet-tab + span.sheet-tab, div.sheet-tab {     display: none;  } .sheet-common-tab + span.sheet-tab, .sheet-vampire:checked ~ .sheet-vampire-only + span.sheet-tab, .sheet-werewolf:checked ~ .sheet-werewolf-only + span.sheet-tab, .sheet-mage:checked ~ .sheet-mage-only + span.sheet-tab, .sheet-wraith:checked ~ .sheet-wraith-only + span.sheet-tab, .sheet-changeling:checked ~ .sheet-changeling-only + span.sheet-tab { display: inline; } input.sheet-tab-1:checked ~ div.sheet-tab-1, input.sheet-tab-2:checked ~ div.sheet-tab-2, input.sheet-tab-3:checked ~ div.sheet-tab-3, input.sheet-tab-4:checked ~ div.sheet-tab-4, input.sheet-tab-5:checked ~ div.sheet-tab-5, input.sheet-tab-6:checked ~ div.sheet-tab-6, input.sheet-tab-7:checked ~ div.sheet-tab-7, input.sheet-tab-8:checked ~ div.sheet-tab-8, input.sheet-tab-9:checked ~ div.sheet-tab-9, input.sheet-tab-10:checked ~ div.sheet-tab-10 { display: block; } .charsheet input.sheet-tab {     width: 50px;     height: 20px;     cursor: pointer;     opacity: 1; z-index: 9999;     margin-bottom:10px;     display:inline; } .charsheet span.sheet-tab { background: white;  color: black;  width: 50px; /*originally 87px*/     height: 20px; /*originally 20px*/     border:2px solid black;      } .charsheet input.sheet-tab:checked + span.sheet-tab {     background: black;  /*originally ab8b57*/       color: white; /*originally white*/     border:2px solid white;     }

Well... here's with duplication (the Common tab will need to be copy pasted to each div). <input type="radio" name="attr_splat" value="1" class="sheet-splat sheet-vampire" checked><span></span> <input type="radio" name="attr_splat" value="2" class="sheet-splat sheet-werewolf"><span></span> <!-- etc, choose game type --> <div class="sheet-tab sheet-vampire">     <!-- vampire tabs -->     Vampire All <input type="radio" name="attr_tabV" value="1" class="sheet-tab sheet-tab-V-1 sheet-vampire-only"/><span class="sheet-tab sheet-vampire-only"></span> <input type="radio" name="attr_tabV" value="2" class="sheet-tab sheet-tab-V-2 sheet-vampire-only"/><span class="sheet-tab sheet-vampire-only"></span> <input type="radio" name="attr_tabV" value="3" class="sheet-tab sheet-tab-V-3 sheet-vampire-only"/><span class="sheet-tab sheet-vampire-only"></span> <div class="sheet-tab sheet-tab-V-1"> <!-- common tab contents --> Common </div> <div class="sheet-tab sheet-tab-V-2"> <!-- vampire #1 tab contents --> Vampire 1 </div> <div class="sheet-tab sheet-tab-V-3"> <!-- vampire #2 tab contents --> Vampire 2 </div> </div> <div class="sheet-tab sheet-werewolf">     <!-- werewolf tabs -->     Werewolf All <input type="radio" name="attr_tabWW" value="1" class="sheet-tab sheet-tab-ww-1 sheet-werewolf-only"/><span class="sheet-tab sheet-werewolf-only"></span> <input type="radio" name="attr_tabWW" value="2" class="sheet-tab sheet-tab-ww-2 sheet-werewolf-only"/><span class="sheet-tab sheet-werewolf-only"></span> <input type="radio" name="attr_tabWW" value="3" class="sheet-tab sheet-tab-ww-3 sheet-werewolf-only"/><span class="sheet-tab sheet-werewolf-only"></span> <input type="radio" name="attr_tabWW" value="4" class="sheet-tab sheet-tab-ww-4 sheet-werewolf-only"/><span class="sheet-tab sheet-werewolf-only"></span> <div class="sheet-tab sheet-tab-ww-1"> <!-- common tab contents --> Common (Duplicate) </div> <div class="sheet-tab sheet-tab-ww-2"> <!-- werewolf #1 tab contents --> Werewolf 1 </div> <div class="sheet-tab sheet-tab-ww-3"> <!-- werewolf #1 tab contents --> Werewolf 2 </div> <div class="sheet-tab sheet-tab-ww-4"> <!-- werewolf #1 tab contents --> Werewolf 3 </div> </div> <script type="text/worker">     on('change:splat', function() {         setAttrs({ tab: 1 }); // reset to common tab when switching splats     }); </script> css div.sheet-tab {     display: none;  } input.sheet-vampire:checked ~ div.sheet-vampire, input.sheet-werewolf:checked ~ div.sheet-werewolf, input.sheet-tab-V-1:checked ~ div.sheet-tab-V-1, input.sheet-tab-V-2:checked ~ div.sheet-tab-V-2, input.sheet-tab-V-3:checked ~ div.sheet-tab-V-3, input.sheet-tab-ww-1:checked ~ div.sheet-tab-ww-1, input.sheet-tab-ww-2:checked ~ div.sheet-tab-ww-2, input.sheet-tab-ww-3:checked ~ div.sheet-tab-ww-3, input.sheet-tab-ww-4:checked ~ div.sheet-tab-ww-4  { display: block; } .charsheet input.sheet-tab {     width: 50px;     height: 20px;     cursor: pointer;     opacity: 1; z-index: 9999;     margin-bottom:10px;     display:inline; } .charsheet span.sheet-tab { background: white;  color: black;  width: 50px; /*originally 87px*/     height: 20px; /*originally 20px*/     border:2px solid black;      } .charsheet input.sheet-tab:checked + span.sheet-tab {     background: black;  /*originally ab8b57*/       color: white; /*originally white*/     border:2px solid white;     }

The only way to not duplicate (as far as I know and I know very little of html and CSS) is to have Common tab next to Vampire tab and Werewolf. <input type="radio" name="attr_splat" value="1" class="sheet-splat sheet-common" checked><span></span> <input type="radio" name="attr_splat" value="2" class="sheet-splat sheet-vampire"><span></span> <input type="radio" name="attr_splat" value="3" class="sheet-splat sheet-werewolf"><span></span> <!-- etc, choose game type --> <div class="sheet-tab sheet-common">     <!-- common tab -->     Common Tab </div> <div class="sheet-tab sheet-vampire">     <!-- vampire tabs -->     Vampire All </div> <div class="sheet-tab sheet-werewolf">     <!-- werewolf tabs -->     Werewolf All </div>

Found the right answer that you were looking for. <input type="radio" name="attr_splat" value="1" class="sheet-splat sheet-vampire" checked><span></span> <input type="radio" name="attr_splat" value="2" class="sheet-splat sheet-werewolf"><span></span> <!-- etc, choose game type --> <input type="radio" name="attr_tab" value="1" class="sheet-tab sheet-tab-1"/><span class="sheet-tab"></span> <input type="radio" name="attr_tab" value="2" class="sheet-tab sheet-tab-2 sheet-vampire-only"/><span class="sheet-tab sheet-vampire-only"></span> <input type="radio" name="attr_tab" value="3" class="sheet-tab sheet-tab-3 sheet-vampire-only"/><span class="sheet-tab sheet-vampire-only"></span> <input type="radio" name="attr_tab" value="4" class="sheet-tab sheet-tab-4 sheet-vampire-only"/><span class="sheet-tab sheet-vampire-only"></span> <input type="radio" name="attr_tab" value="5" class="sheet-tab sheet-tab-5 sheet-werewolf-only"/><span class="sheet-tab sheet-werewolf-only"></span> <input type="radio" name="attr_tab" value="6" class="sheet-tab sheet-tab-6 sheet-werewolf-only"/><span class="sheet-tab sheet-werewolf-only"></span> <div class="sheet-tab sheet-tab-1"> <!-- common tab contents --> Common </div> <div class="sheet-tab sheet-vampire sheet-tab-2"> <!-- vampire #1 tab contents -->     Vampire 1 </div> <div class="sheet-tab sheet-vampire sheet-tab-3"> <!-- vampire #2 tab contents -->     Vampire 2 </div> <div class="sheet-tab sheet-vampire sheet-tab-4"> <!-- vampire #3 tab contents -->     Vampire 3 </div> <div class="sheet-tab sheet-werewolf sheet-tab-5"> <!-- werewolf #1 tab contents -->     Werewolf 1 </div> <div class="sheet-tab sheet-werewolf sheet-tab-6"> <!-- werewolf #1 tab contents -->     Werewolf 1 </div> <div class="sheet-tab sheet-werewolf sheet-tab-7"> <!-- werewolf #1 tab contents -->     Werewolf 1 </div> <script type="text/worker">     on('change:splat', function() {         setAttrs({ tab: 1 }); // reset to common tab when switching splats     }); </script>  css div.sheet-tab{     display: none;  } input.sheet-tab-1:checked ~ div.sheet-tab-1, input.sheet-tab-2:checked ~ div.sheet-tab-2, input.sheet-tab-3:checked ~ div.sheet-tab-3, input.sheet-tab-4:checked ~ div.sheet-tab-4, input.sheet-tab-5:checked ~ div.sheet-tab-5, input.sheet-tab-6:checked ~ div.sheet-tab-6 { display: block; } input.sheet-vampire:checked ~ input.sheet-vampire-only, input.sheet-werewolf:checked ~ input.sheet-werewolf-only {     display:inline; } .sheet-vampire-only, .sheet-werewolf-only {     display:none; } .charsheet input.sheet-tab {     width: 50px;     height: 20px;     cursor: pointer;     opacity: 1; z-index: 9999;     margin-bottom:10px; } .charsheet span.sheet-tab { background: white;  color: black;  width: 50px; /*originally 87px*/     height: 20px; /*originally 20px*/     border:2px solid black;      } .charsheet input.sheet-tab:checked + span.sheet-tab {     background: black;  /*originally ab8b57*/       color: white; /*originally white*/     border:2px solid white;     }

Brian , can you walk me through setting up this tab thing?  How does one "Hide the input as well as the span"? Havoc , The method you are decribeing should work, but I'm really, really like the idea of hiding certain tab buttons for the character sheets.  If I can get this down, I can start adding this to other sheets I make.  The Tabbed Savage Worlds does it with checkboxes.  I wanna get it working with radio buttons.

CPP, just tested this and it works: <input type="radio" name="attr_splat" value="1" class="sheet-splat sheet-vampire" checked><span title="Vampire"></span> <input type="radio" name="attr_splat" value="2" class="sheet-splat sheet-werewolf"><span title="Werewolf"></span> <input type="radio" name="attr_splat" value="3" class="sheet-splat sheet-mage"><span title="Mage"></span> <input type="radio" name="attr_splat" value="4" class="sheet-splat sheet-wraith"><span title="Wraith"></span> <input type="radio" name="attr_splat" value="5" class="sheet-splat sheet-changeling"><span title="Changeling"></span> <br> <!-- etc, choose game type --> <input type="radio" name="attr_tab" value="1" class="sheet-tab sheet-tab-1 sheet-common-tab" checked><span title="Tab 1"></span> <input type="radio" name="attr_tab" value="2" class="sheet-tab sheet-tab-2 sheet-vampire-only"><span title="Tab 2"></span> <input type="radio" name="attr_tab" value="3" class="sheet-tab sheet-tab-3 sheet-vampire-only"><span title="Tab 3"></span> <input type="radio" name="attr_tab" value="4" class="sheet-tab sheet-tab-4 sheet-werewolf-only"><span title="Tab 2"></span> <input type="radio" name="attr_tab" value="5" class="sheet-tab sheet-tab-5 sheet-werewolf-only"><span title="Tab 3"></span> <input type="radio" name="attr_tab" value="6" class="sheet-tab sheet-tab-6 sheet-werewolf-only"><span title="Tab 4"></span> <input type="radio" name="attr_tab" value="7" class="sheet-tab sheet-tab-7 sheet-mage-only"><span title="Tab 2"></span> <input type="radio" name="attr_tab" value="8" class="sheet-tab sheet-tab-8 sheet-wraith-only"><span title="Tab 2"></span> <input type="radio" name="attr_tab" value="9" class="sheet-tab sheet-tab-9 sheet-changeling-only"><span title="Tab 2"></span> <input type="radio" name="attr_tab" value="10" class="sheet-tab sheet-tab-10 sheet-changeling-only"><span title="Tab 3"></span> <!-- etc, choose tab --> <div class="sheet-tab sheet-tab-1">     <!-- common tab contents -->     Common </div> <div class="sheet-tab sheet-tab-2">     <!-- vampire #1 tab contents -->     Vampire 1 </div> <div class="sheet-tab sheet-tab-3">     <!-- vampire #2 tab contents -->     Vampire 2 </div> <div class="sheet-tab sheet-tab-4">     <!-- werewolf #1 tab contents -->     Werewolf 1 </div> <div class="sheet-tab sheet-tab-5">     <!-- werewolf #1 tab contents -->     Werewolf 2 </div> <div class="sheet-tab sheet-tab-6">     <!-- werewolf #1 tab contents -->     Werewolf 3 </div> <div class="sheet-tab sheet-tab-7">     <!-- mage #1 tab contents -->     Mage 1 </div> <div class="sheet-tab sheet-tab-8">     <!-- wraith #1 tab contents -->     Wraith 1 </div> <div class="sheet-tab sheet-tab-9">     <!-- changeling #1 tab contents -->     Changeling 1 </div> <div class="sheet-tab sheet-tab-10">     <!-- changeling #1 tab contents -->     Changeling 2 </div> <script type="text/worker">     on('change:splat', function() {         setAttrs({ tab: 1 }); // reset to common tab when switching splats     }); </script> input.sheet-tab + span, .sheet-tab {     display: none; } input.sheet-tab, input.sheet-tab + span, input.sheet-tab + span::before {     margin: 10px 0 10px 0; } .sheet-common-tab, .sheet-common-tab + span, .sheet-vampire:checked ~ .sheet-vampire-only, .sheet-vampire:checked ~ .sheet-vampire-only + span, .sheet-werewolf:checked ~ .sheet-werewolf-only, .sheet-werewolf:checked ~ .sheet-werewolf-only + span, .sheet-mage:checked ~ .sheet-mage-only, .sheet-mage:checked ~ .sheet-mage-only + span, .sheet-wraith:checked ~ .sheet-wraith-only, .sheet-wraith:checked ~ .sheet-wraith-only + span, .sheet-changeling:checked ~ .sheet-changeling-only, .sheet-changeling:checked ~ .sheet-changeling-only + span { display: inline; } input.sheet-tab-1:checked ~ div.sheet-tab-1, input.sheet-tab-2:checked ~ div.sheet-tab-2, input.sheet-tab-3:checked ~ div.sheet-tab-3, input.sheet-tab-4:checked ~ div.sheet-tab-4, input.sheet-tab-5:checked ~ div.sheet-tab-5, input.sheet-tab-6:checked ~ div.sheet-tab-6, input.sheet-tab-7:checked ~ div.sheet-tab-7, input.sheet-tab-8:checked ~ div.sheet-tab-8, input.sheet-tab-9:checked ~ div.sheet-tab-9, input.sheet-tab-10:checked ~ div.sheet-tab-10 { display: block; } input.sheet-splat, input.sheet-tab {     width:  100px;     height: 20px;     z-index: 1;     position: relative;     opacity: 0; } /* For some reason, common tab label isn't getting displayed in this example, not sure why. */ input.sheet-common-tab { opacity: 1; } input + span[title]::before {     display: inline-block; } input + span[title]::before {     content: attr(title);     border-radius: 5px;     background-color: #ccc;     text-align: center;     width:  100px;     height: 20px;     margin-left: -100px; } input:checked + span[title]::before {     background-color: #8cc; } For some reason, the common tab label is refusing to display for me, I've no idea why. For the purposes of the example, I've simply made that specific radio button visible to show it working.

Coal Powered Puppet said: Havoc , The method you are decribeing should work, but I'm really, really like the idea of hiding certain tab buttons for the character sheets.  If I can get this down, I can start adding this to other sheets I make.  The Tabbed Savage Worlds does it with checkboxes.  I wanna get it working with radio buttons. Well, my last post has the answer you wanted. Brian also posted the same one.

Havoc said: Well, my last post has the answer you wanted. Brian also posted the same one. In that case, I apologize.  A tiny bit of tinkering, and I got it to work.  Thank you both for your help. Brian: I added: "input" to the css of .sheet-common-tab, and it worked.  I dunno why.