I’m trying add a tab to my web page that looks like this: 
Using this example as a basis, I’ve gotten it partially working. My case differs because I want the text section to be a fixed with, but the tail section to dynamically resize to take up the rest of the tab’s container.
It looks good in IE 6, but doesn’t really take up the full width of the container. In Firefox 3 it doesn’t render well at all:
(the red is a blank area between the spans).
How do I get this to render properly in both IE6 and Firefox to take up the full width specified for #Tab? #Tab4 is the area I’d like to size to take up as much room as possible.
<style type='text/css'> #Tab { width: 300px; } #Tab1 { background: #000 url(BlueTabSprite.png) no-repeat 0 -136px; display: inline-block; height: 23px; padding-left: 4px; } #Tab2 { background: #000 url(BlueTabSprite.png) repeat-x 0 -242px; display: inline-block; overflow: hidden; padding-top: 4px; height: 19px; width: 100px; } #Tab3 { background: #000 url(BlueTabSprite.png) no-repeat right -30px; display: inline-block; height: 23px; padding-right: 6px; } #Tab4 { background: #000 url(BlueTabSprite.png) repeat-x 0 -83px; display: inline-block; height: 23px; width:60% } #Tab5 { background: #000 url(BlueTabSprite.png) no-repeat right -189px; display: inline-block; height: 23px; padding-right:6px; } </style> <div id='Tab'> <span id='Tab1'> <span id='Tab3'> <span id='Tab2'>Test Tab</span> </span> </span> <span id='Tab5'> <span id='Tab4'></span> </span> </div>
This is a simplified version that works: