IE zeigt Hintergrundbild eines <a href="">...</a> nicht an.

[Jochen]

Hi,

auf meiner Seite möchte ich folgende Seiteninternen Link definieren:

<p class="p1"><span>
            <a href="#oben" class="nachoben"><span class="hoch">Nach oben</span></a>
            </span></p>

Die zugehörige CSS-Definition liest sich so:

a.nachoben, a.nachoben:link, a.nachoben:visited, a.nachoben:hover {
   background: url(../struktur/pfeilhoch.gif) no-repeat;
   background-position: 0px 0px;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 26px;
   border: 0px solid #000000;
   }

span.hoch { display: none; }

Folgendes will ich damit erreichen: Durch diesen Link soll man auf der Seite nach oben springen können (was funktioniert), der Text soll  allerdings nicht angezeigt werden (deshalb span.hoch -> display: none), stattdessen wird die Grafik "pfeilhoch.gif" eingebunden.

Im FF klappt alles auch wunderbar.

Im IE dagegen ist an der Stelle, an der der Link (also die Grafik) zu sehen sein soll, nichts zu finden. Der Link ist zwar aktiv, wenn man weiß, wo man klicken muß, springt man auch an den Seitenanfang, aber mit Grafik wärs halt schöner ;-).

Wenn ich die Amweisung "span.hoch { display: none; }" entferne, dann zeigt auch IE die Grafik an, aber dann eben auch den Text "nach oben", der FF natürlich auch.

Wenn ich "<span class="hoch">Nach oben</span>" aus dem Befehl entferne, also nur

<p class="p1"><span>
            <a href="#oben" class="nachoben"></a>
            </span></p>

schreibe, zeigt zwar FF die Grafik immer noch an, aber der IE immer noch nicht.

Ich weiß nicht was ich da falsch mache.

Erkennt ihr einen Fehler oder eine fehlende Angabe?

LG
Jochen

[fastix®]

Moin!

Hm. Innerhalb des Links hast Du ein Element, welches nicht angezeigt wird: also nichts. Was erwartest Du?

Was hindert Dich daran die Grafik direkt einzubinden?

<a href="#oben" class="nachoben"><img src="../struktur/pfeilhoch.gif" alt="Nach oben" title="Nach oben" border=0></a>

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[Jochen]

Hi,

Hm. Innerhalb des Links hast Du ein Element, welches nicht angezeigt wird: also nichts. Was erwartest Du?

Aber nur das Element innerhalb des Links. Nicht die Hintergrundgrafik des Elements selber. Den Text will ich ja nicht anzeigen lassen (nur dann, wenn kein CSS interpretiert werden kann). Und auch wenn der IE nichts anzeigt - anklicken kann die Position. Er räumt schon ein Bereich der Größe der Grafik ein, auf die man Klicken kann um den Link zu aktivieren. Nur das Bild wird nicht angezeigt.

Was hindert Dich daran die Grafik direkt einzubinden?

Das wäre schon eine Möglichkeit. Aber dann könnte ich nicht mit a:hover {} ein Alternativbild einbauen.

LG
Jochen

[Christoph Schnauß]

hallo,

background: url(../struktur/pfeilhoch.gif) no-repeat;
  background-position: 0px 0px;

Schau dir einfach mal an, was diese Positionierung bewirkt. Die wird von IE und Firefox nicht immer im gleichen Sinn interpretiert. Eventuell rutscht im IE dein Pfeil ins Blickfeld, wenn du es mit
background: url(../struktur/pfeilhoch.gif) no-repeat 0 20%;
probierst. Verschiebe die Positionsangaben, bis du deinen Pfeil zu sehen bekommst.

margin: 0px 0px 0px 0px;

Das läßt sich übrigens zu "margin: 0;" zusammenfassen

Grüße aus Berlin

Christoph S.

[Jochen]

hallo,

background: url(../struktur/pfeilhoch.gif) no-repeat;
  background-position: 0px 0px;

Schau dir einfach mal an, was diese Positionierung bewirkt. Die wird von IE und Firefox nicht immer im gleichen Sinn interpretiert. Eventuell rutscht im IE dein Pfeil ins Blickfeld, wenn du es mit
background: url(../struktur/pfeilhoch.gif) no-repeat 0 20%;
probierst. Verschiebe die Positionsangaben, bis du deinen Pfeil zu sehen bekommst.

Hi,

leider hat das keine Auswirkungen beim IE. Sobald das "unsichtbare" span-Element weg ist, wird der Pfeil an genau der Position angezeigt, an der er erscheinen soll, aber nur dann.

LG
Jo

[Christoph Schnauß]

hallo,

leider hat das keine Auswirkungen beim IE. Sobald das "unsichtbare" span-Element weg ist, wird der Pfeil an genau der Position angezeigt, an der er erscheinen soll, aber nur dann.

Dann lasse es doch weg - deine Konstruktion ist sowieso ein wenig umständlich.

Wenn ich "<span class="hoch">Nach oben</span>" aus dem Befehl entferne, also nur
            <p class="p1"><span>
            <a href="#oben" class="nachoben"></a>
            </span></p>
schreibe, zeigt zwar FF die Grafik immer noch an, aber der IE immer noch nicht.

Weil der IE "leere" Elemente nicht für darstellbar hält. Du solltest also ein "geschütztes Leerzeichen" einfügen, also:
   <a href="#oben" class="nachoben">&nbsp;</a>
Das dürfte auch den IE zur Anzeige deines Pfeils bewegen.

Grüße aus Berlin

Christoph S.

[Jochen]

Weil der IE "leere" Elemente nicht für darstellbar hält. Du solltest also ein "geschütztes Leerzeichen" einfügen, also:
   <a href="#oben" class="nachoben">&nbsp;</a>
Das dürfte auch den IE zur Anzeige deines Pfeils bewegen.

Prima, genau das war die Lösung.

<p class="p1"><span>
            <a href="#oben" class="nachoben"><span class="hoch">Nach oben</span>&nbsp;</a>
            </span></p>

Der Text wird nicht angezeigt, durch das Leerzeichen allerdings der Pfeil beim IE.

Danke!
:-)

LG
Jo

[ChrisB]

Hi,

unterlasse bitte kuenftig Doppelpostings, und bleibe in deinem Thread.

MfG ChrisB