WordPress.org

1. stephenblender
   Member
   Posted 5 months ago #

   I've been beating my head against the wall trying to figure this out. Using the SFC settings to style the Facebook fan box I have been able to make a lot of changes, but border-radius is proving difficult. It works in firefox, but no other browsers. I have tried MANY variations of stying code including -webkit- and -moz- versions.

   My current style for this element:

   .fan_box .connections_grid {
       border: 2px solid #ddd;
       background-color:black;
       border-radius: 8px;
       -moz-border-radius: 8px;
       -webkit-border-radius: 8px;
       padding: 0px 0px 0px 0px;
      height:90px;
      min-height:90px;
      width:390px;
      overflow:hidden;
   }

   In firebug it picks up border-radius in the inspector. Oddly in the chrome inspector it does not seem to see border-radius, but has included -moz-border-radius for each corner. BUT, these 4 styles are crossed out with caution signs.

   In chrome I can add border-radius via the inspector and it works as expected...frustrating!

   The website: http://maggiecoulombe.com/

   Thanks for any help and suggestions!

   http://wordpress.org/extend/plugins/simple-facebook-connect/

2. Otto
   Tech Ninja
   Posted 5 months ago #

   You don't appear to have the bare border-radius in your latest fan-box CSS:
   https://s-external.ak.fbcdn.net/fbml_static_get.php?src=http%3A%2F%2Fmaggiecoulombe.com%2F%3Fsfc-fanbox-css%3D1325272421&appid=360047102704&pv=1&sig=389f6f9d42ba5524965ff547b672f0f3&filetype=css&cb=2

   Facebook actually caches the content of that CSS box and serves it from their domain. So if you change it too often, then your changes won't be taking effect immediately, because FB stops caching the file for a period of time.

   Make your changes using Firebug or the chrome inspector, then change the box all at once and save the change. Then your changes should appear. But if you're editing in that box live and then just reloading all the time, it won't work immediately.

3. stephenblender
   Member
   Posted 5 months ago #

   Thanks for the quick reply Otto. Great plugin.

   If I understand your linked css this is the cached version on the Facebook server? What is funny is you are right - there is no 'border-radius' style there, but there has always been one in my stylesheet. The -moz-border-radius-topleft (etc etc) do not exist in my stylesheet in the fan box settings. Not completely true - i did include them once, but only after I noticed them already present in the chrome inspector. Also other changes I made during working on this problem were reflected immediately.

   Is it possible that Facebook is cleaning the css and helpfully changed my bare border-radius to the -moz-border-radius-topleft (x4)? I'll leave it til tomorrow and if nothing has changed will bump this post.

   Thanks again for the assistance.

4. Otto
   Tech Ninja
   Posted 5 months ago #

   Anything is possible. I can only work to their standards. If they're "cleaning" the CSS, there's little I can do to stop it.

5. stephenblender
   Member
   Posted 4 months ago #

   I have waited a few days so safe to say it is not a cache issue. So weird. I moved the border radius code to the .profileimage for testing as I needed to pretty up the fan grid (using a :before png, looks nice but breaks the function of being able to click fans...)

   Anyway the style code used now is:
   

   .connect_top .profileimage {
   border-radius: 5px;
   -moz-border-radius: 5px;
   }

   It works in Firefox, although when using Firebug the listed style is 'border-radius:8px'. It fails in chrome, opera, ie8. And like I said, chrome tools sees '-moz-border-radius' but strikes it out (unsurprisingly)

   website http://maggiecoulombe.com

   Would it be surprising that Facebook would be screening out CSS codes? Or something like that? (I understand some things are out of your control...)

Reply

You must log in to post.