How to Style the ASP.NET AJAX Tab Control:

The method for changing the style of the tab control, aka the TabContainer, that actually works is as follows:

1. For Visual Studio 2005/ASP.NET 2.0, download the source code for the AJAX Control Toolkit from this page: http://ajaxcontroltoolkit.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=11121 – make sure you grab the version with the source code! Note: If you’re using VS 2008, and you have Service Pack 1 installed, you already have the latest version of the Controls. If you don’t have VS 2009 SP1, you should get it immediately! If you have SP1 but not the Source Code, you can grab the version with the Source Code (the top download link).

2. Open the .ZIP archive and extract the tabs.css file, and the tab images – get all 10 of the .gif files that start with "tab".

3. Place the .gif files into an existing folder in your website, then, in Visual Studio, right-click that folder in Solution Explorer and "Add Existing item…" for each image file. Alternately, you can "Add…New Folder" in Visual Studio first, or create the folder in Windows Explorer/My Computer, then use "Add Existing item…" to add the folder, then the images, to your Visual Studio project.

4. Open the "tabs.css" file, and Copy the entire XP style. Paste it into a .CSS file in your project; you can use your existing main .CSS file, or add a new separate one.

5. In the .CSS file in your project, edit this first part of each entry for the tab control: .ajax__tab_xp . You want to change it slightly, such as to .ajax__tab_xp2 – that is, add the number 2 to the end. Do this for each entry in the XP style; do it only for the first item on each line. Make a note of the new name; you’ll need it in step 9.

6. Still in the .CSS file in your project, go through each entry that contains a URL reference to a .gif file—the WebResource.axd? reference—and edit it to point to the .gif files you added to your project in step 3, including the Relative path to the images’ directory. For example, if you placed the .gif images into a folder called "images" in your website’s root folder, and your CSS files are in a separate folder directly under the root folder, such as "styles", the reference should look like this (be sure you don’t accidentally erase any style text from the end of each line):

   background:url(../images/tab.gif)

7. At this point, if you view the page in a browser, you will see the issue mentioned above: the infamous "blank spot", or missing pixels, along the right edge of each tab image. Here is what it looks like (note the "empty" line just to the left of the right edge of each tab):

   If you are lucky, and/or using a newer version of the Controls that doesn’t have this flaw, you can skip the next step.

8. Next, apply the second step of HalH’s fix as mentioned above: remove "padding-right:4px;" from the definition of ‘.ajax__tab_outer’. Depending on which version of the Toolkit you have, this may take care of the problem completely; if not, you may need to employ the first step of Hal’s fix: remove the reference to ‘tab-line.gif‘ from the ‘.ajax__tab_header’ definition – that is, delete the entire "background" portion of the style. Note that this will also most likely remove the line from the top of the TabContainer control; you will have to try it and decide for yourself what an acceptable compromise is for your situation.

9. Finally, open the page in which you placed the tab controls, in Source view. Edit the opening TabContainer tag to add a CssClass reference to your new style. For the example above in step 5, the tag would look like this:

   <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1" CssClass="ajax__tab_xp2">

At this point, you will have a tab control that looks exactly the way a default-styled tab control would look! However, the difference is that you can now change the styles in the ajax__tab_xp2 class in your .CSS file, and the changes you make will show up in the web page.

Additional Points:

[Thanks to the Commenters for some of these]

• I have heard from a few people that there is a noticeable flicker the first time they move the mouse over the Tabs. This is likely caused by some of the images not being downloaded until the user mouses over or clicks one of the Tabs. You can fix this by pre-loading the image files. There are various ways to accomplish this, including using JavaScript to pre-load the images, but the method I prefer involves using CSS to have the images loaded, but not shown, during initial page load. First, identify which images are not loading automatically;  it is likely to be the images with "hover" in their title, such as "tab-hover.gif", and perhaps the main "tab.gif" and tab-line.gif". Next, you will want to create a CSS style in your CSS file, such as this one:

  .PreloadedImage {display:none;}

  Finally, you will want to apply this style to the images in question, by placing the images somewhere on the web page, preferably at the bottom of the page, inside a <div> or <span> tag, and adding CssClass="PreloadedImage" to the <div> or <span> tag. This will cause the images to be loaded when the page loads, well before they are needed during a MouseOver or Click. The end result is that the download flicker will not occur.

• As Ravee noted in a comment below, depending on the size of the font you use for the Tab headers, you may want to increase the height of the tabs from the default of 13 to a larger size such as 21, by changing the ".ajax__tab_xp2 .ajax__tab_tab" line, like this:

  .ajax__tab_xp2 .ajax__tab_tab {height:21px; [etc. ...]

The XP style from the "tabs.css" file:

I have received a couple of comments from people who have not been able to locate the "XP style" I mentioned in the tabs.css file.

So, here are the XP styles, as pulled directly from my copy of the "tabs.css" file, re-named with a "2" at the end. I have commented out the problematic style "padding-right:4px;" on ".ajax__tab_xp2 .ajax__tab_outer", so you should be able to use these styles as-is, after editing the image locations to point to your .gif files and adding the "CssClass="ajax__tab_xp2" attribute to the TabContainer tag in your .ASPX file—note the double underscore after "ajax". If you still experience the problem shown in #7 above, you may need to make the additional change of eliminating ‘tab-line.gif‘ from the ‘.ajax__tab_header’ definition, as noted in #8 above.

Note: these worked as-is on my PC, after changing the image locations; your mileage may vary.

/* xp theme */

/* Please note: as noted in one of the comments, and above, you must change the "WebResource.axd?"-style image URL references to point to the location of the image files on your server, or the Tab images will not show. The easiest approach is to replace the entire reference with a relative URL to the images. For instance, if your images are in a directory named "images" under the root of your site, and your .CSS files are likewise in a separate folder under your root, the following syntax will work:

{background:url(../images/tab-hover-right.gif) no-repeat right;}

You will, of course, need to adjust the relative path to match the location of the .CSS file and the images in your application.

Thanks to the anonymous Commenter who pointed the problem out; although I had encountered this, and fixed it, in my own application, I had neglected to post the fix here.  */

.ajax__tab_xp2 .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY1rmrJJ7SjYIGSDdAdtNw1Ew2&t=633167421400000000) repeat-x bottom;}

.ajax__tab_xp2 .ajax__tab_outer {/*padding-right:4px;*/background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY1yrs7q_zNUWaBBHgGRYOHKQ2&t=633167421400000000) no-repeat right;height:21px;}

.ajax__tab_xp2 .ajax__tab_inner {padding-left:3px;background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY133ijxBIREEOoObFED_Bhzw2&t=633167421400000000) no-repeat;}

.ajax__tab_xp2 .ajax__tab_tab {height:13px;padding:4px;margin:0;background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbv_dPXVoiLJ4geaEoszM6Zx7A4pJ2521Vwp4VsPeLe2fQ2&t=633167421400000000) repeat-x;}

.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_outer {background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY1rJjD_WkIfACTs9HQKpeKUA2&t=633167421400000000) no-repeat right;}

.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_inner {background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY1rMUVO7awInbuj7kuhms0Aw2&t=633167421400000000) no-repeat;}

.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_tab {background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY1v5hLjjGOCMpBlMfF8JzFbA2&t=633167421400000000) repeat-x;}

.ajax__tab_xp2 .ajax__tab_active .ajax__tab_outer {background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY11YFCEA-F1KrZBMAZZJHpInefUOk0Ib7CmvpoDZVzyh41&t=633167421400000000) no-repeat right;}

.ajax__tab_xp2 .ajax__tab_active .ajax__tab_inner {background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY1jldUXO80Ye5rs84ruU2hGw2&t=633167421400000000) no-repeat;}

.ajax__tab_xp2 .ajax__tab_active .ajax__tab_tab {background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY1rn-Bcdsd-Psg-56pH8vCFg2&t=633167421400000000) repeat-x;}

.ajax__tab_xp2 .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;}

/******************************************************************************************************/