Grafiken <img ....> ausrichten

[beos]

Hallo,

ich habe in einer Tabelle eine Zelle mit der Höhe von 110px und einer Breite von 802px. Dort wird über
<tr height="110px">
<td colspan="3" valign="bottom">
<img src="c:/test_logo_4.png" alt="" height="110" width="802">
</td>
</tr>
eine Grafik eingebunden. Die Grafik soll am unteren Zellenrand ausgerichtet sein, daher diesen berühren. Leider gibt es zwischen unterem Zellenrand und Grafik aber immer einen Abstand von einigen wenigen Pixeln (daher ist dann die Höhe der Zelle auch größer als 110px, denn die Grafik hat durchaus die gewünschten Abmaße). Ich habe schon alles an CSS und HTML ausprobiert um dieses Problem zu lösen (align, valign, position, margin, padding, etc.). Jetzt bin ich am Ende meines Lateins und benötige einen Tipp von euch.

Vielen Dank !!

 

[Budspencer]

schreib mal das dazu

cellpadding="0" cellspacing="0"

 

[beos]

Hallo,
half leider nicht. Ich kann zwar die Grafik direkt an den oberen Rand der Zelle legen (align="top"), jedoch klappt es unten einfach nicht. :-(

 

[Budspencer]

so:

<table border="0" cellpadding="0" cellspacing="0">
<tr>
  <td colspan="3">
    <img src="c:/test_logo_4.png" alt="" height="110" width="802">
  </td>
</tr>
</table>

und klick einmal auf die grafik vl hilfts

 

[beos]

Ja, genau so hab ich es auch gemacht, leider ohne Erfolg. Danke !

 

[Fili]

Hmmm, und wenn du das Bild als Hintergrund einbinden würdest? Nur so als Vorschlag, habs nicht ausprobiert.

 

[beos]

Hab ich schon ausprobiert. Dann bleibt der Abstand zum unteren Rand erhalten, nur das der Abstand dann von einem Teil der Grafik ausgefüllt wird, da sich ja Hintergrundgrafiken wiederholen sollen, bis das Element (Zelle) ausgefülltist. Nur leider sieht das dann total Scheiße aus.

 

[Budspencer]

nur so mal aus neugier hat deine grafik vl unten einen weißen rand oder strich?

 

[beos]

Ursprünglich weder das eine noch das andere. Der Background der gesamten Seite ist Schwarz. Ich habe die Grafik oben zusätzlich mit einem 1px breiten Rand (schwarz) versehen. Da ich die Grafik nun als Hintergrund einbinde taucht der Rand unten auch wieder auf. Insgesamt ist das Erscheinungsbild jetzt "ansehbar". Ich kann mit dem Kompromiss leben. Jedoch habe ich gerade festgestellt, das die Hintergrundbilder nur im IE dargestellt werden, im Firefox habe ich nur leere Zellen. :-(

 

[threadi]

Ungetestet, aber ich hätte es so gemacht:

HTML

<table>
<tr>
<td>
<img src="test_logo_4.png" alt="" height="110" width="802">
</td>
</tr>
</table>

CSS

table {
 border-collapse: collapse;
 border: none;
 height: 110px;
 width: 802px;
}

td {
 vertical-align: bottom;
 padding: 0px;
 margin: 0px;
}

wobei ich es irritierend finde, dass das Bild genauso groß ist wie die Tabelle bzw. die Tabellenzelle.

 

[neuroleptika]

Welchen Doktype verwendest du?
Wenn du html4/strict oder xhtml verwendest liegt es am der Standardeigenschaft inline von img.
Da habe ich es versucht zu beschreiben:css | Spalten :: css-störende Abstände

also
td img {
display : block;
}