Advanced Search

Facebook Like Box IFrame fix

/ Published in: CSS
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.