How EMP? Love of my CSS? from conflict with Facebook’s CSS?

Hi Guys,

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?

This entry was posted in Codes & Scripts and tagged , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>