nicht angemeldet
img-Tag buggy im IE?
Hallo ihr,
hab das forum gerade beim googeln nach nem problem gefunden, und stell meine frage gleich mal hier.
Erst mal etwas allgemeiner:
Wenn ich in ne Tabellenzelle passgenau ein Bild einfügen will (höhe & breite stimmen mit der Zelle exact überein), macht der IE bei mir immer über oder unter dem Bild einige Pixel weissen Rand => die Tabelle verzerrt es.
Bis jetzt hab ich das immer folgendermassen gelöst:
Mir ist aufgefallen, dass dieses Verhalten nicht auftritt wenn ich folgendermaßen ein align einbinde:
<img src='' alt='' style='vertical-align:bottom'>
Dadurch bekomme ich auch im IE das gewünschte ergebnis.
Allerdings bei folgendem Code-Fragment funktioniert es bei mir nicht:
<table cellspacing=0 cellpadding=0>
<tr>
<td height=5 width=465 bgcolor='#ff0000'>
<img src='grey-thin.jpg' style='vertical-align:bottom'>
</td>
</tr>
<tr>
<td height=110 width=465 bgcolor='#bebebe' style='vertical-align:top'>
<span>Blindtext</span>
</td>
</tr>
</table>
Was soll rauskommen?
Ein dünner Balken 465x5 pixel als image, und direkt darunter ein graues Feld mit nem darin enthaltenen Text.
Die Tabelle soll insgesamt 465x115 Pixel abmessungen haben.
=> Verhalten leider: Die erste Tabellenzeile wird auf ca. 20 Pixel Höhe ausgedehnt. Sieht man am roten Hintergrund, den ich zu debug-Zwecken eingebaut habe.
Wäre für Hilfe ausserordentlich dankbar
Gruß,
Florian Bachmann
Bild, und dieses Codebeispiel sind online unter:
www.cip.ifi.lmu.de/~bachmann/html-hilfe/index2.html
www.cip.ifi.lmu.de/~bachmann/html-hilfe/grey-thin.jpg
-
Hallo Florian,
entferne die Leerzeichen im Code vor und nach dem IMG-Tag:
<td height="5" width="465" bgcolor="#ff0000"><img src="grey-thin.jpg" style="vertical-align:bottom;"></td>
Dann habe ich gleich noch die Attribute korrekt umschlossen. BTW: Das vertical-align:bottom kannst du dann weglassen, Formatierungen solltest du immer mit CSS machen (ich denke vor allem an die Formatierungen des TD-Elements), das ALT-Attribut bei Bildern ist obligatorisch.
Gruss aus Luzern,
Daniel-
Danke für deine schnelle Antwort Daniel,
habe deine Korrekturen durchgeführt, aber leider besteht das problem weiterhin unverändert. Die erste Tabellenzeile ist nicht 5px hoch, sondern ca. 20
-
Hallo,
habe deine Korrekturen durchgeführt, aber leider besteht das problem weiterhin unverändert. Die erste Tabellenzeile ist nicht 5px hoch, sondern ca. 20
Weise den Bildern die du so darstellen willst mit CSS die eigenschaft { display:block; } zu. z.B. so:
.platzfueller { display:block; }
<img src="grey-thin.jpg" class="platzfueller">
Breite und Höhe des Bildes solltest du aber ebenso unbedingt angeben wie das alt="" Attribut (auch wenn du dieses u.U. leer läßt)
Grüße
Thomas-
Hallo Thomas,
dir 1000 Dank. Es lag am display:block
Mit den breite/höhe Angaben hab ich selber einiges rumgespielt, darum war auch nicht mehr alles ganz sauber in dem beispiel.Trau mich kaum noch zu Fragen. >Warum< lag es an dieser display-Eigenschaft? Ich hab gerade versucht infos zu dem display:block zu finden, aber meiner meinung nach, haben die das verhalten nicht wirklich erklären können.
-
Hallo,
Trau mich kaum noch zu Fragen. >Warum< lag es an dieser display-Eigenschaft? Ich hab gerade versucht infos zu dem display:block zu finden, aber meiner meinung nach, haben die das verhalten nicht wirklich erklären können.
img ist ein so genanntes inline-Element, daher gilt für es z.B. die Zeilenhöhe (der hast du versucht mit vertical-align bezukommen.) in der Tabellezelle, d.h der Platz der "unter" dem Bild übrigbleibt, ist eigentlich für die Unterlängen der Buchstaben wie j,g,y. diplay-block bewirk dass img keine inlie-box mehr erzeugt und somit das Problem umgegangen wird.
Grüße
Thomas
-
-
-
-
-
Ein dünner Balken 465x5 pixel als image, und direkt darunter ein graues Feld mit nem darin enthaltenen Text.
Die Tabelle soll insgesamt 465x115 Pixel abmessungen haben.=> Verhalten leider: Die erste Tabellenzeile wird auf ca. 20 Pixel Höhe ausgedehnt. Sieht man am roten Hintergrund, den ich zu debug-Zwecken eingebaut habe.
Also, Tags sind wohl nie "buggy". Ich denke mal, daß der Zeilendurchschuß für die Tabellenzeile zu groß ist. Vermutlich durch eine zu globale Schriftdefinition im CSS.