Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Setting BG color within spoiler div?

Posted by: Emor Jan 25 2011, 04:12 PM

I have a question regarding altering color in a hidden-spoiler page for which I'm trying to set up a template.

I've posted a page to illustrate what I'm trying to do, http://Adrael.com/Test/SpoilerDisplayDemo.html.

My objective is to change the background color within the spoiler div when it appears.

As you can see, I've tried setting a background-color in the ".spoiler .inner" class statement...and it does nothing.

In the second of the two examples on the page, I can set the .inner div's style to a "background-color", which accomplishes what I want...but that wipes out the "display:none" setting, which causes the spoiler to default to displaying "on"!

I bet the answer to this is painfully obvious, but I'm stumped.

Posted by: Darin McGrew Jan 25 2011, 05:24 PM

I recommend that you start by fixing the CSS errors reported by the W3C's CSS validation service:
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fadrael.com%2FTest%2FSpoilerDisplayDemo.html&profile=css21&usermedium=all&warning=1&lang=en

Posted by: Emor Jan 25 2011, 06:25 PM

Thanks, Darin.

The fault reported at line #11 - I don't understand, as there was no doubling of the hex color in the code there.

But the lack of the semicolon in the second error was something that had slipped right past Dreamweaver's validator, and was, of course, the fix.

I will henceforth utilize the W3C validator page..... blush.gif lesson learned.

Posted by: Christian J Jan 25 2011, 06:29 PM

QUOTE(Emor @ Jan 26 2011, 12:25 AM) *

The fault reported at line #11 - I don't understand,

"Property bgcolor doesn't exist" --use "background-color" or "background" instead.

QUOTE
as there was no doubling of the hex color in the code there.

True, that's odd.


Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)