Shakron: Images in Liste nebeneinander ohne Abstand auflisten

Es gibt ja diverse gute Ideen wie man mit CSS-formatierten Listen (<ul> ) horizontale Navigationen hinbekommt. Darauf basierend wollte ich das auch mal versuchen, und zwar mit Bildern, die ich so nebeneinander platziere (nahtlos, ohne Abstand).

Doch leider wird mir trotzdem zwischen den Bildern jeweils ein Abstand von ein paar Pixeln fabriziert. Hat jemand eine Idee weshalb das so ist bzw. was ich dagegen unternehmen kann?

CSS:
---------------------------------------------
div#topnav{
        margin: 0px;
        padding: 0px;
        height: 33px;
        width: 749px;
}
div#topnav ul, div#topnav li{
        display: inline;
        list-style: none;
        margin: 0px;
        padding: 0px;
        border: none;
        text-decoration: none;
}
---------------------------------------------

Und hier der HTML-Code:
---------------------------------------------
<div id="topnav">
<ul>
  <li><img src="img/bild1.gif" height="33" width="107" alt="" title=""></li>
  <li><img src="img/bild2.gif" height="33" width="107" alt="" title=""></li>
  <li><img src="img/bild3.gif" height="33" width="107" alt="" title=""></li>
  <li><img src="img/bild4.gif" height="33" width="107" alt="" title=""></li>
  <li><img src="img/bild5.gif" height="33" width="107" alt="" title=""></li>
  <li><img src="img/bild6.gif" height="33" width="107" alt="" title=""></li>
  <li><img src="img/bild7.gif" height="33" width="107" alt="" title=""></li>
</ul>
</div>

---------------------------------------------

  1. hi,

    Doch leider wird mir trotzdem zwischen den Bildern jeweils ein Abstand von ein paar Pixeln fabriziert. Hat jemand eine Idee weshalb das so ist bzw. was ich dagegen unternehmen kann?

    versuch mal, den code komplett ohne whitespace zu schreiben, also nach </li> direkt das nächste <li> zu setzen, ohne zeilenumbruch oder sonstigen abstand.

    gruss,
    wahsaga

    1. versuch mal, den code komplett ohne whitespace zu schreiben, also nach </li> direkt das nächste <li> zu setzen, ohne zeilenumbruch oder sonstigen abstand.

      gruss,
      wahsaga

      Hm, aber das kann ja nicht DIE Lösung sein, oder? Kann mir nur schwerlich vorstellen, dass es keine andere Lösung gibt als unübersichtlichen Bandwurmcode zu fabrizieren :)

      1. Hallo Shakron,

        Bitte zitiere nur das, worauf Du Dich beziehst,
        und gliedere Dein Posting anstaendig:
        </faq/#Q-09a> und </faq/#Q-09b>

        versuch mal, den code komplett ohne whitespace zu schreiben,
        Hm, aber das kann ja nicht DIE Lösung sein, oder?

        Doch, fuer manche Browser bzw. "Probleme" ist es eben DIE Loesung...
        Besonders, wenn "jedes Pixel zaehlt", d.h. wenn Dir als Autor
        so winzige optische Details extrem wichtig sind...

        Hat es in Deinem Fall ueberhaupt was gebracht?

        mfg, Thomas

  2. Hallo,

    border: none;

    Border hat drei Eigenschaften: width, style, color.
    Du aeusserst Dich nur zu style.
    Versuch's mal mit:

    border:0 none;

    Und ja, mir ist bekannt, dass none automatisch
    zu einer width von 0 fuehren _sollte_.
    Und dass der Initialwert von width "medium" ist.
    http://www.w3.org/TR/REC-CSS2/box.html#border-properties

    mfg, Thomas