Tabbar doesn't work in internet explorer 8


I’ve managed to get the tabbar working in firefox and every other browser, but the tabbar container is being pushed to the right with no tabs in IE8.

I’ve attached a screenshot of how it looks and the following are the div statements I’m using to create the tabbar and first tab.

Could you give me any ideas of why it is doing this in IE8, please?

tabbar in (50.6 KB)


we need a demo to recreate the problem locally.

Hi Alexandra,

What do you mean by a demo, because I thought some screenshots would show the problem?

There are two things that seem to be happening:

  1. Although the tabbar area seems to be being rendered completely, it is being offset to the right so that it starts exactly halfway across it’s parent element (a td), hence it’s right half disappears.

  2. No tabs are being rendered.

I hope that helps. If you could let me know what you would want as a demo, I’ll try to put it together for you.



the demo means - sample (html page and all files that are necessary for this sample). Please check the sample in the tabbar package:


Hi Alexandra,

I’ve managed to identify the problem with IE.

It seems to be a problem with the css text-align attribute. Please see the attached file for an example of the problem.

If you display the file as is (you’ll have to adjust the paths to reflect where your tabbar css and js files are located), the tabbar container has no tabs and is positioned with it’s left edge at the center point of the page.

If you delete the text-align attribute from the center-prob style, the tabbar is displayed perfectly.

This page displays perfectly in Firefox etc. no matter whether the center attribute is there or not, so seems to be an IE only quirk.

It also only seems to apply to elements (e.g. divs or tables) that surround the tabbar div that are centered e.g. if you delete or re-instate the text-align attribute of the first div, the inside table or the tabbar itself, it doesn’t affect the centering of the tabbar container.

I need to be able to center things at different points in my page including an element that surrounds a tabbar (which may have elements other than the tabbar in it) and have it be consistent in all browsers, so could you suggest how I can do this, please?

Debbie (584 Bytes)


try to set text-align:left for the tabbar container to solve the problem

Hi Alexandra,

Well that seems to have worked. Thank you.

However, I had to do bit of tweaking as well to get to the point where the tabbar wasn’t clashing with other parts of my page.

What I ended up finding was that I can’t surround my tabbars with another div, because that div seems to adopt the alignment of the tabbar i.e. being left justified as well, instead of being centered as per it’s css style definition. However, if I replace the surrounding div with a table, then it seems to work fine and I can use any kind of alignment in my stylesheet without it being affected by the tabbar div styling.

Not sure why this would be the case, but I thought it might help someone else with a similar problem.

Alexandra, could you tell me how the tabbar functionality detects what divs to convert into tabs? Does it convert every div it finds inside the tabbar div into a tab or can I tell it which tabs to convert, so I can include some divs of my own inside a tabbar without them being affected by the tab conversion process?



how the tabbar functionality detects what divs to convert into tabs?

Yes, each child node will be converted to the tab

I can include some divs of my own inside a tabbar without them being affected by the tab conversion process?