✔ Schon wieder Bilder nebeneinander

[WolfBauer]

Moin,
ich weiß diese Frage wurde schon tausendmal gstellt. Nur leider haben mir alle antworten bis jetzt noch nichts gebracht. Ich möchte Bilder (Links) nebeneinander ohne Zwischenraum in einem Div darstellen. Bei Firefox und Opera ist dies kein Problem. Nur leider macht der IE Probleme. Beim IE sind zwischen allen Bilder ein kleiner Raum.

Firefox, Opera:
Bild1 | Bild2 | Bild3

IE:
Bild1 | abstand | Bild2 | abstand | Bild3

Mein PHP-Code:

echo "<div class=\"top\">"; 
   echo "<div class=\"ShortNaviBar\">";
      echo "<img class=\"NaviBeginnEndImage\" src=\"bild1.jpg\">";
      echo "<img class=\"NaviNormalImage\" src=\"bild2.jpg\">";
      echo "<img class=\"NaviBeginnEndImage\" src=\"bild3.jpg\">";
   echo "</div>";
echo "</div>";

Mein CSS-Code:

.Top {
    width: 100%; 
    height: 50px; 
    border: 1px solid #FFFFFF;  
    border-spacing: 0px;  
    margin: 0px 0px 0px 0px;     
}

.ShortNaviBar {
    height: 18px;    
    width: 700px;
    border: 1px solid #FFFFFF;  
}

.NaviBeginnEndImage {
    float: left;
    width: 10px; 
    height: 18px; 
    margin: 0px 0px 0px 0px; 
}

.NaviNormalImage {
    float: left;
    width: 100px; 
    height: 18px; 
    border: 0px solid #FFFFFF;  
    margin: 0px 0px 0px 0px;  
}

Gruß und Danke

 

[WolfBauer]

So ich habe das jetzt so gelöst:

  .NaviBeginnEndImage {
    float: left;
    width: 10px; 
    height: 18px; 
    border: 0px solid #FFFFFF;
    margin: 0px 0px 0px 0px !important;
    margin: 0px -3px 0px -3px; 
    padding: 0px;
  }
  .NaviNormalImage {
    float: left;
    width: 100px; 
    height: 18px;  
    border: 0px solid #FFFFFF;
    margin: 0px 0px 0px 0px !important;
    margin: 0px -3px 0px -3px; 
    padding: 0px; 
  }

Finde ich sehr unschön. Hat jemand eine bessere Idee?

 

[Maik]

Eine bessere Lösung gibt es nicht, um den "3-Pixel-Bug" im IE zu beheben.

 

[WolfBauer]

Ist also so bekannt, dass es dafür schon einen Namen gibt. Dann habe ich wohl nicht richtig gesucht.

 

[Maik]

Stellt sich blos die Frage, warum Du auf das Inline-Element img die float-Eigenschaft anwendest, wenn es doch von sich aus nebeneinander angeordnet wird?

 

[WolfBauer]

Das mache ich um in der gleiche Zeile auch noch eine Aufklappliste auf der rechten Seite anzeigen zu können. Wenn ich das Float weglassen würde, würde die Aufklappliste in die Mitte des Divs wandern.

 

[Maik]

Alles klar