CSS overcoming inheritance

[asif49]

Hi.

I have some css that needs to go into a large amount of websites. It generally contains very simple like all new elements with very unique names that will not be matched by anything these websites currently contain.

The problem I am having is that some of these sites contain default settings in the parent divs I.E. it may say

body {
font-size:12px; 
}

or

.wrapper {
text-decoration:underline;
}

This will be my new div (an example), which is inserted somewhere into the page.

.my_newdiv
{
height:400px; 
width:200px;
padding:10px;
line-height:5px;
}

Unfortunately when this goes somewhere within the body or the wrapper or whichever class it goes into, the parent elements' defined attributes will be inherited into my new divs. There is only one brute way I can imagine which is to specify every type of css styling and set each of them. This is not feasible due to the amount of new divs which are being added. So any ideas?

[iamthwee]

Sounds like poor design.

[asif49]

Explain.

[iamthwee]

It's simple really, if you have 100 divs inside a main wrapper and you set the main wrapper to have an underline property but you want 90% of the other divs inside to NOT have the underline property.

It would be easier to set those 10% as underline and have the wrapper div to be normal.

This is a design issue, although in some cases there are exceptions.

The other question is are you creating this dynamically with PHP or is this pure HTML?

[almostbob]

I'll try,
poor design:: anything that depends on another developer or a user, behaving in a particular manner.

styles that are inserted in other code bases should be absolutely device independent.

PX are pretty much useless as a layout tool,
on a crt a px is 1/96inch,
or lcd 1/132 inch,
on led 1/235 inch,
on telephone & Ieverything ~ 1/400 inch.
12px begins as 1/8 inch and finishes as 1/50 inch tall, unreadable.

ideally relative dimension should allow the site developer to set standards for the layout of the page,
yet the interloper designer can ensure that the inserted elements are relatively larger or smaller, more or less emphasised.

layout relative dimensions em or % based around 1em or 100% and the text will always scale around the settings of any parent element
a relative dimension 150% or 1.5 em will always be 1.5 times larger than surrounding text. a div 40% wide will always be 40% of parent element

[almostbob]

bugger, took me too long to type the my answer

[asif49]

It's actually not poor design. The explanation I've given is kind of an analogy to explain the issue I'm having - it's not that exact issue, what I've said about multiple websites is just to get the problem across.

An actual answer will be appreciated :)

[iamthwee]

Hmmm, I honestly wouldn't know what the best practice is for something like that.

My quick thoughts would be to maybe consider using the !important keyword which should override default styles but this is not 100% foolproof. I'm not even sure it would work.

My other idea which sounds okayish in principle would be to create these divs as iframes, but with that comes other issues, speed of loading /passing info to and from parts of the original website/domain - if you need to. Iframes would take take of the css issues for sure.

IMO I'd opt for the iframe if you've hundreds of websites to consider, but would mean you'd need your own hosting.

Wonder what everyone else thinks?

Perhaps you could call an element reset on any div you intend to insert:

http://snipplr.com/view/7438/element-specific-css-reset/

Then, at the end overide it with your specific styles?

[almostbob]

Previous answer was tring to define "Poor Design", not able to answer the Q, have better idea now what is going on behind the scenes
have had acceptible results with http://code.google.com/p/div-src/ a script that allows you to do what I think the question was