I was experimenting with the AJAX Tab control extender which is part of ASP.NET AJAX Control Toolkit in Sharepoint. The bottom part of the tabs was being cut off for no apparent reason. When I would run the page locally, it would render fine but within Sharepoint, the text on the tabs was being cut off on the bottom. After several frustrating hours, I found out how to fix the CSS that was causing the problem.
After looking at the Tabs.css file, it appears that the right hand graphic on the tab control is set to a height of 21px. The tab itself with the text has a height of 13px. This can be remedied by modifying the xp theme to look like this:
.ajax__tab_xp .ajax__tab_tab {height:21px;padding:4px;margin:0;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab.gif")%>) repeat-x;}
The Tabs.css file can be found in the AJAX Control Toolkit (with source code). I changed the CSS used by my particular theme which in my case was /_themes/Wheat/Whea101165001.css
.ajax__tabs .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background-color:#EEE8AA;background:url("/it/images/tabs/tab-line.gif");background-repeat:repeat-x;background-position:bottom;}
.ajax__tabs .ajax__tab_outer {background:url("/it/images/tabs/tab-right.gif");background-repeat:no-repeat;background-position:right;height:21px;}
.ajax__tabs .ajax__tab_inner {padding-left:3px;background:url("/it/images/tabs/tab-left.gif");background-repeat:no-repeat;}
/* remove this line
.ajax__tabs .ajax__tab_tab {height:13px;padding:4px;margin:0;background-color:#EEE8AA;background:url("/it/images/tabs/tab.gif");background-repeat:repeat-x;}
*/
/* Add this one */
.ajax__tabs .ajax__tab_tab {height:21px;padding:4px;margin:0;background:url("/it/images/tabs/tab.gif") repeat-x;}
.ajax__tabs .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#EEE8AA;}
.ajax__tabs .ajax__tab_hover .ajax__tab_outer {background-color:#EEE8AA;background:url("/it/images/tabs/tab-hover-right.gif");background-repeat:no-repeat;background-position:right;}
.ajax__tabs .ajax__tab_hover .ajax__tab_inner {background-color:#EEE8AA;background:url("/it/images/tabs/tab-hover-left.gif");background-repeat:no-repeat;}
.ajax__tabs .ajax__tab_hover .ajax__tab_tab {background-color:#EEE8AA;background:url("/it/images/tabs/tab-hover.gif");background-repeat:repeat-x;}
.ajax__tabs .ajax__tab_active .ajax__tab_outer {background-color:#EEE8AA;background:url("/it/images/tabs/tab-active-right.gif");background-repeat:no-repeat;background-position:right;}
.ajax__tabs .ajax__tab_active .ajax__tab_inner {background-color:#EEE8AA;background:url("/it/images/tabs/tab-active-left.gif");background-repeat:no-repeat;}
.ajax__tabs .ajax__tab_active .ajax__tab_tab {background-color:#EEE8AA;background:url("/it/images/tabs/tab-active.gif");background-repeat:repeat-x;}
Also, by default, the CssClass used by the Tabcontrol is .ajax__tabs_xp. I changed mine to use .ajax__tabs so it would use the changed Css /_themes/Wheat/Whea101165001.css rather than the CSS used by the Tabcontrol.
Other resources that helped with this issue: