Hover-Effekt im IE ?

webbastler · 28. Februar 2009

Moin Leute.
Meine Frage:
Der Hover-Effekt (z.B. beim Überfahren eines Links) funktioniert im Internet-Explorer nicht.
Genauso wenig, wie transparente png-Bilder.

Ist der Fehler des Hover-Effekts über CSS zu lösen
oder brauch man da was wie javascript ?
Gibt es auch ne möglichkeit das mit den png bildern zu beheben ?

Danke schon mal im Vorraus.

Mr. Snoot · 28. Februar 2009

Hü,

wie hast du den Hovereffekt denn realisiert? Bei CSS ist die Reihenfolge von a:link, a:visited, a:focus, a:hover, a:active wichtig. Eine andere Reihenfolge kann falsche Ergebnisse liefern, da sich die Formate ggf. gegenseitig überschreiben.

http://de.selfhtml.org/css/formate/zentrale.htm#pseudoformate

PW-toXic · 28. Februar 2009

Wenn du uns den Quelltext gibst, können wir die sicherlich besser und auch schneller helfen.
Wenn möglich reduziere aber bitte das Problem auf das wesentliche. Wenn nicht, ist es immernoch besser wenn du uns überhaupt etwas gibst

webbastler · 15. März 2009

Moin Leuts. Sry, dass es so lange gedauert hat...

Hier ist der Quelltext (auch nachzugucken: http://webbastler.freehoster.ch/files/index.html)
----------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="index,follow,no-cache" />
<meta name="Keywords" content="computerbase" />
<meta name="Description" content="Thread-Example" />
<link rel="SHORTCUT ICON" href="favicon.ico" />
<link rel="icon" href="favicon.ico" type="image/icon" />
<title>Die ist ein Computerbase-Example</title>
<style type="text/css">

</style>

</head>

<body>
<div id="allinto" style="margin: 0 auto">
<a href="#" target="_self"><div id="test1">Test1</div></a>
</div>

</body>
</html>
----------------------------------

Ich möchte mich hier erst mal auf den Hover-Effekt beziehen, nicht die Sache mit den PNGs.
Den Tipp von Mr.Snoot hab ich angewendet (wusst ich vorher nicht ;] ).
Ich habe aber ganze DIVs verlinkt, was im IE zu Schwierigkeiten führt; in Opera geht das beispielsweise.
Ist das mit Hilfe von CSS zu lösen ?

Mr. Snoot · 15. März 2009

Was genau ist nun das Problem?

Im IE7 und8 siehts zumindest so aus wie in FF und Opera.

Deine letzten CSS-Formatierungen gelten allerdings für die ID test 1 bzw. Links innerhalb dieser ID, also innerhalb des divs. Korrekterweise müsste aber der Link selbst oder aber das div, das den Link umschließt (allinto) diese ID bzw. Formatierungen besitzen.

Dark Thoughts · 15. März 2009

Kann es sein das du noch den IE6 oder sogar älter benutzt?

Im Grunde kannst du aber alles mit CSS realisieren (was das an geht), du kannst auch für den IE extra CSS abschnitte oder Dateien benutzen (siehe selfhtml) bzw. sogar für verschiedene Versionen.

Auch wenn mich viele dafür hassen aber ich blocke solche User lieber und weise sie darauf hin einen aktuellen - SICHEREREN - Browser zu nutzen. Dabei sollte man aber bestimmte Browser ausschließen und nicht bestimmte Browser zulassen da es ja z.b. auch Textbrowser für blinde usw. gibt die man damit dann ebenfalls ausschließen würde.

Mr. Snoot · 15. März 2009

Jo, ich finde es immer amüsant, wenn ich mit einem Browser surfen muss (PC in der Arbeit bspw.) und dann so schöne Meldungen bekomme "... aktualisieren Sie ihren Browser ...".

Ja wie denn, wenn ich auf nem fremden PC nichts ändern kann?

Dark Thoughts · 15. März 2009

Indem man dem Chef klar macht das veraltete Browser ein Sicherheitsrisiko für die Firma darstellen (oder die Sperren umgeht, wie erkläre hier mal lieber nicht

).

Auf der Arbeit sollte man evt. auch einfach mal arbeiten.

S1MpLe · 16. März 2009

solltest du noch den IE 6 für deine Webseite als wichtig erachten - was durchaus nicht unüblich ist, da dessen verbreitung noch relativ hoch ist, dürfte dir folgende Seite bei der Behebung deines png-Darstellungsfehlers helfen.

http://www.twinhelix.com/css/iepngfix/

viel Erfolg

webbastler · 16. März 2009

Thx für den Tipp S1MpLe.

@I-HaTeD2:
Ich benutze sicherlich nicht IE6, sondern aktuelle Browserversionen von Opera oder Firefox.
Mir ist die Kompatiblität zu einer alten und trotzdem noch weit verbreiteten Surf-Basis wie IE6 aber immer noch wichtig.

UND: Ich dachte, ein Forum ist dazu da, um anderen Leuten zu helfen, und nicht um Unwissende und Hilfesuchende dafür zu bestrafen, dass sie etwas nicht wissen

(puncto Browsersperren). Außerdem bin ich mir absolut sicher, dass eine Menge deiner fast 4.000 Einträge nicht nur Antworten, sondern auch Fragen sind !
Wenn du hier also schon von verschiedenen CSS-Abschnitten für einzelne Browser redest, warum erklärst du es dann nicht gleich ?!

Nun zum Eigentlichen:
@Mr. Snoot

Im IE7 und8 siehts zumindest so aus wie in FF und Opera.

Stimmt, funzt aber eben nicht im IE6.
Wenn du erklärst, welchen Teil des Stylesheets du mit

Deine letzten CSS-Formatierungen gelten allerdings für die ID test 1

meintest, würde mir das vielleicht helfen.

Mr. Snoot · 16. März 2009

Na hier:

webbastler schrieb:
HTML:

#test1, #test1 a:link, #test1 a:visited { } #test1:hover, #test1 a:hover, #test1 a:active, #test1 a:focus { }

Du setzt hier die Formate für die ID #test1. Diese gelten dann für jedes Element, dass selbst diese ID hat (in deinem Fall ein div) und für untergeordnete Elemente (die sich zwischen <div id="test1"> und </div> befinden).

Innerhalb dieses div befindet sich bei dir aber kein Link, die a-Tags befinden sich außerhalb:

Code:

[COLOR="Red"]<a href="#" target="_self">[/COLOR]<div id="test1">Test1</div>[COLOR="red"]</a>[/COLOR]

Somit gelten die ganzen Linkformatierungen (#test1 a:xxx) theoretisch gar nicht für das, was im div steht, weil dort ja kein Link zu finden ist.

Ob das jetzt wirklich der Fehler ist kann ich nicht sagen, sauber ist es jedenfalls nicht. Möglicherweise tollerieren einige Browser das und der IE6 nicht.

Suche

Hover-Effekt im IE ?

webbastler

Ensign

Mr. Snoot

Gast

PW-toXic

Lieutenant

webbastler

Ensign

Mr. Snoot

Gast

Dark Thoughts

Fleet Admiral

Mr. Snoot

Gast

Dark Thoughts

Fleet Admiral

S1MpLe

Lt. Junior Grade

webbastler

Ensign

Mr. Snoot

Gast

Ähnliche Themen