Google+ Tools: Make Google+ profile picture
Make Google plus banners for profile
Create and share your Google Plus profile banners.
MonioDesign on February 10, 2011: 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.

Language: CSS
Tags: facebook

Facebook Like Box IFrame fix

CSS

#fbcontainer{
overflow:hidden; 
width:289px; 
height:425px
}

#fbiframe{
border:none; 
overflow:hidden; 
width:292px; 
height:427px; 
position:relative; 
margin-left:-2px; 
margin-top:-2px;
}



HTML

<div id=fbcontainer>

<iframe id=fbiframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;amp;width=292&amp;amp;colorscheme=dark&amp;amp;show_faces=true&amp;amp;stream=true&amp;amp;header=true&amp;amp;height=427" scrolling="no" frameborder="0" 
allowTransparency="true"></iframe>

</div>

Code Snippets Collection

Facebook Like Box IFrame fix

Comments