zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hintergrundbild bei mehrzeiligen Links

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.12.2008, 14:35
Benutzerbild von Offshore
Digitalpsychologe
neuer user
Thread-Ersteller
 
Registriert seit: 07.12.2004
Beiträge: 18
Offshore befindet sich auf einem aufstrebenden Ast
Standard 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:




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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.12.2008, 20:16
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.566
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

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
__________________
toscho.de
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.12.2008, 22:14
Benutzerbild von Offshore
Digitalpsychologe
neuer user
Thread-Ersteller
 
Registriert seit: 07.12.2004
Beiträge: 18
Offshore befindet sich auf einem aufstrebenden Ast
Standard

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).
Mit Zitat antworten
  #4 (permalink)  
Alt 18.12.2008, 22:42
Benutzerbild von Offshore
Digitalpsychologe
neuer user
Thread-Ersteller
 
Registriert seit: 07.12.2004
Beiträge: 18
Offshore befindet sich auf einem aufstrebenden Ast
Standard

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ß.
Mit Zitat antworten
  #5 (permalink)  
Alt 19.12.2008, 14:00
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.784
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:20 Uhr.