View Full Version : In IE8 there is a gap below the tabs

13 Apr 2012, 3:25 AM

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.
Code to create the tabs:

var tabs1 = Ext.createWidget('tabpanel', {
renderTo: "contentTab00",
activeTab: 0,
height: 295,
plain: true,
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.

13 Apr 2012, 3:39 AM
What version do you use? I don't see problems with the RC3

13 Apr 2012, 3:46 AM
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:

13 Apr 2012, 3:47 AM
Try to upgrade... to 4.1RC3

7 Jun 2012, 5:41 AM
It will be great if anyone can help.
As the bug is still present in my code after upgrading to extJS 4.1

8 Jun 2012, 2:00 AM
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.