XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Hintergrundbild bei mehrzeiligen Links (http://xhtmlforum.de/showthread.php?t=55011)

Offshore 18.12.2008 14:35

Hintergrundbild bei mehrzeiligen Links
 
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:

http://img132.imageshack.us/img132/5867/fx3tp9.th.png http://img142.imageshack.us/img142/8898/ie7sd2.th.png


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 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 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 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 19.12.2008 14:00

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:35 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019