Advanced Search

Return to Snippet

Revision: 41016
at February 10, 2011 22:40 by MonioDesign
Updated Code 
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;width=292&amp;colorscheme=dark&amp;show_faces=true&amp;stream=true&amp;header=true&amp;height=427" scrolling="no" frameborder="0" 
allowTransparency="true"></iframe>

</div>

Revision: 41015
at February 10, 2011 22:32 by MonioDesign
Initial Code 
<div style="overflow:hidden; width:289px; height:425px;">

<iframe 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" style="border:none; overflow:hidden; width:292px; height:427px; position:relative; margin-left:-2px; margin-top:-2px;" allowTransparency="true"></iframe>

</div>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
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.

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Facebook Like Box IFrame fix

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
css, facebook

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS