TabContainer样式设置(2)

IE下显示:

 

火狐下显示:

样式文件:

.AjaxTabStrip .ajax__tab_header
{
    font-size: 10pt;   
    padding-left:0px;
    height:28px!important;
    height:20px;   
    padding-top:2px;
     border-bottom:0;
/* border-top:1px solid #cccccc;
    border-left:1px solid #cccccc;
    border-right:1px solid #cccccc;*/
}

/* 默认tab设置 */
.AjaxTabStrip .ajax__tab_tab
{
    font-size: 9pt;
    padding-top:4px!important;
    padding-top:6px;
   color:Black;
    padding-bottom:4px;
    padding-left:18px!important;
    padding-left:0;
    height:29px!important;
    height:18px;     
    width:100px;
    background-color: #ffffff;
    border:#cccccc 1px solid;
    border-bottom:0;   
    CURSOR: pointer;
    text-align:center;
    vertical-align:middle;
}

/* 鼠标经过设置*/
.AjaxTabStrip .ajax__tab_hover .ajax__tab_tab
{
    /*font-weight:bold;
    text-decoration: underline;*/
    color:Red;
}
/* 当前激活选项卡设置*/
.AjaxTabStrip .ajax__tab_active .ajax__tab_tab
{
    /*background-color: #f9fff5;
    font-weight:bold;*/
BORDER-RIGHT: #C2E2ED 1px solid;
BORDER-TOP: #C2E2ED 1px solid;
background-color:#f9fff5;
/*FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cccccc);*/
BORDER-LEFT: #C2E2ED 1px solid;
CURSOR: pointer;
BORDER-BOTTOM: 0;
}


/*Body设置*/

.AjaxTabStrip .ajax__tab_body
{
border:#C2E2ED 1px solid;
border-top:0;
padding: 0px;
background-color: #ffffff;
}

 

下面是设置HTML的一部分。解决顶部横线不好设置问题。傻傻的(!important为兼容火狐浏览器用)

TAB1

<cc1:TabContainer Style="margin: 0px; width: 100%; text-align: left; border-bottom-style: none"
                    ID="TabContainer1" runat="server" Font-Size="10pt" ActiveTabIndex="0" BackColor="#F9FFF5"
                    BorderColor="#F9FFF5" Font-Bold="False" CssClass="AjaxTabStrip" OnClientActiveTabChanged="ActiveTabChanged">
                    <cc1:TabPanel runat="server" ID="TabPanel1" HeaderText="TabPanel1">
                        <ContentTemplate>
                            <ajax:UpdatePanel ID="UpdatePanel1" runat="server">
                                <ContentTemplate>
                                    <div style="height: 380px!important;height: 364px; width: 100%; background-color: #f9fff5;">
                                        <table style="width: 100%;" cellspacing="0" cellpadding="0" border="0">
                                            <tbody>
                                                <tr>
                                                    <td style="" colspan="6">
                                                    <table cellpadding="0" cellspacing="0" style="width:100%; ">
                                                    <tr>
                                                    <td style="width:98px!important;width:100px; border-top:0; "></td>
                                                    <td style="width:6px; border-top: #C2E2ED 1px solid;"><table cellpadding="0" cellspacing="0" style="width:100%; "><tr><td style="width:100%; "></td></tr></table></td>
                                                    <td style="width:100px; border-top: #C2E2ED 1px solid;"><table cellpadding="0" cellspacing="0" style="width:100%; "><tr><td style="width:100%; "></td></tr></table></td>
                                                    <td style="width:6px; border-top: #C2E2ED 1px solid;"><table cellpadding="0" cellspacing="0" style="width:100%; "><tr><td style="width:100%; "></td></tr></table></td>
                                                    <td style="width:100px; border-top: #C2E2ED 1px solid;"><table cellpadding="0" cellspacing="0" style="width:100%; "><tr><td style="width:100%; "></td></tr></table></td>
                                                    <td style=" border-top: #C2E2ED 1px solid; width:auto;height: 4px">
                                                       &nbsp;</td>
                                                    </tr>
                                                    </table>
                                                    </td>
                                                   
                                                </tr>

 

TAB2:

<cc1:TabPanel runat="server" ID="TabPanel2" HeaderText="TabPanel2" Style=" width:100%; vertical-align:middle;">
                        <ContentTemplate>
                            <div style="height: 380px!important;height: 364px; width: 100%; background-color: #f9fff5;">
                                <ajax:UpdatePanel ID="UpdatePanel4" runat="server">
                                    <ContentTemplate>
                                        <table style="width: 100%;" cellspacing="0" cellpadding="0" border="0">
                                            <tbody>
                                                <tr>
                                                 <td style="" colspan="6">
                                                    <table cellpadding="0" cellspacing="0" style="width:100%; ">
                                                    <tr>
                                                    <td style="width:98px!important;width:100px; border-top: #C2E2ED 1px solid;; ">&nbsp;</td>
                                                    <td style="width:6px; border-top: #C2E2ED 1px solid;"><table cellpadding="0" cellspacing="0" style="width:100%; margin:0px;"><tr><td style="height: 8px; margin:0px;"></td></tr></table></td>
                                                    <td style="width:98px!important;width:100px; border-top:0;">&nbsp;</td>
                                                    <td style="width:6px; border-top: #C2E2ED 1px solid;"><table cellpadding="0" cellspacing="0" style="width:100%;margin:0px;"><tr><td style="height: 8px; margin:0px;"></td></tr></table></td>
                                                    <td style="width:100px; border-top: #C2E2ED 1px solid;">&nbsp;</td>
                                                    <td style=" border-top: #C2E2ED 1px solid; width:auto;height: 10px">&nbsp;</td>
                                                    </tr>
                                                    </table>
                                                    </td>
                                                  
                                                </tr>


posted @ 2008-10-29 18:37  KevinWang  阅读(648)  评论(0编辑  收藏  举报