ungewollter Abstand zwischen den Zeilen einer Tabelle.

[perterle]

Hallo,

ich lade in eine Tabelle lauter kleine Bilder in die Zellen.
Die Bilder sollen Zeilen- und Spaltenweise genau aneinander stoßen,
damit sich ein gesamtes Bild ergibt.

Zwischen den Spalten klappt das gut. Zwischen den Zeilen habe ich immer einen
Abstand von 1Px.

Ich kann mir nicht vorstellen, wo der herkommt.

Ausschnitt aus der CSS-Datei:

* {
  margin:0;
  padding:0;
}

#zeichnungP {
  border:1px solid #000000;
  width: 700px;
  border-collapse: collapse;
  background-color: #fff;
}

#zeichnungP tr{
   padding: 0px;
}

#zeichnungP td{
  p/adding: 0px;
}

Hier das HTML (mit etwas PHP):

<table id='zeichnungP'>
   <? while ($m = mysql_fetch_array($rpl, MYSQL_ASSOC)) { ?>
   <tr>
     <td width= '120'>
       <img src="symbole/<? echo $m[s_image1] ?>">
     </td>
     <td width= '120'>
       <img src="symbole/<? echo $m[s_image2] ?>">
     </td>
     <td width= '120'>
       <img src="symbole/<? echo $m[s_image3] ?>">
     </td>
     <td width= '120'>
       <img src="symbole/<? echo $m[s_image4] ?>">
     </td>
     <td width= '220'>
       <? echo "$m[text1] <br> $m[text2]" ?>
     </td>
   <tr>
   <? } ?>
</table>

Gruß

[DK]

#zeichnungP td{
  p/adding: 0px;
}

Versuch's mal mit der Korrektur von p/adding zu padding ;)

[perterle]

#zeichnungP td{
  p/adding: 0px;
}

Versuch's mal mit der Korrektur von p/adding zu padding ;)

Das wars leider nicht, wie gesagt das stammt noch von einem Versuch. Das padding: 0px hat hier gar keinen Einfluss, das es eh vom Elternelement geerbt wird.
Einen Fehler hab ich allerdings schon gefunden. Beim abschliessenden tr fehlt der /. Aber auch dies bringt keine Verbesserung.

Gruß

[perterle]

#zeichnungP td{
  p/adding: 0px;
}

Sorry, das p/adding: war von einem Versuch übriggeblieben und sollte dabei einfach das padding ausschalten.

Gruß

[DK]

ich lade in eine Tabelle lauter kleine Bilder in die Zellen.

Versuch's doch mal mit <div> - Containern.
Damit würde es auf jedenfall klappen.

[Detlef G.]

Hallo perterle

ich lade in eine Tabelle lauter kleine Bilder in die Zellen.
Die Bilder sollen Zeilen- und Spaltenweise genau aneinander stoßen,
damit sich ein gesamtes Bild ergibt.

Warum verwendest du viele kleine Bilder, wenn es ein Gesamtbild sein soll?
Und wozu eine Tabelle?
Sind die Bilder tabellarische Daten?
(In deinem Quelltextschnipsel sehe ich keine Spaltenüberschriften.)

Zwischen den Spalten klappt das gut. Zwischen den Zeilen habe ich immer einen
Abstand von 1Px.

In allen Browsern, oder nur in bestimmten?
Wenn ja, in welchen?
Oder gibt es in manchen Browsern einen noch breiteren Abstand?

Ich kann mir nicht vorstellen, wo der herkommt.

Vielleicht von der Unfähigkeit deines Testbrowsers?
In anderen Browsern würde dir bestimmt noch ein viel größerer Abstand auffallen.

#zeichnungP tr{
   padding: 0px;
}

Das kannst du weglassen, <tr> hat kein padding.

#zeichnungP td{
  p/adding: 0px;
}

Bitte ohne den Schrägstrich.
Um den Zwischenraum in Browsern zu entfernen fehlt noch:

#zeichnungP td img{  
  vertical-align: bottom;  
}  
  

~~~oder:  
  
~~~css
#zeichnungP td img{  
  display: block;  
}  

Warum?
<img> ist eine Inlineelement, es wird standardmäßig auf der Textzeile dargestellt. Für Text werden aber die eventuellen Unterlängen (g, j, p, q, y) berücksichtigt. Dadurch entsteht ein Zwischenraum.
Dieser kann vermieden werden, indem die Grafik nach unten ausgerichtet oder mittels CSS zu einem Blockelement gemacht wird.

<img src="symbole/<? echo $m[s_image1] ?>">

Hier fehlt wohl das vorgeschriebenen alt-Attribut.

<td width= '120'>
       <img src="symbole/<? echo $m[s_image2] ?>">
     </td>

Um den IE (zumindest den 6er) davon zu überzeugen, dass kein Zwischenraum gelassen werden soll, dürfen keine Whitespaces (Leerzeichen, Tabs, Zeilenumbrüche) zwischen den Elementen sein. Also schreibe im HTML:

<td width= '120'><img src="symbole/[code lang=php]<? echo $m[s_image4] ?>" alt=""></td>[/code]

Auf Wiederlesen
Detlef

[Detlef G.]

Hallo,

ich hatte einen Fehler im HTML übersehen.

»» <table id='zeichnungP'>  

>    <? while ($m = mysql_fetch_array($rpl, MYSQL_ASSOC)) { ?>  
>    <tr>  
>      <td width= '120'>  
>        <img src="symbole/<? echo $m[s_image1] ?>">  
>      </td>  

        <!-- Weitere Zellen -->  
  

>    <tr>  <!-- Öffnen eine Tabellenzeile, statt schließen -->  
  

>    <? } ?>  
> </table>  

Die Tabellenzeile wird nicht geschlossen, stattdessen eine neue geöffnet. Das führt im IE zu dem 1px-Streifen.

Wenn die Tabellenzeile ordentlich geschlossen wird, statt wieder eine zu öffnen, dann verschwindet der Streifen im IE auch, wenn sich Whitespaces innerhalb der Zellen befinden.

Auf Wiederlesen
Detlef

[perterle]

Hallo,

Die Tabellenzeile wird nicht geschlossen, stattdessen eine neue geöffnet. Das führt im IE zu dem 1px-Streifen.

Wenn die Tabellenzeile ordentlich geschlossen wird, statt wieder eine zu öffnen, dann verschwindet der Streifen im IE auch, wenn sich Whitespaces innerhalb der Zellen befinden.

Das war ein Fehler. Den habe ich bereits behoben. Trotzdem bleibt beim FF Version 3.5.2 unten ein kleiner weisser Rand.

Natürlich könnte das Ganze mit div-Containern gelöst werden.

Es müsste halt so sein, dass innerhalb eines Eltern-Containers jeweils
5 Boxen die Spalten bilden. Jeweils darunter n Zeilen. Wie eine Tabelle eben.
Eigentlich eine typische Tabellenstruktur.

Der Sinn des Ganzen.
In die einzelnen Spalten werden Bilder und Texte, oder nur Bilder und nur Texte geladen.
Die Bilder sind Symbole.
Das Ganze bildet dann eine technische Zeichnung, die der User im Dialog mit einer Datenbank defineren kann. Am Ende hat er dann seine technische Zeichnung.

Es macht halt nur dann Sinn, wenn die Bilder passgenau waagerecht und senkrecht aneinander gefügt werden und kein Spalt zwischen den Bildern entsteht.

[Detlef G.]

Hallo perterle

Das war ein Fehler. Den habe ich bereits behoben. Trotzdem bleibt beim FF Version 3.5.2 unten ein kleiner weisser Rand.

Lies den Rest meines ersten Postings (direkt über und unter „Warum?”) noch einmal.

Auf Wiederlesen
Detlef

[Gunnar Bittersmann]

@@Detlef G.:

nuqneH

Warum verwendest du viele kleine Bilder, wenn es ein Gesamtbild sein soll?

Gute Frage. Leider bislang unbeantwortet.

In meiner Glaskugel schimmern CSS-Sprites.

Qapla'

[MudGuard]

Hi,

Zusätzlich zum schon gesagten:

Hier das HTML (mit etwas PHP):

wozu das PHP? Du hast ein Darstellungsproblem, also ist nur HTML + CSS interessant.

<? while ($m = mysql_fetch_array($rpl, MYSQL_ASSOC)) { ?>

shortopentags solltest Du besser nicht verwenden, weil das abschaltbar ist ...

cu,
Andreas

[flowh]

Hallo perterle.

Zwischen den Zeilen habe ich immer einen Abstand von 1Px.
Ich kann mir nicht vorstellen, wo der herkommt.

Vielleicht musst du das Attribute »cellspacing« des table-Elements auf 0 setzen, also <table cellspacing="0" ....

Servus,
Flo