My CSS distorting affiliate ad layout

[beavis]

I am trying to implement an affiliate ad on my web page. The page itself is static HTML and the affiliate ad is called by a java script within the page's code.

However, the ad is not rendering properly because my existing CSS from the page is messing it up. But... this code is essential for the rest of the page.

Does anyone have any suggestions for overcoming this problem?

[D_Blackwell]

Are you using one or more CSS 'globals' that the ad is picking up and rendering?

div {
font-size: 500%;
}

<div>
Ad Content is a mess.
</div>
.................

If so, then class it so that ad cannot pick it up, and plug in the class where needed.

.not-in-my-ad {
font-size: 500%
}

<div>
Ad content is wonderful.
</div>

[beavis]

That's exactly it. I was just hoping there would be an easier solution. With what you suggest, I have to find, modify and test CSS throughout the whole site. I was hoping there would be a way to "turn off" the CSS for the ad.

[D_Blackwell]

That's the danger of global declarations. They can cause horrendous problems down the road.

This fix may certainly still be possible without too much difficulty however. The options available depend upon how that ad is inserted. For example, you may be able to have it insert within a wrapper which contains 'corrective' CSS for the situation.

#ad-wrapper div p (or whatever is being used to insert the content.) {
CSS 'corrections'. May or may not need to use !important; to help get the job done. You will need to experiment and test, but probably very doable if you have control over insertion with your code.
}

You will want to beware of TOS with your ad provider. It's not their problem. It's one thing to adjust so that your CSS displays properly, but they won't take kindly if you wind up restyling theirs:))