Posted By

MonioDesign on 02/10/11


Tagged

css facebook


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

wildrocker92


Facebook Like Box IFrame fix


 / Published in: CSS
 

The IFramed Like Box widget that Facebook supplies automatically puts on a recessed border which seemingly cannot be removed by the usual 'border=0' or 'border:none'. This is not noticeable on the 'light' version but definitely on the 'dark' version. To solve this we first need to wrap the IFrame in a DIV 3px narrower and 2px shorter than the iframe (size of the border widths) making sure to set any overflow to hidden. Then set the position of the iframe to 'relative' and nudge it 2px to the left and up.

  1. CSS
  2.  
  3. #fbcontainer{
  4. overflow:hidden;
  5. width:289px;
  6. height:425px
  7. }
  8.  
  9. #fbiframe{
  10. border:none;
  11. overflow:hidden;
  12. width:292px;
  13. height:427px;
  14. position:relative;
  15. margin-left:-2px;
  16. margin-top:-2px;
  17. }
  18.  
  19.  
  20.  
  21. HTML
  22.  
  23. <div id=fbcontainer>
  24.  
  25. <iframe id=fbiframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;colorscheme=dark&amp;show_faces=true&amp;stream=true&amp;header=true&amp;height=427" scrolling="no" frameborder="0"
  26. allowTransparency="true"></iframe>
  27.  
  28. </div>

Report this snippet  

You need to login to post a comment.