Listen (li) nebeneinander, variable Breite und IE5

[delirium]

Hallo,

ich habe in einer Seite zur Navigation verschiedene "Tabs" mit Listen erstellt. Mit "list-style-type:none" sorge ich dafür, dass die <li>s nebeneinander angezeigt werden. Damit die Breite automatisch festgelegt wird, habe ich eine "width"-Angabe weggelassen.

Das ganze funktioniert in Opera, Firefox und IE7 so, wie es soll. Nur der IE6 macht - mal wieder - Probleme. Wenn ich keine feste Breite angebe, werden die <li>s untereinander angezeigt, gebe ich eine feste Breite an, geht's. Allerdings möchte ich die Breite eben nicht festlegen. Habe es bereits mit "display:block" und "display:inline" versucht. Selbes Ergebnis.

Komme leider nicht weider und hoffe, Ihr könnt mir helfen.

Demo: http://onfpb.pytalhost.com/tab

HTML-Code:

  
[...]  
<div class="tab">  
  <div class="tab_tabs">  
  
  <!-- Haupt-Tabs -->  
  <ul class="tab">  
    <li><img src="BILD" alt="" /><div class="text"><a href="URL">NAME</a></div></li>  
    <li class="active"><img src="BILD" alt="" /><div class="text"><a href="URL">NAME AKTIV</a></div></li>  
  </ul>  
  <div class="clear"></div>  
  <div class="content">  
    INHALT  
  </div>  
[...]  

CSS-Code:

  
[...]  
ul.tab {  
  padding: 0px 0px 0px 25px;  
  margin: 0px;  
  font-family: verdana;  
  list-style-type: none;  
}  
  
ul.tab li {  
  margin-right: 10px;  
  color: #736658;  
  background: url(./img/tab/tab_inactive_bg.png);  
  float: left;  
}  
  
ul.tab li img {  
  margin: 9px 4px 0px 9px;  
  float: left;  
  padding: 0px;  
  width: 16px;  
  height: 16px;  
}  
  
ul.tab li .text {  
  padding: 9px 8px 0px 0px;  
  height: 24px;  
  background: url(./img/tab/tab_inactive_re.png) no-repeat right top;  
}  
  
ul.tab li.active .text {  
  background: url(./img/tab/tab_active_re.png) no-repeat right;  
}  
  
ul.tab li.active {  
  color: #fff;  
  background: url(./img/tab/tab_active_bg.png);  
}  
  
ul.tab a:link, ul.tab a:visited {  
  color: #5B5147;  
  text-decoration: none;  
}  
  
ul.tab a:active, ul.tab a:hover {  
  color: #7D7165;  
  text-decoration: none;  
}  
  
ul.tab li.active a:link, ul.tab li.active a:visited, ul.tab li.active a:active, ul.tab li.active a:hover{  
  color: #fff;  
}  
[...]  

Vielen Dank,
delirium

[Mathetyp]

Hallo

Versuch es mit einer prozentualen Angabe für die Breite. Ich hab es ähnlich und es klappt ganz gut.

MfG Mathetyp

[delirium]

Hallo

Versuch es mit einer prozentualen Angabe für die Breite. Ich hab es ähnlich und es klappt ganz gut.

MfG Mathetyp

Danke, aber dann wird die Breite doch nicht mehr dem Inhalt angepasst (Der "Tab" soll nur so breit wie nötig sein).

[Mathetyp]

Ich mir dein Demo mal angeschaut. wenn das Browserfenster zusammengeschoben wird oder der Schriftgrad vergrößert, fallen die Tabs auseinander bzw. fällt der Schrift aus den Tabs. Da solltest du sowieso etwas festigen. Die Größe der Tabs, kannst du ja auch manuell für jeden Einzelnen einstellen.

MfG Mathetyp

[delirium]

Die Größe der Tabs, kannst du ja auch manuell für jeden Einzelnen einstellen.

Wenn's anders nicht geht, werde ich's wohl so machen (müssen).
Darauf würde ich allerdings gerne verzichten, weil es den Quelltext aufbläht und unübersichtlicher macht. Zudem wird die Sprache auswählbar und damit variabel sein, so dass ich dann für jede Sprache die Breite separat festlegen müsste.