I'm unsure about what you're asking. Let me explain our setup, maybe that will clear things up.
Our style sheet is imported:
We have different <DIV>s set up in the style sheet (div.header, div.footer, div.content, etc.).
But I don't want to touch any of those <DIV>s to do the CSS check. I want to create three <DIV>s that are hidden, give them ID's:
(<div id="red" style="background-color : #FF0000; visibility : hidden;">
<div id="white" style="background-color : #FFFFFF; visibility : hidden;">
<div id="blue" style="background-color : #0000FF; visibility : hidden;">)
or something similar to that.
Then I want to figure out, (using the DOM heirarchy? I'm not sure how.) what the background colors of those <DIV>s are, and compare that to what we expect them to be (red, white, blue). If it's not the same, we can assume that CSS is either unsupported, disabled, or has been over-ridden by a user-specified style sheet. (At least, I hope that's how it works )
I'm not even sure if we can do this with <DIV>s. Perhaps we could do it with the BODY background color and the text color, or something like that? We need some element that, if CSS is either unsupported, disabled, or is over-ridden by a user style sheet, will change it's color (or some other attribute that will work).
I got some code that was supposed to check if CSS is supported and enabled, but when I disabled CSS, it didn't work like it was supposed to.
Here's the code:
<div id="checkcss" style="position:absolute;"></div>
var yes = "yes.htm";
var no = "no.htm";
checktype = document.layers ? document.checkcss : checkcss;
top.location.href = (checktype) ? yes : no;
// End -->
Even with CSS disabled, it still forwarded me to yes.htm.
So, I came up with the idea of creating the three <DIV>s, but I'm not sure if even that will work.
So, I'm casting about for ideas as to how to do it, using either <DIV>s or any other element or technique you know about.
I hope this clears up what I'm looking for. Any ideas?