calling CSS experts - CSS Wizardry Tab example doesn't work properly

I remember raising this in the CSS Wizardry tab at least a year ago, but have just rediscovered it: the CSS Wizardry wiki entry for tabs has errors in it. With a character sheet with no code except what is in that post, I see this: The problems with it: The tabs are floating way above the Bio/Sheet/A&A tabs The second tab is shaded pink, which makes it look like its selected. This is confusing. The mouse cursor is showing where you have to click for the tabs to register it, so the visible tabs and the invisible click area are not together. I think it's important that the code on that page actually be correct. I dont really understand CSS and there is so much styling stuff in that example, it makes it harder to understand what's going on there otherwise I'd fix it myself. What is the absolute minimal code needed to make tabs work, and can we fix that example so it does actually work properly? Additional Question:  is the method listed there the only way to create tabs in roll20 sheets, are there other ways that have been discovered since that post? It's pretty old now.

Yeah that wasn't too helpful, ended up stealing the tab setup from an actual sheet when tinkering with this wasn't too great...

I think I've identified the absolute minimum code needed to make tabs work. Would it be a good idea to replace the wiki entry with something like this: HTML: <input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked" /> <span class="sheet-tab">Character</span> <input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2" /> <span class="sheet-tab">Skills</span> <input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3" /> <span class="sheet-tab">Combat</span> <input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"  /> <span class="sheet-tab">Magic</span> <div class="sheet-tab-content sheet-tab1">     Tab 1 </div> <div class="sheet-tab-content sheet-tab2">     Tab 2 </div> <div class="sheet-tab-content sheet-tab3">     Tab 3 </div> <div class="sheet-tab-content sheet-tab4">     Tab 4 </div> CSS: 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; } .charsheet input.sheet-tab {     width: 80px;  position: relative; opacity: 0; z-index: 9999; } .charsheet span.sheet-tab {     /* width and margin-left must be equal the width in sheet-tab above */ width: 80px;      margin-left: -80px;  } input.sheet-tab[type="radio"]:checked + span.sheet-tab { } This won't look very pretty, but it works. You can also tweak the CSS to improve the appearance. To show how you could prettify it, here's the same code some very simple style elements added: 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, input.sheet-tab5:checked ~ div.sheet-tab5, input.sheet-tab6:checked ~ div.sheet-tab6, input.sheet-tab7:checked ~ div.sheet-tab7 {     /* essential elements */     display: block; } .charsheet input.sheet-tab {     /* essential elements */     width: 80px; /* must match span.sheet-tab below */ position: relative; opacity: 0; z-index: 9999; /* change height to match span.sheet-tab below  */ height: 24px;  } .charsheet span.sheet-tab {     /* essential elements */ width: 80px; /* must match width of input above */     margin-left: -80px; /* ditto */ /* change box size: enter same height in input.sheet-tab above */ font-size: 1.2em; height: 24px;  font-weight: bold; /* make text centred */ text-align: center;       display: inline-block;   /* add a nice border */ border-radius: 4px; border: 1px solid; } input.sheet-tab[type="radio"]:checked + span.sheet-tab {     /* reverse color of selected tab */     color: white;     background: black; } There are elements in the current wiki entry that are still confusing to me and I dont understand why they are there. For instance, the code there explicitly sets the left value of each tab like so: input.sheet - tab3 + span::before { left: 313px; } input.sheet - tab4 + span::before { left: 463px; } But that doesnt seem to be necessary. Am I making a mistake? Also there's this line: input.sheet - tab + span::before { content: attr (title); the content statement there baffles me because I cant see what it does, if anything. What should it do?

Andreas J. said: Yeah that wasn't too helpful, ended up stealing the tab setup from an actual sheet when tinkering with this wasn't too great... Thats what I did too :)

I've just figured out some of the differences in the method used above and that on the css wizardry page, so i'll update this when I have time.