Tabs within a tab

I found  this post which taught me how to make tabs, for which I am very grateful. However, I then tried to make a second group of tabs under one of the tabs (trying to organize spells by level under the Spells tab).   This seemed to work, until I tried making the sub-tabs a different size and color, but ended up changing the size of the main tabs as well.

Sounds like you used the same class for your inner tabs as your outer tabs. Try using different class names for each set of tabs.  Of course, this is only a guess...if you post your code, we might be able to better help you.  By post your code, we'd need both HTML and CSS... :)

Sure thing.  I'm wasn't sure I should just start with the code or not. I've trimmed over a bit of the content to make it more manageable. HTML <div> <!-- Set up the Tabs --> <input type="radio" name="attr_core-tab" value="99" title="All" /> <span style='line-height: 20px;'>ALL</span> <input type="radio" name="attr_core-tab" value="1" title="Attributes" checked="checked"/> <span style='line-height: 20px;'>ATTRIBUTES</span> <input type="radio" name="attr_core-tab" value="2" title="Talents" /> <span style='line-height: 20px;'>TALENTS</span> <input type="radio" name="attr_core-tab" value="3" title="Skills" /> <span style='line-height: 20px;'>SKILLS</span> <input type="radio" name="attr_core-tab" value="4" title="Equipment" /> <span style='line-height: 20px;'>EQUIPMENT</span> <input type="radio" name="attr_core-tab" value="5" title="Magic" /> <span style='line-height: 20px;'>MAGIC</span> <input type="radio" name="attr_core-tab" value="6" title="Notes" /> <span style='line-height: 20px;'>NOTES</span> <!-- End Tab setup --> <div><!-- Spells Tab --> <p></p> <div> <!-- Set up the Tabs --> <input type="radio" name="attr_magic-tab" value="1" title="circle1" checked="checked"/> <span style='line-height: 20px;'>1</span> <input type="radio" name="attr_magic-tab" value="2" title="circle2" /> <span style='line-height: 20px;'>CIRCLE 2</span> <input type="radio" name="attr_magic-tab" value="3" title="circle3" /> <span style='line-height: 20px;'>CIRCLE 3</span> <input type="radio" name="attr_magic-tab" value="4" title="circle4" /> <span style='line-height: 20px;'>CIRCLE 4</span> <input type="radio" name="attr_magic-tab" value="5" title="circle4" /> <span style='line-height: 20px;'>CIRCLE 5</span> <input type="radio" name="attr_magic-tab" value="6" title="circle4" /> <span style='line-height: 20px;'>CIRCLE 6</span> <input type="radio" name="attr_magic-tab" value="99" title="All Spells" /> <span style='line-height: 20px;'>ALL</span> <!-- End Tab setup --> <div> <h3>Circle 1</h3> </div> <div> <h3>Circle 2</h3> </div> <div> <h3>Circle 3</h3> </div> </div> </div> CSS /*----------- Main Tabs Setup -------------*/ /*this hides the contents of each tab by default*/ .charsheet div[class^="sheet-section"] { display: none; } /*this shows the tab content when the appropriate input field is selected*/ .charsheet input.sheet-tab1:checked ~ div.sheet-section-attributes, .charsheet input.sheet-tab2:checked ~ div.sheet-section-talents, .charsheet input.sheet-tab3:checked ~ div.sheet-section-skills, .charsheet input.sheet-tab4:checked ~ div.sheet-section-equipment, .charsheet input.sheet-tab5:checked ~ div.sheet-section-magic, .charsheet input.sheet-tab6:checked ~ div.sheet-section-notes { display: block; } .charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] { display: block; } /*this hides the radio button for each tab, makes it 100px wide and 40px tall and makes sure it's above everything else*/ .charsheet input.sheet-tab { width: 95px; height: 20px; cursor: pointer; position: relative; opacity: 0; z-index: 9999; } /*this styles the span with the tab information and slides to the left, so it appears underneath the radio button*/ .charsheet span.sheet-tab { text-align: center; display: inline-block; font-size: 13px; background: #c7c3b0; color: black; font-weight: bold; border-radius: 4px; width: 95px; height: 20px; cursor: pointer; position: relative; vertical-align: middle; margin-left: -101px;/*originally 91px*/ } /*this modifies the span color once the radio button is selected so you know which tab is selected*/ .charsheet input.sheet-tab1:checked + span.sheet-tab1, .charsheet input.sheet-tab2:checked + span.sheet-tab2, .charsheet input.sheet-tab3:checked + span.sheet-tab3, .charsheet input.sheet-tab4:checked + span.sheet-tab4, .charsheet input.sheet-tab5:checked + span.sheet-tab5, .charsheet input.sheet-tab6:checked + span.sheet-tab6, .charsheet input.sheet-tab99:checked + span.sheet-tab99 { background: #034cb2; color: #FFFFFF; border-radius: 4px; } /*----------- End Main Tab Setup -----------*/ /*----------- Magic Tabs Setup -------------*/ /*this hides the contents of each tab by default*/ .charsheet div[class^="magic-section"] { display: none; } /*this shows the tab content when the appropriate input field is selected*/ .charsheet input.sheet-tab1:checked ~ div.magic-section-circle1, .charsheet input.sheet-tab2:checked ~ div.magic-section-circle2, .charsheet input.sheet-tab3:checked ~ div.magic-section-circle3, { display: block; } .charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] { display: block; } /*this hides the radio button for each tab, makes it 100px wide and 40px tall and makes sure it's above everything else*/ .charsheet input.sheet-tab { width: 95px; height: 20px; cursor: pointer; position: relative; opacity: 0; z-index: 9999; } /*this styles the span with the tab information and slides to the left, so it appears underneath the radio button*/ .charsheet span.sheet-tab { text-align: center; display: inline-block; font-size: 13px; background: #c7c3b0; color: black; font-weight: bold; border-radius: 4px; width: 95px; height: 20px; cursor: pointer; position: relative; vertical-align: middle; margin-left: -101px;/*originally 91px*/ } /*this modifies the span color once the radio button is selected so you know which tab is selected*/ .charsheet input.sheet-tab1:checked + span.sheet-tab1, .charsheet input.sheet-tab2:checked + span.sheet-tab2, .charsheet input.sheet-tab3:checked + span.sheet-tab3, .charsheet input.sheet-tab99:checked + span.sheet-tab99 { background: #034cb2; color: #FFFFFF; border-radius: 4px; } /*----------- End Magic Tab Setup -----------*/

Thanks to the  Alternity RPG character sheet, I was able to figure out the issue, and it seems to be working fine now.