21.06.2007, 21:39
|
|||
|
|||
[CSS] Firefox Problem
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>
Das Code:
display:inline-block; bzw. display:inline; Analyse: Opera:
Würde mich freuen, wenn jemand ne Antwort dazu parat hätte!  Liebe Grüße, Tobias Klika 
|
| Sponsored Links |
|
21.06.2007, 21:55
|
||||
|
||||
Zitat:
Der IE befindet sich im Quirks Modus und interpretier dimensionen von inline Elementen ohnen display:block; bzw. inline-block! Dein Beispiel funktioniert im IE sowie im Firefox, bis auf die Doctype- Switch Auswirkungen! (Also funktion der Grafik die sich verschiebt  )Eine Navigation gehört in <ul />, diese kannst Du auch leichter horizontal ausrichten.
|
| Sponsored Links |
|
21.06.2007, 21:56
|
|||
|
|||
|
Links sind inline-Elemente. Deine Option 1 (display:inline) und 3 (ohne display) ist also jeweils identisch.
Der IE dehnt inline-Elemente um Bilder aus, das ist falsch -- auch wenn es dem entspricht, was du haben möchtest. inline-block kann der IE nicht wirklich, es wirkt sich in deinem Fall aber nicht aus. Opera und FF verhalten sich korrekt. Der FF versteht kein display:inline-block und ignoriert daher die Angabe. Der Link bleibt inline. Gib ihm display:-moz-inline-box, damit erhältst du das gewünschte Ergebnis. Opera kennt inline-block und wendet es an. BTW: nimm die Browser aus dem Quirks-Modus. DOCTYPE-Switch und seine Auswirkungen Dein geposteter Code ist mit den Sternchen unbrauchbar. Wo kommen die denn her? Geändert von fricca (21.06.2007 um 21:58 Uhr) Grund: Typo
|
|
21.06.2007, 22:14
|
||||
|
||||
|
Zitat:
Im übrigen habe ich grade jetzt erst gemerkt, das sich im Link ein Bild befindet, sorry.
|
|
21.06.2007, 22:22
|
|||
|
|||
|
Zitat:
Zitat:
Auf ein inline-Element angewendet hat inline-block den gewünschten Effekt -- zoom:1 würde aber das gleiche Ergebnis liefern. Über hasLayout | Eigenschaften
|
|
21.06.2007, 22:31
|
||||
|
||||
|
Zitat:
Ja, über hasLayout habe ich den Artikel durchgelesen, den ich sehr interessant finde. Auch hier im Forum habe ich viel darüber gelesen. Ich denke so langsam habe ich das Prinzip verstanden.  Danke.
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Padding Problem im Firefox | kissnet | CSS | 10 | 21.09.2007 13:34 |
| Firefox: float / margin Problem | kadees | CSS | 4 | 14.01.2007 13:23 |
| Problem mit Firefox und Scrollern | Miroslav | CSS | 5 | 31.07.2006 16:46 |
| Problem mit dem Firefox und Boxen nebeneinander | Thomas Raschen | CSS | 1 | 06.05.2006 10:33 |
| CSS Problem im FireFox aber nicht IE | fra232 | CSS | 1 | 29.11.2004 00:04 |
Linear-Darstellung
