CODEWITHSUNDEEP
javascriptjqueryhtmlcss
EibergDK
EibergDK

Reputation: 564

Prevent element from being manipulated with CSS

I'm currently building a small ad network, mainly intended to be used at our own websites.

The ads are loaded by including a script on the site, like...

<script src="http://someurl.com/somejs.js"></script>

Anywhere I place the script line, it's gets replaced with the ad content, inside a with inline styling. Must ads will be HTML, and that's what troubles me...

For example, lets pretend that the ad content is something like

<div style="height: 150px; width: 90px; overflow: hidden; display: inline-block;"><p>Buy cheap buttons</p><p><img src="deliciousButtons.png" /></p></div>

And then lets pretend that the content is loaded into a webpage, where someone has the following in his stylesheet:

img { border: 1px solid red; }

Now the image in the ad gets a red border - bummer.

My only solution would be to use iframes... However, I've never really liked iframes.

Is there a html-element, where you can place HTML inside and everything placed inside is not susceptible to any stylesheet preferences - only inline styling?

... If no. Any suggestions on how to do it? With no iframes :)

Upvotes: 0

Views: 199

Answers (2)

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

You can do something like the following.
Add a class which you don't want the style.

<img src="deliciousButtons.png" class="no-border"/>

Then on your css.

img:not(.no-border) {
    border: 1px solid red;
}

demo

Upvotes: 1

Rafael
Rafael

Reputation: 2817

You can override the inherited styles, but for it to work properly, you will need to everride every possible CSS option and probably mark such overrides as !important, really, iframes is the best way to accomplish that, another possibility is to use static images or flash, but i guess this is also out of the possible options.

Upvotes: 2

Related Questions