Habe leider gerade festgestellt, dass die Lösung nur im FF funktioniert. Der IE interpretiert die 'width: 100%'-Angabe leider so, dass nicht der restliche freie Bereich aufgefüllt wird, sondern die Breite des Füllers auf die volle Breite der Tabelle gesetzt wird und somit die Tabelle breiter wird, als sie soll. Gibt es dafür eine Lösung?
Ich habe mittlerweile auch versucht, das mit div-Elementen hinzubekommen, aber auch da bekomme ich keinen Füller hin.
Der CSS-Code dazu:
div.tableft { height: 20px; width: 4px; padding: 0px; display: inline; float:left;}
div.tabmid { cursor: pointer; height: 20px; padding: 0px; background-image: url(tabback.png); font-family: Verdana,Tahoma,sans-serif; font-size: 8pt; font-weight: bold; color: #ffffff; text-align: center; display: inline; float:left;}
div.tabright { height: 20px; width: 4px; padding: 0px; display: inline; float:left;}
div.tabfill { height: 19px; width: 100%; padding: 0px; display: inline; float:left; border-width: 0px 0px 1px 0px; border-style: solid; border-color: #505050;}
div.outer { border-width: 1px; border-style: dotted; border-color: #000000; overflow: hidden; }
Zusammen mit diesem HTML-Code:
<div class="outer" style="width: 300px;">
<div class="tableft"><img src="gfx/<?php echo $layout;?>/tableft.png" width="4" height="20" border="0" alt=""></div>
<div class="tabmid">Titel des Tabs</div>
<div class="tabright"><img src="gfx/<?php echo $layout;?>/tabright.png" width="4" height="20" border="0" alt=""></div>
<div class="tabfill"></div>
<div style="clear:both"></div>
</div>