Why is my Facebook [recommend] button getting cut off at bottom?

Why is my button being开发者_StackOverflow社区 cut off at the bottom? It should have a height of 21px. It's visible here:

http://mayacove.com/dev/sm/test_like.html

You could try hand-code a css file with something like the following

a.connect_widget_like_button {
    padding:3px 4px !important;
}

Although admittedly this is sort of a kludge.

EDIT: The other answer seems better, but you also seem to need a bigger width. You should modify your inline iframe styles.

<iframe [...] height:23px; width:101px; [...]>

According to http://developers.facebook.com/docs/reference/plugins/like/ the height of the iframe should be 35px when using the standard layout. If you look at the dimensions of your button, it's got a height of 24px, so it just isn't going to fit into 21px.

The height of your iFrame is not tall enough to fit the entire button. Plus you have assigned an inline style of overflow:hidden so any excess content will not show.

If you change the iFrame height from 21px to something like 24px, it shows up the full button:

<iframe src="http://www.facebook.com/plugins/like.php?&lt;%=thisURL%&gt;&amp;show_faces=false&amp;width=450&amp;action=recommend&amp;font=verdana&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:24px; width:100px; overflow:hidden; " allowtransparency="true"></iframe>

Also, I noticed in your iFrame inline style you have assigned two widths:

... width:450px; height:24px; width:100px; ...

You will need to remove one of those declarations.

Regards, Dan