I have a tabs control on my page and the tab headers and not diplaying correctly. I am using the default stylesheet (I'm not overwritting) and the tabs appear to have a strip taken out of the bottom of each tab like a white block overlays the bottom of the text part of the tab and the left edge image. The right image is complete on each tab.
Does anyone know what could be doing this and how I can correct it? I'd like to use the defaults if possible.
This is a Link to show the problem please download it (Note : the module not work with internet explorer despite it work good under firfox and chrome)
Download :rapidshare.com/files/214295724/Tab.JPG.html
(note : i created a the module Tabs and I put the CSS file into the DesckTopModules/Tab folder and i was renamed it to Module.css to be detected by DNN framework as the CSS module file for the Tab Module)
Thanks
____________________________________________________this is a css tabs code___________________________________________________
/* default layout */
.ajax__tab_default .ajax__tab_header {white-space:nowrap; background-color:White}
.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block;background-color:White}
.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block;background-color:White}
.ajax__tab_default .ajax__tab_tab {height: 21px;margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block;background-color:White}
/* xp theme */
.ajax__tab_xp .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-line.gif")%>) repeat-x bottom;}
.ajax__tab_xp .ajax__tab_outer {padding-right:4px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-right.gif")%>) no-repeat right;height:21px;}
.ajax__tab_xp .ajax__tab_inner {padding-left:3px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-left.gif")%>) no-repeat;}
.ajax__tab_xp .ajax__tab_tab {height:13px;padding:4px;margin:0;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab.gif")%>) repeat-x;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-right.gif")%>) no-repeat right;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-left.gif")%>) no-repeat;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover.gif")%>) repeat-x;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-right.gif")%>) no-repeat right;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-left.gif")%>) no-repeat;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_tab {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active.gif")%>) repeat-x;}
.ajax__tab_xp .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;}
/* scrolling */
.ajax__scroll_horiz {overflow-x:scroll;}
.ajax__scroll_vert {overflow-y:scroll;}
.ajax__scroll_both {overflow:scroll}
.ajax__scroll_auto {overflow:auto}
__________________________________________________the ascx page for the Tabs Module______________________________________
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="Tab.ascx.vb" Inherits="DesktopModules_Tab_tab" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<cc1:TabContainer ID="TabContainer1" runat="server" Width="300">
<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Image1">
<HeaderTemplate>
Image1 hail
</HeaderTemplate>
<ContentTemplate>
<%--<img src="im1.jpg" />--%>
tab one HTML content<br />
tab one HTML content<br />
tab one HTML content<br />
tab one HTML content<br />
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="Image2">
<ContentTemplate>
<img src="im2.png" />
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="Image3">
<ContentTemplate>
<img src="im3.png" />
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>