I have some generated HTML which is as follows:-
<div class=level1> <p>
This is the playground
</p>
<p><a class="folder" href="#folded_1"> Test</a></p> <div class="folded hidden" id="folded_1">This is the text that is hidden or shown</div> <p><a class="folder" href="#folded_2"> Test1</a></p> <div class="folded hidden" id="folded_2">This is some more hidden text</div> <p><a class="folder" href="#folded_3"> Test2</a></p> <div class="folded hidden" id="folded_3">And this is still more</div></div>
<span id="folded_reveal" style="display:none;"><!-- reveal --></span> <span id="folded_hide" style="display:none;"><!-- hide --></span>
I want to pack the "Test", "Test1" and "Test2" closer together vertically and I'm having little success. I was expecting that setting the following would do it:-
.folder { margin-top: 0; padding-top: 0; font-weight: bolder; border-width: thin; border-color: blue; background-color: cyan; padding-left: 2px; padding-right: 9px; background: url(closed.gif) no-repeat right center; }
The font-weight CSS is having its effect, changing it does change the font weight, but the colours (e.g. the background colour) have no effect at all, and nor do the margin/padding/border settings.
What am I doing wrong? Is there some 'outer' CSS that has priority over these settings? If so how can I override it?