Webmaster Forum / HTML, CSS, Scripts / CSS / June 2006

I have made a mock up for a web application that requires the use of tabbed panels. I've looked at some good examples of how to implement the tab bar (e.g. sliding doors on a list apart), but I have a requirement to include an icon on each tab, "to make it look snazzy". So I have tried to roll my own.

I've got the screen looking pretty much the way I want (see http://asgillett.googlepages.com/app.html), but a problem occurs when an IE6 browser window is made too narrow for the tab bar. Each tab item tends to split up into multiple lines (see http://asgillett.googlepages.com/problem.jpg).

Can anyone suggest how to prevent IE6 from breaking a tab-item into multiple lines?

The structure of the tab bar is a div containing a list, and each list element consists of four parts:
- a div with background image for the left rounded corner
- an image of an icon with background image of the tab center
- a link with background image of the tab center
- a div with background image for the right rounded corner

<div class="tabs">
 <ul class="tab-bar">
   <li class="tab-item">
     <div class="tab-left"></div>
     <img src="skull.gif" class="tab-icon" alt="Skull"/>
     <a href="#" class="tab-label">Skull</a>
     <div class="tab-right"></div>
   </li>

If I set the exact width of each list item, then I get the behavior that I want. Unfortunately I don't know how to calculate the required width - it depends on the text size the user has selected (out of my control), the number of characters in the label and I don't know what else.

Oh, and it works fine in FireFox...

Andrew