Question

I have the following HTML on my page:

<div id="mypanel">
   <span>SomeText</span>
   <span>SomeText2</span>
   <span>SomeText3</span>
   <span>SomeText4</span>
   <fb:login-button ..snip.. />
</div>

You can see there i have some Facebook Markup Language (FBML) for the Login button.

Which get’s rendered as:

<span id="RES_ID_fb_login_text" class="FBConnectButton_Text">Login with Facebook</span>

Now, Facebook have the following CSS Selector in their CSS: “.FBConnectButton_Text” to style the FB Connect Button. Fine.

But, my issue is, im trying to style other items (my elements) around that, which is causing the Facebook Controls to be styled incorrectly.

In the above example (which is greatly simplified of course), i want to style all <span> elements in the <div> called “mypanel”, so i write the following CSS:

#mypanel span
{
    font-weight: bold;
    font-size: 14px;
}

And what happens? Well, the Facebook Connect button is getting these styles applied to it also (bad).

I would think they would have a “reset”-style CSS sheet which would specifically set these font’s to their needs (like we do on our site).

So i end up having to apply classes to all my spans to avoid Facebook controls getting messed up. Considering i have these FB controls all over my site, it’s quite a pain to “work around” Facebook.

Can you guys think of a better way to handle this?

Answer 1

Try overriding the original styles, with either more specificity or the !important statement:

#mypanel span{
    font-weight: bold;
    font-size: 14px;
}

#mypanel span.facebook { /* Not sure what classes the FB button uses */
    font-size: 12px;
    font-weight: normal;
}

.facebook {
    font-size: 12px !important;
    font-weight: normal !important;
}

Or, if you can live with the lack of browse support, use the :not pseudo-selector.

#mypanel span:not(.facebook) {
    font-weight: bold;
    font-size: 14px;
}

This will simply give you all the non-Facebook spans. If you can use Javascript, scripts like IE9.js will also give you :not support for IE 6+.