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
