How to stop Injected HTML-div / CSS from inheriting styles ? (Internet Explorer)

Question

I am creating a extension for Internet Explorer where I am injecting CSS-styled span tags on webpages. If a specific part of this component is clicked on, a popup is shown.

This popup is in reality a "DIV"-element that I am injecting at the very end of the content page:s "BODY"-tag. I have a CSS-styled table inside this div, and depending on which site I am on, the appearance of this popup is either according to specification (in regards to width, and so on), or not.

I don't have that much knowledge when it comes to CSS and such, but can this be because the "parent" page already has some CSS for "BODY", "DIV", or "TABLE"-elements that is being inherited by my elements?

If this is the case, is there any way of stopping this?

Answer 1

There are (at least) two means of doing this¹, but they're both a little messy.

Use an iframe with its own css (this way the pages are separated by being two entirely different web-pages).

Use increased specificity to target the inserted html elements.

body {
  /* targets the 'body', and these styles are inherited by its descendant elements */
}

body div {
  /* targets all divs that are contained within the 'body' element */
}

body > div {
  /* targets only divs that are directly contained within the body element */
  /* and these styles will/may be inherited by the children of these divs */
}

The problem with this latter approach, is that you're having to explicitly specify almost all the possible permutations. And there will always be edge cases that aren't accounted for. You'd be best off using class-names to specify the styles for the new content:

.insertedDiv {
  /* this will apply to all elements of class 'insertedDiv', but may be overridden */
  /* by a more specific id-based selector such as '#container > .insertedDiv' */

---

1. But I can only think of these two at the moment.

Answer 2

CSS naturally "cascades", meaning if a container element has a property, it's children will by default inherit it. You can however, of course, override the value on the more specific items by redefining the style for them.

You'll need to inject CSS along with the HTML which specifies all the necessary properties for your popup. Unlike most CSS, you won't be able to assume any defaults, you'll need to specify for your div anything which might be overrode by the page. Make sure you refer to the div specifically by id in your CSS to ensure that your styles override that of the page, and that you don't inadvertently mess with the page's formatting.