Liste mit "verlinktem" <span>

[Patrick Leuppert]

Hallo zusammen,

ich bin grad dabei eine horizontale Navigation zu basteln. Das ganze soll möglichst dynamisch sein. Ich verwende 3 Bilder für die Buttons (links, rechts und mitte), sodass sie sich je nach Textlänge in der Breite anpassen.

Hier der HTML-Quellcode dazu:

<ul>
 <li>
  <a href="#">
   <span class="NavBTNleft">
    <span class="NavBTNright">
     <span class="NavBTN">
      <span class="NavBTNpadding">
       cd-store 
      </span>   
     </span>
    </span>   
   </span>    
  </a>
 </li>
 <li>
  .....
 </li>
</ul>

Und hier das zugehörige CSS:

li {
 height: 19px;
 list-style: none;
 list-style-position:inside;
 padding-left: 5px;
 padding-right: 5px;
 float:left;
 overflow:hidden;
 display: inline;
}

ul {
 float: left;
 margin-left: 0px;
 padding-left: 0px;
}

.NavBTN {
 display: block;
 background: url('images/top_btn_bg.png');
 background-repeat: repeat-x;
 text-align: center;
 padding-left: 10px;
 padding-right: 10px;
 height: 19px;
}

.NavBTNleft {
 display: block;
 padding-left: 3px;
 background: url('images/top_btn_left.png') no-repeat left;

}

.NavBTNright {
 display: block;
 padding-right: 4px;
 background: url('images/top_btn_right.png') no-repeat right;
}

.NavBTNpadding {
 display: block;
 padding-top: 2px;
}

Das ganze funktioniert auch wunderbar in Firefox und Internet Explorer 7, aber nicht in Internet Explorer 6. Anbei 2 Screenshots von IE6 (1.jpg) und Firefox (2.jpg), da ich euch leider keinen Link posten kann.

Ich hoffe ihr habt brauchbare Ideen wie man das für den IE6 fixen kann.

Danke schonmal

*EDIT*
Es geht nicht um die Farbe oder die dicke des Textes, sondern lediglich um die Breite der Buttons und darum, dass sie nebeneinander und nicht untereinander angezeigt werden sollten.

 

[Bernhard]

Hallo Patrick,

vielleicht hilft Dir das hier weiter?

Grüße
Bernhard

 

[Patrick Leuppert]

Danke, werd ich mir mal anschauen.

 

[Patrick Leuppert]

Das ist zwar nicht die trafficsparende Methode, aber es funktioniert :-D

Vielen Dank