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?