Hintergrundbild bei mehrzeiligen Links

Offshore · #1 (**permalink**) 18.12.2008, 14:35

Ich möchte den Links in einer Liste per CSS ein Filetype-Icon zuweisen.
Das klappt grundsätzlich auch, der IE macht bei mehrzeiligen Einträge jedoch Mucken und zeigt die Icons mal an, mal nicht und zum Teil komisch angeschnitten. Ziel ist das Anzeigen nach dem Linktext, so wie es der Firefox praktiziert (linkes Bild unten).

Ich habe mit festgelegten Breiten und Höhen experimentiert, hat aber nichts geholfen.
Hier zuerst mal die Screenshots:

Und hier der Quellcode:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<title>Test</title>

<style type="text/css">
   a.pdf { 
   padding:4px 22px 4px 0px; 
   background-image: url("pdf.gif"); 
   background-repeat: no-repeat; 
   background-position: right; 
   }
</style>

</head>

<body>

<h1>Überschrift</h1>
   	<ul>
      	<li><a href="xyz.pdf" class="pdf">Mehrzeiliger Link mehrzeiliger Link mehrzeiliger Link mehrzeiliger Link mehrzeiliger Link</a></li>
      	<li><a href="xyz.pdf" class="pdf">Mehrzeiliger Link mehrzeiliger Link mehrzeiliger Link mehrzeiliger Link mehrzeiliger Link</a></li>
      	<li><a href="xyz.pdf" class="pdf">Mehrzeiliger Link mehrzeiliger Link mehrzeiliger Link mehrzeiliger Link mehrzeiliger Link</a></li>
      	<li><a href="xyz.pdf" class="pdf">Mehrzeiliger Link mehrzeiliger Link mehrzeiliger Link mehrzeiliger Link mehrzeiliger Link</a></li>
      </ul>

</body>
</html>

Weiß jemand, wo es hier hakt?

toscho · #2 (**permalink**) 18.12.2008, 20:16

Gib bei der Background-Position auch den Vertikalwert an. Und fasse alles zusammen:

Code:

a.pdf { 
   padding:4px 22px 4px 0px; 
   background: url("pdf.gif") no-repeat right bottom; 
}

Ich habe es jetzt nicht getestet; auf den ersten Blick vermute ich als Ursache: Firefox benutzt als Orientierung für die Postion offenbar die letzte Linebox des Links, während der IE den ganzen Link als eine Blockbox behandelt.

Gruß
Thomas

Offshore · #3 (**permalink**) 18.12.2008, 22:14

Danke, haut aber leider nicht hin.

Ich bekomme es nur hin, die Grafiken in jeder Skalierung sichtbar zu machen, wenn ich dem Link ein display: block mitgeben. Allerdings habe ich dann das Icon immer fest rechts am Browserrand und nicht mehr direkt am Link (womit es seinen Sinn verliert).

Offshore · #4 (**permalink**) 18.12.2008, 22:42

Ich habe noch eine andere interessante Diskussion zu dem Thema gefunden. Da werden u.a. halb-funktionierende Workarounds mit zoom:1 ausprobiert (immerhin) aber letztlich bleibt die Vermutung, daß ich wohl die CSS-Code an der Stelle wegwerfen und das gute alte img-Tag wieder herauskramen muß.

fricca · #5 (**permalink**) 19.12.2008, 14:00

Ein bisschen Lesestoff dazu: satzansatz -- CSS: background images lost on multi line inline links in IE6

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten	mazzo	CSS	10	05.04.2012 17:32
Bräuchte Hilfestellung weil meine Seite nicht richtig angezeigt wird.	Picasso	CSS	36	03.01.2011 19:41
Holy Grail und der Internet Explorer!	ONeill	CSS	23	01.06.2006 18:20
Probleme mit 3 spalten	luk	CSS	3	08.06.2005 14:39
Warum fängt Hintergrundbild immer links an, auch bei float:	severus	CSS	2	06.12.2004 17:07