Welcome to WebmasterWorld Guest from 54.145.208.64

Forum Moderators: not2easy

Message Too Old, No Replies

My CSS distorting affiliate ad layout

   
1:38 pm on Aug 6, 2008 (gmt 0)

10+ Year Member



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?

2:00 pm on Aug 6, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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>

5:04 pm on Aug 6, 2008 (gmt 0)

10+ Year Member



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.
6:07 pm on Aug 6, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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:))