Ajax Toolkit Tab Panel Styling Problem

Hi all,

I've attempted to do my own tab style and you can see from this site:

http://caseytours.alykacms.com.au/Tour/Tour-Itinerary.aspx?TourID=1

Unfortunately, this looks great on Internet Explorer 8 (IE) only, but on firefox and chrome, the header tab is a bit disjointed and broken.

I'm wondering if anyone know how to fix it so it looks great on all major browsers (IE, Firefox, Chrome and Safari) using the same theme.

The CSS i used is attached under "code".

The code I used to refer my tab CSS is simply:

<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1"         Width="600px" AutoPostBack="true" onactivetabchanged="TabContainer1_ActiveTabChanged" CssClass="MyTabStyle">

Thank you very much!

Best regards,

iFlash
/*#Tab Styling#*/

.MyTabStyle .ajax__tab_tab {        
height: 27px;       
padding: 7px 7px 7px 7px; 
width: 120px;       
margin: 0;     
}  


        .MyTabStyle .ajax__tab_header
        {
font-family: arial;verdana,tahoma,helvetica;        
font-weight: bold;
text-transform: uppercase;
font-size: 11px;        
border-bottom: solid 1px #999999;
display: block; 
height: 28px;
color: #ffffff;
        }

        .MyTabStyle .ajax__tab_header .ajax__tab_outer
        {
padding-right: 4px;        
height: 21px;        
background-color: #680001;        
margin-right: 2px;        
border-right: solid 1px #666666;        
border-top: solid 1px #aaaaaa   
        }

        .MyTabStyle .ajax__tab_header .ajax__tab_inner
        {
padding-left: 3px;        
background-color: #680001; 
        }

        .MyTabStyle .ajax__tab_hover .ajax__tab_outer
        {
color: #f8a032;
        }

        .MyTabStyle .ajax__tab_hover .ajax__tab_inner
        {
color: #f8a032;  
        }

        .MyTabStyle .ajax__tab_active .ajax__tab_outer
        {
background-color: #a72c31;        
border-left: solid 1px #999999;   
        }

        .MyTabStyle .ajax__tab_active .ajax__tab_inner
        {
background-color: #a72c31;          
        }

        .MyTabStyle .ajax__tab_body
        {
font-family: verdana,tahoma,helvetica;        
font-size: 10pt;        
border: 1px solid #999999;        
border-top: 0;        
padding: 12px;       
background-color: #ffffff;  
width: 600px;
        }

Open in new window

iflashAsked:
Who is Participating?
 
masterpassConnect With a Mentor Commented:
I have attached two CSS classes ... Have it replaced and see

PS: I have removed the height element from both ....
.MyTabStyle .ajax__tab_tab {
margin:0;
padding:7px;
width:120px;
}

.MyTabStyle .ajax__tab_header .ajax__tab_outer {
background-color:#680001;
border-right:1px solid #666666;
border-top:1px solid #AAAAAA;
margin-right:2px;
padding-right:4px;
}

Open in new window

0
 
iflashAuthor Commented:
Very good!!!! I cant believe its as simple as that.
thank you very much
0
 
Minion1Commented:
Very good. I also had this same problem and it fixed it right up in IE8.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.