아약스 탭 컨테이너 CSS가 제대로 표시되지 않습니다.

Question

아래와 같이 AJAX 탭 컨테이너를 사용하고 있습니다. 탭 패널 헤더의 서식을 지정하는 CSS가 있습니다. 거기에 이미지를 사용했습니다 (연한 파란색). 이제 나는 2 가지를 원합니다 : 1. 점선 상자를 제거하고 싶습니다. 2. 선택한 탭이 연한 파란색이되게하고 싶습니다. (I는 선택한 탭에 오지 않아 그것의 단지. 연한 파란색 이미지가 배경에 존재하는 것을 알고)

점선 상자가 윤곽에서 오는

<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;으로 설정하고 어떤 일이 발생하는지 확인하십시오. 댓글에

답변 :

가 그럼 난 "내 프로필"과 "주소록"에 대한 마크 업이 표시되지 않습니다. 그래서 나는 이것이 "out of the box"ASP.NET 물건이라고 가정하고있다. 그러나 그것을 추가해야하는 것은 "내 프로필"및 "주소록"링크입니다. 당신은이처럼 요소에 클래스를 추가 할 수

<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> 

그래서 생성 된 HTML이 같은 것입니다 가정

다음 스타일 시트에 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; 
}