Vertikale Navigation (Liste) mit Textgrafiken

[cdash]

Hallo,

ich habe eine vertikale Navigation bei der ich Textgrafiken verwende:

<div id="main_left">
  <!-- Hauptnavigation -->
   <ul>
   <li><a href="company.php"><img src="img/img_de/company.gif" alt="Firmenprofil"/></a></li>
   <li><a href="shop.php"><img src="img/img_de/shop.gif" alt="Shop"/></a></li>
   <li><a href="test.php"><img src="img/img_de/test.gif" alt="Test" border="0"/></a></li>
   <li><a href="tip.php"><img src="img/img_de/tip.gif" alt="Tipps"/></a></li>
   <li><a href="reifensuche.php"><img src="img/img_de/tsearch.gif" alt="Reifensuche"/></a></li>
   <!--<li><a href="game.php"><img src="img/img_de/game.gif" alt="Games"/></a></li>
    <li><a href="merchandising.php"><img src="img/img_de/merchandising.gif" alt="Merchandising"/></a></li>
    <li><a href="win.php"><img src="img/img_de/win.gif" alt="Gewinnspiel"/></a></li> -->
   </ul>
  </div>

Die dazugehörigen Styles sehen folgendermaßen aus:

/* Hauptnavigation */
#main_left ul {
 margin-top: 180px;
 margin-left: 0px;
 padding-left: 0px;
}

#main_left li {
 list-style-type: none;

}

#main_left a {
 background-image: url(img/navi_bg.gif);
 display: block;
 height: 25px;
 margin-top: 0px;
}

#main_left a:hover {
 background-image: url(img/navi_bg.gif);
 background-position: 0px -25px;
}

Das ist nun nicht so super toll bei einer Navigation mit Grafiken zu arbeiten, dass lässt sich in dem Fall aber nicht anders lösen.

Mein Problem ist: Im Internet Explorer gibt es einen Abstand von 1 bis 2 Pixeln zwischen den Grafiken und ich bekomme den einfach nicht weg. Hat jemand eine Idee?

Ich habe das ganze zum besseren Verständniss auch noch mal hochgeladen.

Vielen Dank

[Zeromancer]

Hallo cdash,

<div id="main_left">

brauchst du das Div oder kannst du der <ul> die ID "main_left" geben?

<ul>
   <li><a href="company.php"><img src="img/img_de/company.gif" alt="Firmenprofil"/></a></li>

Leerzeichen nicht vergessen: <img src="" height="" width="" alt="" />!

-->

Schließt du einen Kommentar ab?

</ul>
  </div>

Die dazugehörigen Styles sehen folgendermaßen aus:

/* Hauptnavigation */
#main_left ul {
margin-top: 180px;
margin-left: 0px;
padding-left: 0px;
}

#main_left li {
list-style-type: none;

padding:0;
   margin:0;

}
#main_left a {
background-image: url(img/navi_bg.gif);
display: block;

width:???;

height: 25px;

margin-top: 0px;

padding: 0;

}
#main_left a:hover {
background-image: url(img/navi_bg.gif);
background-position: 0px -25px;

Bei Dr. Web abgeschaut? ;-)

Mit freundlichen Grüßen,
André

[cdash]

Hallo André,

brauchst du das Div oder kannst du der <ul> die ID "main_left" geben?

»»

Hast wahrscheinlich recht, ich glaube "main-left" brauche ich gar nicht.

Leerzeichen nicht vergessen: <img src="" height="" width="" alt="" />!

Leerzeichen nach dem alt Text oder wo? - Braucht man das, führt das zu Fehlern?

-->

Schließt du einen Kommentar ab?

der ist doch geschlossen ??

Deine Vorschläge (padding und margin) führen leider nicht zu dem gewünschten Ergebniss. Ich hatte das auch schon mal durchgetestet weil das sonst häufig zum Erfolg führt. Auch die Angabe einer Breite hilft nicht. Gernot (siehe Posting weiter oben) hat mir aber einen Tipp mit float gegeben der funktioniert.

Danke

Andreas

[Gernot Back]

Hallo cdash,

verpass dem UL-Vorfahrenselement eine feste Breite, so dass nie mehr als eines der Nachfahrenselemente gleichen Grades nebeneinander hineinpasst, auch wenn du sie floaten lässt.

Es könnte sein, dass du nur die LI-Elemente, also die Kinder der ungeordneten Liste floaten lassen musst, könnte aber (und das vermute ich am ehesten) auch nur die A-Elemente betreffen, also die Enkel der Liste oder aber auch nur die Urenkel, also die IMG-Elemente oder jeweils zwei Generationen oder alle zusammen. Probier es halt mal aus! Um den IE zu bedienen, musst du ihm gut zureden, nach dem Motto: "Ein Häppchen für die Mama, eins für Onkel Karl usw."

Gruß Gernot

[cdash]

Hallo Gernot

verpass dem UL-Vorfahrenselement eine feste Breite, so dass nie mehr als eines der Nachfahrenselemente gleichen Grades nebeneinander hineinpasst, auch wenn du sie floaten lässt.

»»

das hat sowieso schon eine feste Breite

Es könnte sein, dass du nur die LI-Elemente, also die Kinder der ungeordneten Liste floaten lassen musst,

»»

Ja, das ist es. Ein float:left beim li Element und der Abstand ist weg. Vielen Dank. Führt zwar leider zu einem Darstellungsfehler im Dreamweaver und zerschießt dort die ganze Seite - aber das kann ich während der Entwicklung ja auskommentieren ...

Gruß Gernot