0

I'm working on this site: http://oq.totaleclips.com, and Opera displays the Facebook Like button out of horizontal alignment with the other social buttons on feature pages such as: http://oq.totaleclips.com/mpa/The_Hunger_Games_(Movie_2012)

I don't want to make radical changes to the container div's css, because it works fine in other browsers. Perhaps a browser-specific style would fix the issue, but the div called fb-like does not seem to accept css over-rides well (as in `.fb-like{height:21px !important;})

How can I get this to line up properly in Opera?

Jon Mitten
  • 1,965
  • 4
  • 25
  • 53

1 Answers1

1

Unfortunately, because that particular (and most easy to use) Facebook Like button(s) uses FB's iframe, you're unable to style it (otherwise, .fb_iframe_widget span {vertical-align: top;} would do the trick.)

There are other ways of implementing a like button without using an iframe, ranging from the accessible (Open Like), to the somewhat involved (Facebook SDK).

If you're stuck with the iframe, though, you could theoretically use an Opera specific css selector:

x:-o-prefocus, .fb_like {
   margin-top: -10px;
}
Community
  • 1
  • 1
crowjonah
  • 2,858
  • 1
  • 23
  • 27
  • 1
    `.fb_iframe_widget span {vertical-align: top !important;}` does the trick in my main CSS file for that page. Any reason why I shouldn't use the `!important` bit in the main style sheet? – Jon Mitten Sep 05 '12 at 18:40
  • 1
    There's a [lot of discussion](http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/) about `!important`. You can usually avoid it by using more specific css selectors (something like `.sb-content .div_social_options . fb iframe_widget span {...}` and save yourself some potential headaches later on, trying to figure out why other style rules you're writing are being overridden by hard to trace !important declarations. But hey, if it works it works? – crowjonah Sep 05 '12 at 18:52