Use own CSS-Style for TabContainer

Hey I had the same problem

See my implementation below. I think it can be help you.

.CustomTabStyle .ajax__tab_header { vertical-align:middle; font-family:verdana,tahoma,helvetica;font-size:11px;background:url(Images/tab-line.gif) repeat-x bottom;}.CustomTabStyle .ajax__tab_outer {background:url(Images/tab-right.png) no-repeat right;height:23px;}.CustomTabStyle .ajax__tab_inner {padding-left:3px;background:url(Images/tab-left.png) no-repeat;}.CustomTabStyle .ajax__tab_tab {height:13px;padding-top:5px; padding-left:5px; padding-right:6px; margin:0;background:url(Images/tab.png) repeat-x;}.CustomTabStyle .ajax__tab_hover .ajax__tab_outer {background:url(Images/tab-hover-right.png) no-repeat right;}.CustomTabStyle .ajax__tab_hover .ajax__tab_inner {background:url(Images/tab-hover-left.png) no-repeat;}.CustomTabStyle .ajax__tab_hover .ajax__tab_tab {background:url(Images/tab-hover.png) repeat-x;}.CustomTabStyle .ajax__tab_active .ajax__tab_outer {background:url(Images/tab-active-right.png) no-repeat right;}.CustomTabStyle .ajax__tab_active .ajax__tab_inner {background:url(Images/tab-active-left.png) no-repeat;}.CustomTabStyle .ajax__tab_active .ajax__tab_tab {background:url(Images/tab-active.png) repeat-x;}.CustomTabStyle .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;}

.CustomTabStyle .ajax__tab_header { vertical-align:middle; font-family:verdana,tahoma,helvetica;font-size:11px;background:url(Images/tab-line.gif) repeat-x bottom;}
.CustomTabStyle .ajax__tab_outer {background:url(Images/tab-right.png) no-repeat right;height:23px;}
.CustomTabStyle .ajax__tab_inner {padding-left:3px;background:url(Images/tab-left.png) no-repeat;}
.CustomTabStyle .ajax__tab_tab {height:13px;padding-top:5px; padding-left:5px; padding-right:6px; margin:0;background:url(Images/tab.png) repeat-x;}
.CustomTabStyle .ajax__tab_hover .ajax__tab_outer {background:url(Images/tab-hover-right.png) no-repeat right;}
.CustomTabStyle .ajax__tab_hover .ajax__tab_inner {background:url(Images/tab-hover-left.png) no-repeat;}
.CustomTabStyle .ajax__tab_hover .ajax__tab_tab {background:url(Images/tab-hover.png) repeat-x;}
.CustomTabStyle .ajax__tab_active .ajax__tab_outer {background:url(Images/tab-active-right.png) no-repeat right;}
.CustomTabStyle .ajax__tab_active .ajax__tab_inner {background:url(Images/tab-active-left.png) no-repeat;}
.CustomTabStyle .ajax__tab_active .ajax__tab_tab {background:url(Images/tab-active.png) repeat-x;}
.CustomTabStyle .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;}

i think the problem is with the ajax__tab_inner. there seems to be some sort of phantom 2px right padding that won't go away, and/or ajax__tab_tab with a phantom 2px right margin, i can't really tell which. either way, i can't get it to disappear for anything :( the only fix i can see is to manually adjust your padding/margins (whichever way you want to fix it) minus 2px, so padding: 5px 3px 5px 5px;