Cascading CSS
October 22, 2004 1:57 AM   Subscribe


I have to redesign a horribly convoluted frames based site with no frames. This is a Good Thing. One problem - there's a small block that has to use (for reasons I have no control over) it's own stylesheet, completely independant of the main CSS (that is, the content will be independant - the block itself has to be sized and placed using the site CSS...). And it has to be inside a larger block level element that will take the site CSS. Is there a way to stop the CSS cascading, or reset every property of the block, or do I have to manually reset each inheritable property separately?
posted by monkey closet to Education (7 answers total)
Even your worst case scenario doesn't sound too bad here. Sure, most properties inherit, but having to set

#independantblock {

#independantblock a {

doesn't seem that trying to me. Or am I missing something?
posted by weston at 2:11 AM on October 22, 2004

I think you can get away with this:

#independentblock * {
reset defaults

to reset any properties that apply to everything inside. Not sure if that's helpful or not, but it would at least let you shut off all padding, margin , borders and whatever else you didn't want inherited.
posted by yerfatma at 5:24 AM on October 22, 2004

does the "*" work in CSS, in all the usual browsers?
posted by signal at 6:53 AM on October 22, 2004

Yes, the * does work. Eric Meyer's been talking about interesting CSS tricks--try using a stylesheet with nothing but this in it:

* {display: block;}

It'll reveal all the HEAD elements, fun stuff like that.
posted by adamrice at 7:27 AM on October 22, 2004

Unfortunately, since the "clear" property pushes a block below all floated blocks - not just those in the parent element - you can't reliably use CSS for templates when the nested content may have its own styles. Use tables.

(I would love to be proven wrong about this!)
posted by nicwolff at 10:54 AM on October 22, 2004

Nicwolff-- Check out this test page. I think you're wrong. It's not pretty, and may not do what you want, but the clearing effect does appear to happen within the parent--it doesn't clear everything.
posted by adamrice at 11:22 AM on October 22, 2004

Nope, the "clear: right" block there clears past all "float: right" blocks, whether they're in the parent div or not. Here's an example of the problem as it arises trying to do a two-column template with CSS, in which arbitrary content might come from a data store.

I've just done a site in which the client was (ah, bliss!) dedicated to an all-CSS layout and I regretfully had to revert to tables for the main three-column template because any "clear" attributes in the content blew up the columns. I think this is a serious flaw in CSS, and as I said I'd love to find a way around it without tables.
posted by nicwolff at 12:42 PM on October 22, 2004

« Older HTML to CSV   |   What guitar tab software can output in... Newer »
This thread is closed to new comments.