nicht angemeldet
link mit backgroundgrafiken und :hover - probleme im ie6 - workaround möglich?
Die Links sollen am Anfang eine Grafik bekommen, die mit einem Miniicon den Linktyp (intern, extern, mail) anzeigt. Bei Rollover auf den Link soll der die Farbe ändern und die Grafik soll sich auch anpassen.
Funktioniert so weit auch, nur beim IE6.0 gibts Probleme, wenn der Link am Anfang der Zeile steht, da wird das padding-left nicht genommen, und die Grafik wird auch nach oben geschoben.
Habe versucht, den IE auszutricksen und ihm vorzugaukeln, der Link sei nicht ganz am Anfang, indem ich ein vor den <a gestellt habe. Hat aber nix gefruchtet. Andere Ideen für Workaraound, oder habe ich was übersehen?
Wenn ich display:block einstelle, klappt alles. Aber die Links sollen halt auch im Fliesstext möglich sein.
Könnte mir nur noch eine mühsame Variante vorstellen, wo ich das Icon mit einem img-Tag vor den Link stelle und mit Javascript bei onMouseover im <a> austausche. Möchte mir das aber ersparen.
Wenn keine Styles oder Javascript vom Browser unterstützt werden, ist es ok, daß die Sache nicht funktioniert. Aber wenn (was ja meistens der Fall ist), soll es angezeigt werden.
gruß werner
-----------------
html:
<p> Text Text Text Text Text Text Text Text Text Text
<a id="linkint" href="link-int">Test Icon Link 1</a>
Text Text Text Text Text Text Text Text Text Text Text Text
<a id="linkint" href="link-ext">Test Icon Link 2</a>
</p>
css:
body { padding:50px; margin:0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:100%;
line-height:0,5em;
color:#7d7d7d;
background-color:white;
}
/* Links mit Icons */
a#linkint {
display:inline;
padding:2px;
padding-left:20px;
text-decoration:none;
white-space:nowrap;
color:#474747;
background:url(img/icon/link-int.gif);
background-position:left center;
background-repeat:no-repeat;
}
a#linkint:hover {
display:inline;
padding:2px;
padding-left:20px;
color:#B30212;
white-space:nowrap;
background:url(img/icon/link-int-rollover.gif);
background-position:left center;
background-repeat:no-repeat;
}
-
Hallo werner
Habe versucht, den IE auszutricksen und ihm vorzugaukeln, der Link sei nicht ganz am Anfang, indem ich ein vor den <a gestellt habe. Hat aber nix gefruchtet.
Damit ist es _vor_ dem
white-space:nowrap;und nützt nichts.> html: > > <p> Text Text Text Text Text Text Text Text Text Text > <a id="linkint" href="link-int">Test Icon Link 1</a> > Text Text Text Text Text Text Text Text Text Text Text Text > <a id="linkint" href="link-ext">Test Icon Link 2</a> > </p>Eine id darf nur _einmal_ pro Dokument vorkommen, verwende dafür Klassen.
Versuche es einmal so:
<p> Text Text Text Text Text Text Text Text Text Text <span class="linkint"> <a href="link-int">Test Icon Link 1</a></span> Text Text Text Text Text Text Text Text Text Text Text Text <span class="linkint"> <a href="link-ext">Test Icon Link 2</a></span> </p>und im CSS:
.linkint { white-space:nowrap; } .linkint a { display:inline; padding:2px; padding-left:20px; text-decoration:none; color:#474747; background:url(img/icon/link-int.gif) no-repeat left center; } .linkint a:hover { color:#B30212; background-image:url(img/icon/link-int-rollover.gif); }Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef,
so klappt es, danke. Schade, daß es nicht ohne spans geht.
Eine id darf nur _einmal_ pro Dokument vorkommen, verwende dafür Klassen.
Stimmt, hab ich beim rumprobieren übersehen.
Nächste Hürde ist jetzt das htmledit vom cms. Da verschiedene Icons für die unterschiedlichen Links einbauen. Ist aber ein anderes Thema.
Auf Wiederlesen
wiederlesn,
werner
-