How To Remove The Border From Facebook and YouTube Widgets
Facebook and YouTube have neat little widgets to help your website visitors easily subscribe to your videos and like your facebook page. The only problem is they both went ahead and put dog ugly borders around their widgets which you can't style using css because it's all in an iframe. Fortunately, we can still style our own content and here is a little trick you can use to hide those pesky borders.
It works by simply tucking the iframe under a div on your site. The markup and css looks like this:How To Remove The Border From Facebook and YouTube Widgets
<div style="overflow: hidden; width: 248px; height: 450px;"> <iframe src="http://www.facebook.com/plugins/likebox.php?href=xxx"/> scrolling="no" frameborder="0" allowTransparency="true" style="margin: -1px; width: 250px; height: 475px;"> </iframe> </div>
Do the maths on those widths and margins, and you'll see that the iframe is two pixels wider than the div with a -1 pixel margin on each side. Goodbye borders! Note the wrapping div is 25px shorter than the iframe to hide the Facebook Like Box developer link. You could always change that if you wanted.
Same deal with the YouTube widget, just experiment with the dimensions until you're happy.
Hope that helps.
Roger Keays is an artist, an engineer, and a student of life. Since he left Australia in 2009, he has been living as a digital nomad in over 40 different countries around the world. Roger is addicted to surfing. His other interests are music, psychology, languages, and finding good food. Click here to subscribe to his weekly blog, or stalk him on Facebook and Twitter.