[Help] Tabs not displaying properly.

I am working to fix a complaint about the FFG Star Wars RPG character sheet involving the Tab display. The current display&nbsp; <a href="https://jsfiddle.net/9xz0mt2o/" rel="nofollow">https://jsfiddle.net/9xz0mt2o/</a> works fine in Chrome, but Firefox/Edge/Internet Explorer/etc display the tabs ugly or broken. I have been working with someone and we almost had a fix, but it broke a feature of the sheet.&nbsp; <a href="https://jsfiddle.net/dcrq2y7f/" rel="nofollow">https://jsfiddle.net/dcrq2y7f/</a> is our current attempt. The original was able to display certain tabs/info on a sheet just for the GM(s) and certain tabs/info for the Player(s). The new tab info broke this and displays all the tabs on both sheets. How do I get the code in the second set to display the new tab set only on the correct (GM or Player) sheets?

/* NEW TAB CODE */ input.sheet-tab-new { cursor: pointer; height: 20px; opacity: 0; position: relative; width: 120px; z-index: 9999; display:inline-block !important; } span.sheet-tab-new { background: #4a6486 none repeat scroll 0 0; border-radius: 4px; color: white; cursor: pointer; display:inline-block; font-size: 13px; font-weight: bold; height: 20px; margin-left: -122px; position: relative; text-align: center; line-height:20px; width: 120px; } input.sheet-tab-new:checked + span { background: #ab8b57 none repeat scroll 0 0; border-radius: 4px; color: white; } /* END NEW TAB CODE */ Mostly I am trying to find why a little snippet of code broke the functionality that separated the GM and Player sheets.

Your ".sheet-tab-new" classes override the display settings from your tab management classes (.sheet-gm-sheet and .sheet-player-sheet). Also you forgot to setup the spans to change display behaivor based on the hidden radioboxes which also causes to show the tab headers. I updated <a href="https://jsfiddle.net/dcrq2y7f/6/" rel="nofollow">https://jsfiddle.net/dcrq2y7f/6/</a> and updated the classes in you spans as well as in the css: span.sheet-tab-new { &nbsp;&nbsp;&nbsp; background: #4a6486 none repeat scroll 0 0; &nbsp;&nbsp;&nbsp; border-radius: 4px; &nbsp;&nbsp;&nbsp; color: white; &nbsp;&nbsp;&nbsp; cursor: pointer; &nbsp;&nbsp;&nbsp; font-size: 13px; &nbsp;&nbsp;&nbsp; font-weight: bold; &nbsp;&nbsp;&nbsp; height: 20px; &nbsp;&nbsp;&nbsp; margin-left: -122px; &nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp; line-height:20px; &nbsp;&nbsp;&nbsp; width: 120px; } input.sheet-tab-new:checked + span { &nbsp;&nbsp;&nbsp; background: #ab8b57 none repeat scroll 0 0; &nbsp;&nbsp;&nbsp; border-radius: 4px; &nbsp;&nbsp;&nbsp; color: white; } .sheet-player-sheet, .sheet-gm-sheet { &nbsp;&nbsp;&nbsp; display: none; } input.sheet-player:checked ~ .sheet-player-sheet, input.sheet-gm:checked ~ .sheet-gm-sheet{ &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp; } &lt;input type="radio" name="attr_pcgm" class="sheet-tab-new sheet-tab-character-sheet sheet-player-sheet" value="1" checked="checked" /&gt; &lt;span class="sheet-tab-new sheet-player-sheet"&gt;Character Sheet&lt;/span&gt; &lt;input type="radio" name="attr_pcgm" class="sheet-tab-new sheet-tab-ship-sheet sheet-player-sheet" value="2" /&gt; &lt;span class="sheet-tab-new sheet-player-sheet"&gt;Vehicle Sheet&lt;/span&gt; &lt;input type="radio" name="attr_pcgm" class="sheet-tab-new sheet-tab-base-sheet sheet-player-sheet" value="3" /&gt; &lt;span class="sheet-tab-new sheet-player-sheet"&gt;Group Sheet&lt;/span&gt; &lt;!--Companion Sheet &lt;input type="radio" name="attr_pcgm" class="sheet-tab-new sheet-tab-companion-sheet sheet-player-sheet" value="4" /&gt; &lt;span class="sheet-tab-new sheet-player-sheet"&gt;Companion Sheet&lt;/span&gt; --&gt; &lt;!--GM Sheets--&gt; &lt;input type="radio" name="attr_pcgm" class="sheet-tab-new sheet-tab-gm-dice sheet-gm-sheet" value="5" /&gt; &lt;span class="sheet-tab-new sheet-gm-sheet"&gt;GM Resources&lt;/span&gt;

That is wonderful, that is exactly what I needed. Thank you so very much for your help.