Hallo Community
Auch für mich kommt mal die Zeit, in der ich Hilfe brauche.
Folgendes Problem:
Ihr seht anhand des nachfolgenden Codes und Beispiels, wie sich beim "hover"n das Bild in der Horizontale verschieben sollte, um somit einen Bildertausch hervorzurufen.
Ich habe praktisch 2 Bilder in 1, schneide dieses jedoch in der Hälfte, und verschiebe es beim "hover"n, um den anderen Teil sichtbar zu machen.
Das Problem dabei ist, dass ich ausschließlich bei der Darstellung in Firefox das Bild nach UNTEN verschoben bekomme. IE, Opera funktionieren einwandfrei.
Code:
Code:
<html>
* *<head>
* * <style type="text/css">
* * * * * *a, a:hover, a:link, a:visited, a:active
* * * * * * {
* * * * * * *overflow:hidden;
* * * * * * *display:inline-block;
* * * * * * *margin:0px; padding:0px;
* * * * * * *border:0px;
* * * * * * }
* * * * * *a#home, a#home:link, a#home:visited
* * * * * * {
* * * * * * *background: transparent url("test.gif") no-repeat 0px 0px;
* * * * * * *width:50px; height:50px;
* * * * * * }
* * * * * *a#home:hover, a#home:active
* * * * * * {
* * * * * * *background-position: -50px 0px;
* * * * * * }
* *</style>
* </head>
* <body>
* * * * <a href="" id="home"><img src="frei.gif" style="width:50px;height:50px;border:0px;" alt="" /></a>
* </body>
</html>
Beispiel:
klick
Das
Code:
display:inline-block;
bzw.
display:inline;
benötige ich ja nur, da daraus eine
einzeilige Navigation entstehen soll.
Analyse:
Opera:- display: inline; -> Fehler
- display: inline-block; -> funktioniert!
- ohne display -> Fehler
IE:- display: inline; -> funktioniert!
- display: inline-block; -> funktioniert!
- ohne display -> funktioniert!
FF:- display: inline; -> Fehler
- display: inline-block; -> Fehler
- ohne display -> Fehler
Wie kann der Fehler jetzt an Firefox liegen, wenn ich bei den beschriebenen Optionen in Opera genauso bekomme?
Würde mich freuen, wenn jemand ne Antwort dazu parat hätte!
Liebe Grüße,
Tobias Klika