nicht angemeldet
altes problem - abstand bei bild in tabelle mit text dahinter
hallo,
das problem scheint bekannt und ich hab auch bereits folgende links...
http://www.dodabo.de/html+css/img-table/
http://www.tiptom.ch/homepage/faq.html?q=tdimg
und sie forumssuche durchforstet, aber die dort angegebenen tipps bringen leider immer noch nicht den gewünschten erfolg. ich hoffe ich habe nix übersehen.
quelltext (habs auch mit doctype probiert ohne erfolg):
<html>
<body>
<table cellpadding="0" cellspacing="0" border="0" style="border:0 none;border-spacing:0;border-collapse:collapse;"><tr><td style="border:0 none;padding:0 none;"><img src="test.gif" style="vertical-align:bottom;" width="13" height="18" border="0" alt=""><span style="font-size:11px;color:black;font-family:verdana,arial,helvetica,sans-serif;"> test test test</span></td></tr><tr><td style="border:0 none;padding:0 none;"><img src="test.gif" style="vertical-align:bottom;" width="13" height="18" border="0" alt=""><span style="font-size:11px;color:black;font-family:verdana,arial,helvetica,sans-serif;"> test test test</span></td></tr></table>
</body>
</html>
---
beim ie 6.0 gibt es zwischen den beiden untereinander stehenden grafiken immer einen 1px grossen abstand (bei firefox und opera kein abstand). wenn ich den text hinter den grafiken rausnehme und für die bilder noch display:block definiere, ist der abstand weg. problem ist aber, dass ja dahinter noch der text stehen soll und sobald ich mit float arbeite, ist der abstand wieder da.
vielleicht hat ja jemand noch einen hinweis für mich. das wäre sehr grossartig. ansonsten danke schon mal!
beste grüsse,
hurz
-
Hallo,
beim ie 6.0 gibt es zwischen den beiden untereinander stehenden grafiken immer einen 1px grossen abstand (bei firefox und opera kein abstand). wenn ich den text hinter den grafiken rausnehme und für die bilder noch display:block definiere, ist der abstand weg. problem ist aber, dass ja dahinter noch der text stehen soll und sobald ich mit float arbeite, ist der abstand wieder da.
einen Workaround mit float für ein ähnliches Problem beim IE gibt es auch hier Listen und CSS, und ähnlich läßt
sich auch bei deinem Code per float für das umgebende Element und noch line-height der Abstand verändern (IE 6 getestet):span{line-height:10px}
td, img{float:left}Vielleicht läßt sich das Problem aber auch noch eleganter ohne float lösen, hast
du schon alles - padding, margin usw. (z.B. bei span) - durchprobiert?Grüsse
Cyx23
-
hallo cyx.
erstmal danke für deinen vorschlag!
span{line-height:10px}
td, img{float:left}ich hab jetzt dem span mal ne line-height von 18px gegeben (exakt die höhe der grafik) und der grafik das float:left und damit sieht es auch im ie 6.0 gut aus. wieso hast du dem td auch noch foat:left gegeben? wenn ich das mache, gibts im firefox ne lücke.
Vielleicht läßt sich das Problem aber auch noch eleganter ohne float lösen, hast du schon alles - padding, margin usw. (z.B. bei span) - durchprobiert?
ausser mit negativen werten hab ich schon alles durchprobiert denk ich. wenn jemand noch ne lösung ohne float parat hat, wäre ich sehr dankbar.
beste grüsse,
hurz-
Hallo Hurz,
erstmal danke für deinen vorschlag!
span{line-height:10px}
td, img{float:left}ich hab jetzt dem span mal ne line-height von 18px gegeben (exakt die höhe der grafik) und der grafik das float:left und damit sieht es auch im ie 6.0 gut aus. wieso hast du dem td auch noch foat:left gegeben? wenn ich das mache, gibts im firefox ne lücke.
freut mich dass es funktioniert.
Das zusätzliche "äussere" float hilft mitunter beim IE, der ja float etwas anders umsetzt als andere Browser. Mit CSS-Weiche, vielleicht so:
img{float:left}
* html td{float:left}
sollte es andere Browser nicht mehr stören (u.U. könnte noch ein clear:left helfen).
Aber wenn es sowieso ohne float beim td geht ist es ja schon gut so.ausser mit negativen werten hab ich schon alles durchprobiert denk ich. wenn jemand noch ne lösung ohne float parat hat, wäre ich sehr dankbar.
Das float beim Bild sollte unproblematisch oder hier sowieso richtig eingesetzt sein (u.U. mit Netscape 4 testen, ggf. mit Stern-selektor * img{flo... verstecken), und dem Bild eine line-height geben o.ä. wäre auch wieder umständlich wenn so etwas hier überhaupt hilft.
Grüsse
Cyx23
-
hallo cyx.
Das zusätzliche "äussere" float hilft mitunter beim IE, der ja float etwas anders umsetzt als andere Browser.
der einzige unterschied in der darstellung ist der, dass der ie die grafiken ein stück nach rechts einrückt und der text einen geringen abstand von der grafik hat, was aber nicht weiter tragisch ist und man auch sicher mit abstandsangaben korrigieren könnte (habs jetzt nich probiert, da kein bedarf).
danke nochmal und beste grüsse,
hurz
-
-
-