CSS not working on roll20?

Hi there, I've created some multipe tabs for a custom character sheet. I'm using this code here : <a href="https://jsfiddle.net/sgvtxbc5/" rel="nofollow">https://jsfiddle.net/sgvtxbc5/</a> On jsfiddle, it works like a charm : <a href="https://imgur.com/gIzGy04" rel="nofollow">https://imgur.com/gIzGy04</a> &nbsp; But it doesn't work on roll20 : <a href="https://imgur.com/aCLB1iT" rel="nofollow">https://imgur.com/aCLB1iT</a> &nbsp; Is there some part in the CSS that's not working on roll20?

Character sheet code isn't regular html/css, because it is running in a sandbox defined by Roll20.&nbsp; Check the wiki on character sheet creation: <a href="https://wiki.roll20.net/Building_Character_Sheets" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets</a> Most specifically, check out the limitations and most common mistakes sections: <a href="https://wiki.roll20.net/Building_Character_Sheets#Restrictions" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets#Restrictions</a> <a href="https://wiki.roll20.net/Building_Character_Sheets#Common_Mistakes" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets#Common_Mistakes</a> I expect the first bullet point in the CSS restrictions (which is also #2 on the common mistakes list) is where you current problem lies.&nbsp; Basically, you need to use the custom sheet editor or the custom sheet sandbox to build and test your code, because it isn't just normal html/css.

As Kraynic implies, never test code intended for roll20 outside of roll20. There are too many roll20-specific rules that will cause failure. Your CSS here: .sheet-character-sheet { display: none; } .isPC:checked ~ .sheet-pc, .isNPC:checked ~ .sheet-npc { &nbsp; &nbsp; display: block; } &nbsp;The issue are the .isPC and .isNPC classes. Roll20 always prepends sheet- to class names, so those should probably be .sheet-character-sheet { display: none; } .sheet-isPC:checked ~ .sheet-pc, .sheet-isNPC:checked ~ .sheet-npc { &nbsp; &nbsp; display: block; } And maybe even better .sheet-character-sheet { display: none; } input.sheet-isPC:checked ~ .sheet-pc, input.sheet-isNPC:checked ~ .sheet-npc { &nbsp; &nbsp; display: block; }

Thanks for the input guys. I'll be checking the links you've provided. For the suggested modifications GiGs, I've realised the JSFiddle link was not the good one, sorry. Edited for clarity.

I've been able to fix things by adding the "sheet-" but in the CSS code as suggested. Thanks a lot guys :) For anybody looking for it, here is the "correct" coding : .sheet-tabs { position: relative; min-height: 700px; /* This part sucks */ clear: both; margin: 25px 0; } .sheet-tab { float: left; } .sheet-tab label { background: #eee; padding: 10px; border: 1px solid #ccc; margin-left: -1px; position: relative; left: 1px; } .sheet-tab [type=radio] { display: none; } .sheet-content { position: absolute; top: 28px; left: 0; background: white; right: 0; bottom: 0; padding: 20px; border: 1px solid #ccc; } [type=radio]:checked~label { background: white; border-bottom: 2px solid white; z-index: 2; color: #d10000; } [type=radio]:checked~label~.sheet-content { z-index: 1; }