shesek

I was trying to make my own rounded-colored-cooler-looking border for the Like Box social plugin, and Facebook’s default border was getting in the way.

That’s what I eventually used:

<div id="likebox" style="background-image: url(../images/likebg.png); width: 286px; height: 156px; padding: 7px;">
	<div id="likebox-frame" style="width: 286px; height: 156px; overflow: hidden;">
		<iframe style="	width: 288px; height: 155px; margin: -1px -4px 0 -4px;" frameborder="0" border="0" src="http://www.facebook.com/plugins/likebox.php?id=185550966885&width=300&connections=5&stream=false&header=false&height=255" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
	</div>
</div>

So – what did I do?

• We have the #likebox element that sets the background image (that has rounded borders) and some padding, so content won’t hide the border.
• The #likebox-frame element is just a dummy container to make the negative margins on the actual iframe (see below) work while the padding of #likebox still pushes the content inside. it needs height/width (of the “real” likebox content, the inner (after removing the padding) width/height of #likebox)
• And now – for the actual iframe – we have 4 borders that facebook adds inside the iframe to hide. the top/left borders are hidden with a negative margin (top margin of -1px and left margin of -4px”) and the bottom/right borders are hidden because the iframe is bigger than its container – so it pushes outside and the #likebox-frame overflow:hidden takes care of hiding it.

That’s it. Worked out quite nicely.