Ajax Toolkit Tab Panel Styling Problem

Hi all,

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


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,

/*#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

Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

I have attached two CSS classes ... Have it replaced and see

PS: I have removed the height element from both ....
.MyTabStyle .ajax__tab_tab {

.MyTabStyle .ajax__tab_header .ajax__tab_outer {
border-right:1px solid #666666;
border-top:1px solid #AAAAAA;

Open in new window


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
iflashAuthor Commented:
Very good!!!! I cant believe its as simple as that.
thank you very much
Very good. I also had this same problem and it fixed it right up in IE8.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.