a hover Problem beim IE

lisali

lisali

Erfahrenes Mitglied
Hallo,

ich habe für den <a>-Tag folgende Formatierung:

HTML: 
a {color:#C16C6F; font-weight: bold; letter-spacing: 0px; text-decoration:none}
a:hover {color:#AB4749;text-decoration:none; background:#FBEEEA}

Ich benutze eigentlich FF, aber wollte nun nochmal alles mit dem IE überprüfen und es werden - anders als im FF - die Bilder im <a>-Tag, die dort eingeschlossen sind, ebenfalls so formatiert und mit einem Hintergrund versehen, was alle Bilder auf der Seite Inhalt wegschieben lässt. Kann ich das irgendwie verhindern, indem ich irgendwie

Code: 
img:hover
oder so modifiziere, dass das verhindert wird im IE?

Vielen Dank!

Liebe Grüße,

Lisa
 
Hallo!

Ich weiss nicht ob ich Dich richtig verstanden habe, aber versuche es mal so (Kommentare beachten):
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">
<title>Linktest</title>

<style type="text/css">

a {color:#C16C6F; font-weight: bold; letter-spacing: 0px; text-decoration:none; position:relative; top:62px;}
/* der Link wird relativ zum Elternelement (hier dem <div>) mit einem Versatz von 62px von oben positioniert
als groben Anhaltspunkt für den Versatz musst Du von der Bildhöhe ca. 19px abziehen (mein verwendetes Bild ist 81px hoch) */

a:visited {color:#C16C6F;}
a:hover {color:#AB4749; background:#FBEEEA;}

.bild {position:absolute; top:-62px; border:none;}
/* das Bild wird absolut zum Link mit einem negativen Versatz von 62px von oben positioniert
als groben Anhaltspunkt für den Versatz musst Du von der Bildhöhe ca. 19px abziehen und den Wert als negativen Wert angeben
der IE (zumindest der IE 5.5) hat Probleme den Hovereffekt für den Bildrahmen umzusetzen, darum habe ich den Bildrahmen deaktiviert
im Firefox 2.x hingegen würde der Hovereffekt funktionieren, wenn ich den Bilderrahmen nicht deaktiviert hätte */

div {height:200px; margin:100px; border:1px solid black;}
/* dient nur der visuellen Darstellung der Auswirkung von "position" und "top" */

</style>
</head>
<body>

<div>
<a href="#">aber hallo&nbsp;<img class="bild" src="Beispielbild.jpg"></a>
<!-- das erzwungene Leerzeichen bewirkt dass der Hintergrund (im IE 5.5) vom Textlink bis an das Bild reicht, im Firefox 2.x tut er es sowieso //-->
</div>

</body>
</html>
Gruss Dr Dau
 
Zuletzt bearbeitet:
Ich versuche auch mal mein Glück, obgleich ich auch nicht sicher bin was genau gemeint ist.

Ich vermute mal das Bilder in dem a tag genested sind also:

HTML: 
<a>
 <img />
</a>

und das diese im IE verschoben sind. deshalb empfehle ich
HTML: 
display: block
auf das a tag anzuwenden.
 
Das hat doch nur teilweise geklappt, denn jetzt werden einige Bilder umgebrochen auf meiner Seite. Wie es aussieht, nur die Bilder, die zusammen mit einem Text in einer Tabellenspalte oder evtl auch Div Layer stehen.

Gibt es vielleicht eine Möglichkeit, dass ich mein a:hover nur auf jeglichen Text beschränke? Dann wäre das Problem auch gelöst! Ansonsten irgendwie anders...

LG,

Lisa
 
lisali hat gesagt.:
... Gibt es vielleicht eine Möglichkeit, dass ich mein a:hover nur auf jeglichen Text beschränke? Dann wäre das Problem auch gelöst! Ansonsten irgendwie anders...
Zum Vergrößern anklicken....
Hallo lisali,

wahrscheinlich gibt es eine Möglichkeit, aber niemand außer dir weiß, was so alles in deinen A-Elementen drin steht. DrDau hatte schon mal den zaghaften Verständigungsversuch gemacht und eine Beispieldatei gepostet. Jetzt würde ich mich riesig freuen, wenn du auch mal ein bisschen von deinem HTML-Quelltext sehen lässt und uns alle vom nächtelangen Grübeln befreist. ;-)

Allein die Stylesheets sind ohne den zugehörigen HTML-Quelltext nichtssagend.
 
Hallo,

wie erwähnt sind es eben ganz normale Links überall auf meiner Seite verteilt, die ich mit diesem Background versehe beim MouseOver (bzw. hover) wie in meinem ersten Post (der Code). Also wird alles mit diesem Hintergrund versehen, was <a>inhalt</a> ist. Und die <a>-Tags selbst im Dokument sind klassen- und id-frei. Also, haben meist keine zusätzliche Formatierungen, o.Ä.

LG,

Lisa
 
Moin,

hast du mal einen Link zu der Seite, damit man dort einen Blick drauf werfen kann?

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück