[Beb]

Hallo,

ich habe ein Rollover mit CSS geschrieben, das funktioniert im Firefox auch ganz gut, aber im Internetexplorer, bleibt bei einem der Buttons das Bild stehen, wenn ich die Maus vom rechten auf den linken und dann auf den Hintergrund ziehe (umgekehrt komischerweise nicht), hat jemand eine Idee?

das ganze steht unter www.8ung.at/ven

der CSS code ist:

div {
position:absolute;
top:50%;
left:50%;
width: 140px;
height: 140px;
margin-top:-70px;
background-color:#019AF2;
}

div.button1 {
margin-left:-140px;
background: url(../images/button1.gif) 0 -140px no-repeat;
}

div.button2 {
background: url(../images/button2.gif) 0 -140px no-repeat;
}

div.button1 a, div.button2 a {
display: block;
width:100%; height:100%;
overflow:hidden;
border:none;
}

div.button1 a {
background: url( ../images/button1.gif) 0 0 no-repeat;
}

div.button2 a {
background: url( ../images/button2.gif) 0 0 no-repeat;
}

div.button1 a:hover, div.button2 a:hover {
background-image:none;
}

[The Doc]

nimm mal statt ein <a href=""> .

[RoToRa]

Hmm, dir ist schon bewusst, das der IE gar kein XHTML kann, und sich an leeren Elementen, die er als nicht leer erwartet, verschluckt?

<a href="soon.html"/>

Übrigens Text-Browser (warscheinlich auch einschließlich Google) sehen da gar nix und können die Links nicht verfolgen...

Robin

[The Doc]

Also so finde ich es am geschicktesten :
www.mw.sko-graphic.de/test/beb.html

[RoToRa]

Zitat von The Doc

Also so finde ich es am geschicktesten :
www.mw.sko-graphic.de/test/beb.html

Mein Vorschlag wäre es sogar nicht Text sondern den Nicht-Hover-Bild in die Links zusetzen (mit anständigem ALT-Text natürlich). Und diesen auf hover "visibilty: hidden" zu setzem (mit dem Hover-BIld dahinter als Hintergrund-Bild.

Das hätte den Vorteil, dass bei CSS-fähigen Browsern aber bei ausgeschalteten Bildern sowie Screen-Readern etwas zu sehen/hören ist.

Robin

[Swoop]

auchn nettes Beispiel http://www.redmelon.net/tstme/roll/

[The Doc]

@ Rotora:
Ich hab noch nie einen Screenreader o.ä. bedient, aber eine Frage habe ich jetzt schon:
Es gibt Browser, die CSS aktivieren aber Bilder nicht? Und ein Screenreader würde bei dir doch vorlesen (so stell ich es mir vor):
Link - Bild(-name?) - alt-Text
Bei mir:
Link - Text

[Beb]

Zitat von RoToRa

Mein Vorschlag wäre es sogar nicht Text sondern den Nicht-Hover-Bild in die Links zusetzen (mit anständigem ALT-Text natürlich). Und diesen auf hover "visibilty: hidden" zu setzem (mit dem Hover-BIld dahinter als Hintergrund-Bild.

Das hätte den Vorteil, dass bei CSS-fähigen Browsern aber bei ausgeschalteten Bildern sowie Screen-Readern etwas zu sehen/hören ist.

Robin

vielen Dank erstmal für die Tipps, naja mir ist das mit den Screen Readern relativ egal, da die HP nur für meine Freunde sein wird und ich hauptsächlich Fotos draufpacke.. ich denke da wird man mit einem Screenreader nicht so viel Freude dran haben, aber trotztdem ein guter Gedanke

[RoToRa]

Zitat von The Doc

Es gibt Browser, die CSS aktivieren aber Bilder nicht?

Browser nicht, aber ihre Benutzer schon, beispielsweise Modem-Benutzer, die nicht unnötigerweise Bilder herunterladen wollen.

Und ein Screenreader würde bei dir doch vorlesen (so stell ich es mir vor):
Link - Bild(-name?) - alt-Text
Bei mir:
Link - Text

Leider nicht, denn die meisten Screenreader lesen nicht vor was auf "display: none" steht.

Robin

[The Doc]

wieder was gelernt!