Stone Coast Web Design's Weblog

Navigation

Search

Blogroll

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

| |

E-mail

Total Posts: 112
This Year: 50
This Month: 4
This Week: 0
Comments: 0

Tuesday, October 23, 2007

AJAX Tab control: Tabs display incorrectly in IE7

Tuesday, October 23, 2007 8:09:26 AM (Eastern Standard Time, UTC-05:00) ( Javascript/AJAX | Sharepoint )

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:

Comments [0] | Trackback |

Name
E-mail
Home page

	Remember Me
Comment (HTML not allowed)
Enter the code shown (prevents robots):

Mostly Web Development

Navigation

Search

Categories

On this page

Archive

Blogroll