background-image disappearing

[mfthoad]

I hardly do any web work these days so I’m very rusty! However, I wanted to make a few changes to the look of my own site. I have a div with an h3 in it and a background-image of a disclosure triangle (right pointing) to the left. (When clicked, the text below is revealed and the triangle is replaced via JavaScript with a down pointing one.)

Now, however, by way of simplifying the whole style sheet (ha!) I’ve hit a problem. The relevant parts are these, in this order:

body {
background-color: #86DCD2; /* just an arbitrary colour for testing! */
}

within that:

div#maincontent, div#maincontent * {
background-color: white;
}

and within div#maincontent, the thing I described above:

.boxhead {
width: 100%;
display: block;
background: url(../pix/pagebits/triclosed.gif) 5px 8px no-repeat;
}
.boxhead h3, .boxhead h4 {
padding: 3px 0 5px 25px;
}

…only now the background-image doesn’t appear, just a blank space. The part I’ve newly introduced is the background colours for body and #maincontent. If I comment out either one of them, the problem remains – no disclosure triangle. If I comment out both I get the triangle back.

So there’s something basic I don’t understand (or have forgotten!) about the order of precedence of backgrounds. I thought that what comes further down the style sheet should effectively override what’s above (as indeed the colour of #maincontent does over the colour of body), but it doesn’t work with my background image.

Or maybe I’m tackling the problem entirely the wrong way. (I tried using a ul with a single li and the triangle image as the list-style, but got hopelessly tied in knots and found browsers responding inconsistently, so I gave up on that one.)

What am I doing wrong?

[Paulie_D]

A minimal functional demo in Codepen.io would be ideal here.

[mfthoad]

OK, thanks – never done that before (you can tell how out of touch I am!), but here it is: https://codepen.io/mfthoad/pen/zjGgMY

[mfthoad]

I should have added this: you’ll see in the CSS pane a comment in the #maincontent block to comment out the background-color to make it work. The strange thing about this is that previously I had to comment out that line and the background-color in the body block for my triangle to appear, but now it’s just the second one (white) that needs to go… and I don’t believe I’ve changed anything else to make that happen!

The fact remains though that the white background in #maincontent is somehow hiding that disclosure triangle.

[mfthoad]

I’ve just discovered another spot on the site where the same thing is happening: a background-color (no image this time) much further down the stylesheet is being hidden by #maincontent’s white background. I don’t see any point in adding it to the codepen thing at this stage as the behaviour merely duplicates what I’m already demonstrating. It does seem to me though to confirm that the problem lies in the CSS not in the JS, which had occurred to me as a faint possibility.

[Paulie_D]

This

div#maincontent, div#maincontent * {
/* comment this line out for the triangle to appear */
    background-color: white;
}

is telling everything that is a child of #divmaincontent to have a white background so it could be a specificity issue

Frankly I think div#maincontent * is superfluous since if you do not specify a background for the children they will be transparent….

https://codepen.io/Paulie-D/pen/aGvbvq

[mfthoad]

Oh, good grief! That simple – how dumb of me. Thanks so much! That definitely fixes the problem in the ‘real’ site (and the extra problem I found, mentioned in my previous post).

Except… I can’t help feeling there was some reason I included that ‘#maincontent *’ . I’ll have to go thoroughly through the whole site and see if anything shows up, but on the face of it that seems to be the answer.

Thanks again!

[Author]

Posts