ansaurus

Question

How to Prevent My CSS From Clashing With Facebook's CSS?

Answer 1

A:

Dont style the tags themselves, style classes applied to your tags (spans etc)

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

then your css would become:

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

You dont have to create individual classes, just something to separate your classes from facebook ones. For example you could add a three letter identifier (your companies initials or your own initials) and style everythign using them.

If you add rules to exclude/include anything then you rely on facebook not making any changes to their styles or markup. As soon as they add new classes/style sheets you're going to have to revisit yours.

A final alternative is add a secondary div around the content, which excludes the FBML and then style all items within that.

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

then your css would become:

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

Mauro 2010-09-01 07:21:02

He's already done that - "i end up having to apply classes to all my spans" The question is about *avoiding* that

Yi Jiang 2010-09-01 07:24:54

Yeah, already have that. Trying to find a better solution which doesnt involve me making repetitive changes (adding classes everywhere)

RPM1984 2010-09-01 08:51:15

Answer 2

+1 A:

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+.

Yi Jiang 2010-09-01 07:34:12

@Thanks. I'll give those ideas a go when i get back to the office tomorrow. I mainly care about IE8+, FF3+, Safari3+. Will :not work for those?

RPM1984 2010-09-01 10:19:02

@RPM1984: `:not` is supported in all of these except IE8. See: http://www.css3.info/modules/selector-compat/

Yi Jiang 2010-09-01 10:23:38

@Yi Jiang. Overriding the original styles didnt work, but adding important did. What i've done now is added some "important" CSS classes to my reset.css file. Thanks for your help.

RPM1984 2010-09-01 23:37:26

Answer 3

A:

Add unique namespacing to body tag or any of top parent tag that you have access of. For example

<body id="__someAppname">

or

<div id="__someAppname">

in all your CSS append this id, for example, __someAppname

#__someAppname {
 /* reset all your default css */ 
 padding:0;
 margin:0;
}

from .product{} to #__someAppename .product{}

JapanPro 2010-09-01 08:34:51

i dont get it (mainly because i cant really read your answer). can you please format your answer? (dont put answer text in code blocks, only use code blocks for code).

RPM1984 2010-09-01 10:20:20

I've reformatted it for him, but I still don't really get what he's trying to say

Yi Jiang 2010-09-01 10:27:05

Answer 4

A:

There is a simple but not-elegant way of doing it.

1) Save the css from FB on a local file, load your stylesheet and as the LAST ONE load the fb css you saved.

OR

2) Also, you can just move the reset elements to be applied using jquery and avoiding the FB elements by using the selector :not

<script language="javascript">
    $("span:not([class^=FB])").css('background-color','#F00');
</script>

Im not saying you should show it arround, but it might do the work.

pabloacastillo 2010-09-01 11:04:20

1) wont work because i can't reference the FB CSS. It is Facebook doing this - they will always go to their server to get the CSS.2) is a duplicate answer of Yi Jiang's below.

RPM1984 2010-09-01 11:23:11

ansaurus

tags:

views:

answers:

How to Prevent My CSS From Clashing With Facebook's CSS?

OR

related questions