Re: [ALUG] CSS question, paragraph margins/padding etc.

Chris G wrote:

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?

The lack of packing is probably because you've only overridden the top margin of the paragraph tag, whereas its vertical spacing is all in the bottom margin. So to fix that, you could try:

.folder { margin: 0; }

which makes /all/ the margins zero. It's also worth doing the same with padding, so you'd have

.folder { margin: 0; padding: 0; }

The lack of colors and so on are because <a> tags, in general, do not inherit [most of] their parent's properties, or rather they consider their own style as implicitly !important. Therefore, you need to apply styles like this to the <a> directly, either by giving it a class, or by selection, e.g.:

.folder a { border-width: thin; border-color: blue; background-color: cyan; }

this will give any anchor that's a child of the .folder class the properties you require.

Hth, Simon