• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild verändert Tabelle

syuam

Neues Mitglied
Hey Leute :)
Ich möchte Bilder in einer Tabelle im Frontend wiedergeben.
Hierfür benutze ich folgenden HTML-Code:
HTML:
<table>
  <tr>
    <td><img src="/upload/datei1.txt" border="" height="50px" width="50px" alt="" /></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>
Und den folgenden CSS-Code:
Code:
* {
    margin: 0;
    padding: 0;
}
table {
    border: 10px solid black;
    border-collapse: collapse;
}
td {
    padding: 0;
    height: 50px;
    width: 50px;
    border: 1px solid red;
}
Das Bild wird ordnungsgemäß(50px*50px) ausgegeben, jedoch entsteht unterhalb des Bildes ein leerer kleiner weißer Streifen, der da nicht sein sollte...Das Bild, sowie auch das "td" sind 50px*50px groß, wieso zieht sich das "td" jedoch in die Länge?
Hier ein Bild davon:
b1.JPG
Wie kann ich das beheben? ich komm einfach nicht drauf...
LG und danke im vorraus liebe community!
 
hey syuam,


also ich habe es genau so wie du versucht, bei mri taucht das nicht auf.
Hast du eventuell die tabelle noch im css wo anders definiert ?

Mfg
Flava
 
Ich weiß nicht, ob das mit dem Problem zu tun hat, aber diese Schreibweise
Code:
[COLOR=#800080]height=[COLOR=#0000FF]"50px"[/COLOR] width=[COLOR=#0000FF]"50px"[/COLOR][/COLOR]
ist mir unbekannt. Das müsste eigentich so aussehen:
Code:
[COLOR=#800080]height=[COLOR=#0000FF]"50"[/COLOR] width=[COLOR=#0000FF]"50"[/COLOR][/COLOR]
Alternativ:
Code:
style="[COLOR=#800080]height:[COLOR=#0000FF]50px;[/COLOR] width[COLOR=#0000FF]:50px;"[/COLOR][/COLOR]
 
Das hat doch mit der CSS-Eigenschaft vertical-align zu tun:

Code:
td img { vertical-align:bottom; }
 
Das Problem "trat" im browser mozilla auf.
einfach:

td img { vertical-align:bottom; }
hinzufügen, dann klappt es, danke!
 
Zurück
Oben