0

As described here, you can fetch a CSS file, for use with the Preview HTML for Ads that the documentation also describes. The problem is that the css file, when downloaded, contains elements like this:

body{background:#fff;font-size:11px;font-family:'lucida grande',tahoma,verdana,arial,sans-serif;color:#333;line-height:1.28;margin:0;padding:0;text-align:left;direction:ltr;unicode-bidi:embed}
h1, h2, h3, h4, h5, h6{font-size:13px;color:#333;margin:0;padding:0}
h1{font-size:14px}
h4, h5{font-size:11px}
p{margin:1em 0}
a{cursor:pointer;color:#3b5998;text-decoration:none}
a:hover{text-decoration:underline}
img{border:0}
td, td.label{font-size:11px;text-align:left}
dd{color:#000}
dt{color:#777}
ul{list-style-type:none;margin:0;padding:0}

So when we put this CSS on the web page, it screws with the formating for the rest of the page. Maybe this is a simple CSS problem, but how do I limit where this CSS will be applied? Do I have to put it inside of a frame or something? Seems annoying...

Thanks!

kevin
  • 417
  • 4
  • 20

2 Answers2

0

Just specify your own selectors with a higher css specificity. This is an excellent article for how to do this.

Basically since all of these selectors only have a single element name (eg. h1), they have a specificity of 1. Even if you prefixed all of your own selectors with body, eg. body h1, your selector will then have a higher specificity and therefore have preference over the Facebook CSS.

Roddy of the Frozen Peas
  • 14,380
  • 9
  • 49
  • 99
  • Thanks - I get the basic concept, but I don't understand how I would apply it in this scenario. So would I have to edit every one of my CSS tags to have some greater specificty? Isnt there an easy way to just make a specific CSS file only apply to a specific div, or something easier? – kevin Sep 14 '12 at 19:52
  • @kevin -- not without changing the CSS. For example, if you can modify the CSS posted in the original comment and prepend an id -- eg `#advert` -- to each selector, then you could have it only apply to those elements in the id. But support for otherwise "scoping" the CSS does not exist. However it looks from the spec that you posted that FB is already sticking the ad in a `
    ` with a particular class name and then styling just against that class...?
     – Roddy of the Frozen Peas Sep 14 '12 at 19:59
  • Yes the DIV from Facebook is great, it's the CSS that's giving me heartaches. I'll just file a Facebook bug and see what happens. I'm not sure how we're supposed to use this CSS. Thanks! – kevin Sep 14 '12 at 20:51
0

An easier solution to this problem is to load your code for previewing the ad via an iFrame or popup window, which means that Facebook's CSS won't interfere with your site's.

Igy
  • 43,710
  • 8
  • 89
  • 115
  • 1
    An easier answer would be for Facebook to not supply a CSS file which contains definitions for such things as

    ;-)

     – kevin Feb 12 '13 at 00:40