In IE8 there is a gap below the tabs

[VedvratSharma]

Hi,

I have used tabpanel and there is gap observed in case of IE8 browser as shown by the blue arrow.
The gap is not observed incase of FF & Chrome.
Screenshot:
33983
Code to create the tabs:


var tabs1 = Ext.createWidget('tabpanel', {
renderTo: "contentTab00",
activeTab: 0,
height: 295,
plain: true,
border:0,
defaults :{
autoScroll: true,
bodyPadding: 10
},
items: [{
title: 'Overview',
contentEl: 'script'
},{
title: 'Other Details',
contentEl: 'markup'
}
]
});


I did a research for the way the component gets rendered in IE8 and found that the third <tr> tag where the bottom portion containing images should be present is not available in IE8.

Please suggest a way to fix the gaps in IE8.
Thanks in advance.

[tvanzoelen]

What version do you use? I don't see problems with the RC3

[VedvratSharma]

I am using ExtJS 4.0.7 as downloaded from http://cdn.sencha.io/ext-4.0.7-gpl.zip
I am encountering the issue in IE8 version as shown below:
33984

[tvanzoelen]

Try to upgrade... to 4.1RC3

[VedvratSharma]

It will be great if anyone can help.
As the bug is still present in my code after upgrading to extJS 4.1

[tvanzoelen]

You have set plain to true, then you do not show the background of the tabBar. See the docs.

In that case you have the option, to set plain to false, or modify the cls of the tabbar to your needs. Eg adjusting backgroundcolor or paddings.