Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Stripping whitespace from between newline elements

Hello, I was wondering if it was possible to strip whitespace from between input/span navbar elements. Simply put I have used the navigation bar code to create show/hide section buttons. As shown in the image below. When the associated <div></div> section is collapsed there is an extra whitespace area between the 'buttons'. I would like to strip that out. The css code used is: /* Section Showhide Buttons */ div[class^="sheet-sect-sh-"] { display: none; } input.sheet-sect-shtab0:checked ~ div.sheet-sect-sh-test, input.sheet-sect-shtab1:checked ~ div.sheet-sect-sh-defabil, input.sheet-sect-shtab2:checked ~ div.sheet-sect-sh-saves, input.sheet-sect-shtab3:checked ~ div.sheet-sect-sh-attacks { display: block; } input.sheet-sect-shtab99:checked ~ div[class^="sheet-sect-sh-"] { display: block; margin-top: -35px !important; } input.sheet-sect-shtab0:checked ~ span.sheet-sect-shtab0, input.sheet-sect-shtab1:checked ~ span.sheet-sect-shtab1, input.sheet-sect-shtab2:checked ~ span.sheet-sect-shtab2, input.sheet-sect-shtab3:checked ~ span.sheet-sect-shtab3, input.sheet-sect-shtab99:checked ~ span.sheet-sect-shtab99 { /* Show ALL */ background: rgb(0,158,115); border-radius: 4px; } input.sheet-sect-shLong { border: 0px solid black !important; width: 99%; height: 19px; cursor: pointer; position: relative; top: 22px; margin-top: -40px; margin-left: 3px; opacity: 100; /* This sets the visibility of the checkbox */ z-index: 9999; } span.sheet-sect-shLong { /* Show/Hide Buttons */ text-align: center; border: 1px solid black; display: inline-block; font-size: 13px; background: rgb(47, 79, 79); color: white; font-weight: bold; border-radius: 4px; width: 99%; height: 20px; cursor: pointer; position: relative; top: -17px; margin-left: 4px; }
Might have to show the html, as well. Is there a <br> or something similar between the two lines?
1430784211

Edited 1430784234
Toby
Pro
Here is the html, minus filler sections. <!-- Navigation Show/Hide Button --> <input type="checkbox" name="attr_sect-shLong" class="sheet-sect-shLong sheet-sect-shtab0" value="0" title="Level 1/Least" checked="checked"/> <span class="sheet-sect-shLong sheet-sect-shtab0">Character Bio</span> <div class="sheet-sect-sh-test" style="margin-top: -17px !important;"> <!-- End Navigation Show/Hide Button --> <div class="sheet-table" style="display: table; width: 100%"> [Filler Content] </div> <!-- End of Table --> </div><!-- End of CharBio --> <!----------------------------------------------------------------> <input type="checkbox" name="attr_sect-shLong" class="sheet-sect-shLong sheet-sect-shtab1" value="0" title="Level 1/Least" checked="checked"/> <span class="sheet-sect-shLong sheet-sect-shtab1">Abilities and Defense</span> <div class="sheet-sect-sh-defabil" style="margin-top: -17px !important;"> <!-- End Navigation Show/Hide Button --> <div class="sheet-table-row"> <div class="sheet-table-data sheet-center"> <div class="sheet-table" style="display: table; width: 100%;"> <span class="sheet-table-name">Ability Scores</span> [filler content] </div> </div> <div class="sheet-table-data sheet-center" style="background-color:black;"> </div> <!-- Divider Section ------------------------------------------- --> <div class="sheet-table-data sheet-center"> [filler content] </div><!-- Defense and Movement Table --> </div> </div> I experimented with the :not(checked) selector and that did slide the transparent input box upwards, however it no longer matched the span section that was acting as the button. I also have a feeling that it will have overly issues in areas that have non-show/hide content directly above the button. I have absolutely no idea what I'm doing with selectors and pseudo-classes. input.sheet-sect-shtab0:not(:checked) ~ span.sheet-sect-shtab0, input.sheet-sect-shtab1:not(:checked) ~ span.sheet-sect-shtab1, input.sheet-sect-shtab2:not(:checked) ~ span.sheet-sect-shtab2, input.sheet-sect-shtab3:not(:checked) ~ span.sheet-sect-shtab3, input.sheet-sect-shtab99:not(:checked) ~ span.sheet-sect-shtab99 { /* Show ALL */ background: rgb(0,158,115); border-radius: 4px; top: -17px; }
1430785293
Finderski
Plus
Sheet Author
Compendium Curator
Not sure if this is the issue, but I've found block vs. inline-block displays may do some weird things. Try changing block to inline-block...
I'ved tried every single display property that I can find, even the browser specific ones. None of them provides the desired effect, as for block vs inline-block, they both did exactly the same thing in both firefox and chrome.