Problem mit Liste als Navi

[freakXHTML]

Hallo zusammen,
ich bastel mir gerade eine Navigationsleiste aus einer <ul> Liste. Ich möchte, dass das jedes <li> - Element einen Hintergrund hat. Das funktioniert auch, doch gibts ein Problem. Die Breite der <li> wird nicht angepasst. Sie ist immer nur so groß, wie der geschriebene Inhalt. Ich dachte, dies mittels min-width beheben zu können, doch interessiert dieser Befehl die Website anscheinend gar nicht. So sieht das aus:

 <div id="banner">
                 <ul id="navigation">
                         <li><a href="index.html">...</a></li>
                         <li><a href="page_news.html">...</a></li>
                         <li><a href="page_misses.html">...</a></li>
                         <li><a href="page_bewerbung.html">...</a></li>
                         <li><a href="page_sponsoren.html">...</a></li>
                         <li><a href="page_galerie.html">...</a></li>
                         <li><a href="page_shop.html">...</a></li>
                         <li><a href="page_tickets.html">...</a></li>
                 </ul>
 </div>

Und so sieht das CSS aus:

#banner {
 width: 1000px;
 background: url(layout/layout1.jpg) no-repeat;
 min-height:220px;
 
}
ul#navigation  {
  margin:0;
  padding:0;
  padding-top: 223px;
  list-style-type:none;
  font-size:16pt;
 
}
#navigation li {
  min-width: 200px; //bewirkt gar nichts!!
  border: 1px solid black; //zur besseren Sichtbarkeit
  margin-left:10px;
  float:left;
  text-align:center;
  background:url(layout/navi.jpg) no-repeat left top;
  list-style-type:none;

Könnt ihr mir helfen, mein Problem zu lösen. Ich habe um die <li> einen Rahmen gemacht, damit ich die genaue Begrenzung sehe.

Vielen Dank
lg, freakXHTML

 

[Bernhard]

Ergänz mal:

#navigation li {
  min-width: 200px; //bewirkt gar nichts!!
  border: 1px solid black; //zur besseren Sichtbarkeit
  margin-left:10px;
  float:left;
  text-align:center;
  background:url(layout/navi.jpg) no-repeat left top;
  list-style-type:none;
  [B]display:block[/B]
}

Edit: IE6 kennt min-width nicht!

 

[neuroleptika]

Tach Bernhard,
<li> ist bereits ein Blockelement.
(auch inline-Elemente werden wie Blockelemente behandelt wenn sie gefloatet sind)


@freakXHTML:
Die schließende Klammer fehlte im letzten style-Block.

Wenn der Fehler im IE7 und IE8 auftaucht wird es am quirks mode liegen.
DOCTYPE-Switch und seine Auswirkungen

 

[freakXHTML]

Es hat an der Klammer gelegt...oh man! Da quäl ich mich mit dem Fehler ab und übersehe so etwas....

Naja, vielen Dank
lg, freakXHTML

 

[hagent]

Tipp: Wenn solche Probleme auftauchen immer erst den w3c-validator prüfen lassen...

Ich habe auch mal ne halbe Stunde an so einem "Problem" gearbeitet :mrgreen:

 

[neuroleptika]

Es hat an der Klammer gelegt

Und was machst du mit dem IE6?
Bernhard "Edit: IE6 kennt min-width nicht!"

 

[freakXHTML]

IE6 kennt meines Wissens das ganze heutige CSS nicht. Für die Leute, die immer noch den Browser nutzen, sage ich nur: Gelitten!

 

[Bernhard]

IE6 kennt meines Wissens das ganze heutige CSS nicht. Für die Leute, die immer noch den Browser nutzen, sage ich nur: Gelitten!

IE6 hat noch eine Verbreitung von 20 - 25 %
Frag Deinen Auftraggeber doch mal, ob er auf 25 % seiner Kunden verzichten möchte...

Grüße
Bernhard

 

[neuroleptika]

Für die Leute, die immer noch den Browser nutzen, sage ich nur: Gelitten!

Kann man so so sehen.
Aber verkaufen kann man sowas nur schlecht.

Die meißten Sonderheiten im IE6 sind auf haslayout zurückzuführen.
Im IE7 ist das nicht großartig anders (nur anders dosiert).
In den meißten Fällen sind das nur wenige Zeilen css.

 

[koslowski]

Moin,

IE6 kennt meines Wissens das ganze heutige CSS nicht.

ich würde sagen du kennst es auch nicht, sonst hättest du kein Problem mit dem IE6. :mrgreen:

 

[freakXHTML]

spaßvogel!!!

lass das mal meine sorge sein. ich weiß, dass das keine gute einstellung ist, aber die website ist mir eigentlich voll WURST, aber ich viel das einfach noch machen....

Vielen Dank für eure Hilfe :mrgreen:
lg, freakXHTML