Facebook like box widget not recognizing data-width attribute?

Question

I just noticed today that the data-width attribute for the Facebook Like Box widget does not appear to be working. It looks like it is reverting to the default width. An example of what I'm talking about can be seen on http://blog.christopherjonesart.com.

Here is the code I'm using (it's pretty standard):

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like-box" data-href="http://www.facebook.com/christopherjonescomicart"    data-width="190" height="395" data-show-faces="true" data-border-color="black" data-stream="false" data-header="true"></div>

I am experiencing this issue on several websites. It is doing it in Chrome, Firefox, Safari and Internet Explorer. I have not recently updated Wordpress or made any changes to my css.

Help? It looks really crummy like this. :-(

Answer 1

Expanding on user2477225's answer, it might have problems with custom positioning that you set (relative or absolute somewhere on the page), so what I did was:

.fb_iframe_widget>span { width: 240px !important; }
.fb-like-box iframe { width: 240px !important; }

Seems to be working so far.

Edit: For IE 8 (and lower), please use this instead:

.fb_iframe_widget span { width: 240px !important; }
.fb-like-box iframe { width: 240px !important; }

I like to be as specific as possible in my selectors, but after checking this issue some more, I see no technical reason to use the > selector here.