контейнер вкладки ajax CSS не отображается правильно

Question

Я использую контейнер AJAX Tab, как показано ниже. У меня есть CSS для форматирования заголовков панели вкладок. Я использовал изображения там (светло-голубой). Теперь я хочу 2 вещи: 1. Я хочу избавиться от пунктирной коробки 2. Я хочу, чтобы выбранная вкладка стала голубым цветом. (Я знаю, что светло-синий изображение присутствует на заднем плане. Его только что его не выходя на выбранной вкладке)

<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" 
        CssClass="ajax__tab_lightblue-theme"> 
        <asp:TabPanel runat="server" HeaderText="My Profile" ID="tbpnlMyProfile"> 
         <HeaderTemplate> 
          My Profile</HeaderTemplate> 
         <ContentTemplate> 
          <table style="width: 100%;"> 
           <tr> 
            <td class="colwid colht"> 
             <strong><a href="#" id="lnkEditMyInfo" class="small-heading">Edit My Info</a> 
             </strong> 
            </td> 
            <td> 
             &nbsp;<asp:Label ID="lblFirstNameMyProfile" runat="server" Text="First Name"></asp:Label> 
            </td> 



.ajax__tab_lightblue-theme .ajax__tab_header 
{ 
font-family:arial,helvetica,clean,sans-serif; 
font-size:small; 
border-bottom:solid 5px #c2e0fd; 
} 
.ajax__tab_lightblue-theme .ajax__tab_header .ajax__tab_outer 
{ 
background-image:url('Images1/lightblue.jpg') #d8d8d8 repeat-x; 
margin:0px 0.16em 0px 0px; 
padding:1px 0px 1px 0px; 
vertical-align:bottom; 
border:solid 1px #a3a3a3; 
border-bottom-width:0px; 
} 
.ajax__tab_lightblue-theme .ajax__tab_header .ajax__tab_tab 
{  
color:#000; 
padding:0.35em 0.75em;  
margin-right:0.01em; 
} 
.ajax__tab_lightblue-theme .ajax__tab_hover .ajax__tab_outer 
{ 
background-image: url('Images1/lightblue.jpg') #bfdaff repeat-x left -1300px; 
} 
.ajax__tab_lightblue-theme .ajax__tab_active .ajax__tab_tab 
{ 
color:#000; 
} 
.ajax__tab_lightblue-theme .ajax__tab_active .ajax__tab_outer 
{ 
background-image:url('Images1/lightblue.jpg') #ffffff repeat-x left -1400px; 
} 
    .ajax__tab_lightblue-theme .ajax__tab_body 
{ 
font-family:verdana,tahoma,helvetica; 
font-size:10pt; 
padding:0.25em 0.5em; 
background-color:#ffffff;  
border:solid 1px #808080; 
border-top-width:0px; 
} 

Answer 1

пунктирная коробка поставляется с контуром, это является особенностью браузера которые все браузеры выполняют по-разному. Вы можете отключить его, добавив стиль outline:none;. С учетом сказанного я бы не рекомендовал его, так как люди с ограниченными возможностями полагаются на это, когда табулируют через веб-сайты.

Что касается места под вкладкой адресной книги. Это, скорее всего, нежелательное дополнение или маржа. Установите маржу и отступы для адресной книги до padding:0; и margin:0; и посмотрите, что произойдет.

ОТВЕТ НА ВАШ КОММЕНТАРИЙ:

Ну я не вижу Разметка для «Мой профиль» и «Адресная книга». Поэтому я предполагаю, что это «из коробки» ASP.NET. Но то, что вам нужно добавить, это ссылки «Мой профиль» и «Адресная книга».

Так предполагается, что ваш генерируется HTML-то вроде этого:

<ul> 
    <li><a href="">My Profile</a></li> 
    <li><a href="">Address Book</a></li> 
</ul> 

Вы бы добавить класс к вашему элементу, как это:(обратите внимание на класс tabednav)

<ul class="tabednav"> 
    <li><a href="">My Profile</a></li> 
    <li><a href="">Address Book</a></li> 
</ul> 

Затем добавьте CSS в таблицу стилей:

.tabednav li a {outline:none;} 

Answer 2

Поскольку вы используете AjaxToolKit, задайте в своем CSS следующее.

/*Remove the border from the TabStrip*/ 
.ajax__tab_lightblue-theme .ajax__tab_header 
{ 
    border-bottom:none; 
} 

/*Add a border to the active tab*/ 
.ajax__tab_lightblue-theme .ajax__tab_active .ajax__tab_outer 
{ 
    border:solid 5px #c2e0fd; 
}