✔ 3 Bilder nebeneinander + Rahmen drumherum

[Chosi]

Hi zusammen,

habem mal wieder ein kleines CSS Problem, welches mit den letzten Nerv raubt :-/ ...
Ich möchte 3 Bilder img-elemente mit 1px Abstand nebeneinander darstellen. Drumherum soll ein 1px Rahmen, wiederum mit einem 1px Abstand. Das sollte doch eigentlich kein Problem sein, ist's aber leider doch. :-/

Unter den Bildern habe ich jedesmal eine ca. 3-4px Lücke zum Rahmen, welche einfach nicht totzukriegen ist. Zusätzlich macht der IE den linken Abstand zum Rahmen 2px breit.

Wie würdet Ihr diese Problem angehen?

Mein (kläglicher) Versuch:

div#random_links
{
  display: block;
  width: 528px;
  overflow: hidden;

  border: none;
  padding: 0px;
  margin: 10px;
  background-color: #828282;
  font-size: 0px;
}

div#random_links div
{
  display: block;
  margin: 1px;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 0px;
  padding-right: 1px;

  background-color: #FFFFFF;

  font-size: 0px;
}

div#random_links div img
{
  display: block;
  float: left;

  margin-left: 1px;
  padding: 0px;
  border: 0px;
}

div.clear
{
  clear: both;
  height: 0px;
  line-height: 0px;
  margin: 0px;
  padding: 0px;
  font-size: 0px;
}

<div id="random_links">
        <div>
          <img src="link.php?text=Suche" alt="" width="174" height="52" />
          <img src="link.php?text=Neu" alt="" width="174" height="52" />
          <img src="link.php?text=Shop" alt="" width="174" height="52" />
          <div class="clear"></div>
        </div>
      </div>

 

[Maik]

Lösungsvorschlag:

div#random_links
{
  display: block;
  width: 528px;
  overflow: hidden;
  border: none;
  padding: 0px;
  margin: 10px;
  background-color: #828282;
  font-size: 0px;
}

div#random_links div
{
  display: block;
  margin: 1px;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 0px;
  padding-right: 1px;
  background-color: #FFFFFF;
  font-size: 0px;
}

div#random_links div img
{
  margin-left: 1px;
  padding: 0px;
  border: 0px;
}

* html div#random_links div img.margin { /* Für IE */
   margin-left: 0.5px;
}

<div id="random_links">
        <div>
          <img src="link.php?text=Suche" alt="" width="174" height="52" />
          <img class="margin" src="link.php?text=Neu" alt="" width="174" height="52" />
          <img class="margin" src="link.php?text=Shop" alt="" width="174" height="52" />
        </div>
</div>

 

[Chosi]

So klappt's leider auch nicht richtig. Sobald man Bilder nicht als display: block definiert, macht Firefox komischerweise eine Lücker unter die Bilder.
Bei Deiner Lösung stimmt im IE zwar der Abstand links, jedoch sind die Abstände zwoschen den Bildern zu groß ... (Anhang)

Oh man, bei sowas bin ich immer kurz davor, wieder ein Tabellenlayout zu verwenden, das kann's doch einfach nicht sein mit den ganzen Hacks und Workarounds :-/ ...

 

[Maik]

Mein gestriger Lösungsvorschlag funktioniert bei mir einwandfrei, wie der angehängte Screenshot beweist.

Testumgebung: Win2000, FF 1.5, IE 6.0

Okay, nächster Versuch:

div#random_links {
width: 526px;
height: 54px;
border: 1px solid #828282;
}

* html div#random_links { /* Für IE */
width: 527px;
}

div#random_links img {
height: 52px;
display: block;
float: left;
margin: 1px 0 1px 1px;
}

<div id="random_links">
          <img src="link.php?text=Suche" alt="" width="174" height="52" />
          <img src="link.php?text=Neu" alt="" width="174" height="52" />
          <img src="link.php?text=Shop" alt="" width="174" height="52" />
</div>

Das Problem im IE ist, daß er bei floatenden Elementen die horizontalen margin-Angaben falsch interpretiert, sprich verdoppelt. In deinem Fall betrifft es den margin-left-Wert für die erste (linke) Grafik. Normalerweise hilft es, einen CSS-Hack oder Conditional Comment zu verwenden, um für den IE den margin-Wert zu halbieren.

Aber hier funktioniert es seltsamerweise nicht, und die Grafik rutscht direkt an den Elementrand:

* html div#random_links img.margin { /* Für IE */
margin: 1px 0 1px 0.5px;
}

<img class="margin" src="link.php?text=Suche" alt="" width="174" height="52" />
<img src="link.php?text=Neu" alt="" width="174" height="52" />
<img src="link.php?text=Shop" alt="" width="174" height="52" />

Spoiler

.

 

[Quaese]

Hi,

@Michael:
Dein gestriger Lösungsvorschlag funktioniert bei mir in den von dir genannten Browsern unter Win XP
auch. Allerding in Opera 8.5 sind die Abstände zwischen den Bildern zu gross.

Zum eigentlichen Problem:
Vielleicht den inneren horizontalen Abstand zum umgebenden DIV nicht über die margin-Werte
der Bilder definieren, sondern über die padding-Angaben. Für das mittlere Bild wäre jedoch eine
zusätzliche Klasse notwendig.

div#random_links {
width: 524px;
height: 54px;
border: 1px solid #828282;
padding: 0 1px;
}
/* Befindet sich der IE nicht im Quirksmode -> nachstehenden CSS-Filter auskommentieren */
* html div#random_links{ height: 56px;
                         width: 528px;}
div#random_links img {
height: 52px;
border: none;
display: block;
float: left;
margin: 1px 0;
}
div#random_links img.inner{ margin: 1px;}

<div id="random_links">
  <img src="link.php?text=Suche" alt="" width="174" height="52" />
  <img class="inner" src="link.php?text=Neu" alt="" width="174" height="52" />
  <img src="link.php?text=Shop" alt="" width="174" height="52" /> 
</div>

Vielleicht hilft das weiter.

Ciao
Quaese

PS: Gibt es eigentlich eine Möglichkeit, den CSS-Code ohne die Zeilennummern zu kopieren?

 

[Maik]

@Michael:
Dein gestriger Lösungsvorschlag funktioniert bei mir in den von dir genannten Browsern unter Win XP
auch. Allerding in Opera 8.5 sind die Abstände zwischen den Bildern zu gross.

Stimmt, bei mir bricht Opera 8.5 die letzte (rechte) Grafik in die nächste Zeile um

PS: Gibt es eigentlich eine Möglichkeit, den CSS-Code ohne die Zeilennummern zu kopieren?

Ja, indem ich anstelle von [ code=css ] den [ code ]-Tag verwende

 

[Quaese]

Vorschlag:
Vielleicht mal anregen, das Syntaxhighlighting beizubehalten, die Zeilennummern aber abzuschalten - lass mal deinen Einfluss spielen ;-)

Quaese