zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden [CSS] Firefox Problem

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.06.2007, 21:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.06.2007
Beiträge: 1
recreation-studios befindet sich auf einem aufstrebenden Ast
Ausrufezeichen [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>
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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.06.2007, 21:55
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.847
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von recreation-studios Beitrag anzeigen

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
Das es im IE funktioniert ist ein Fehler.
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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.06.2007, 21:56
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 21.06.2007, 22:14
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.847
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
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.
Darf man fragen, wie sich display:inline-block im IE auswirkt? Denn Du sagst ja, 'er kennt ihn nicht wirklich'.

Im übrigen habe ich grade jetzt erst gemerkt, das sich im Link ein Bild befindet, sorry.
Mit Zitat antworten
  #5 (permalink)  
Alt 21.06.2007, 22:22
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von ArcVieh Beitrag anzeigen
Darf man fragen, wie sich display:inline-block im IE auswirkt?
Es verursacht hasLayout=true.

Zitat:
Denn Du sagst ja, 'er kennt ihn nicht wirklich'.
Man kann im IE ein Verhalten erreichen, das einem inline-block entspricht, wenn man einem inline-Element Layout gibt.
Auf ein inline-Element angewendet hat inline-block den gewünschten Effekt -- zoom:1 würde aber das gleiche Ergebnis liefern.
Über hasLayout | Eigenschaften
Mit Zitat antworten
  #6 (permalink)  
Alt 21.06.2007, 22:31
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.847
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Es verursacht hasLayout=true.

Man kann im IE ein Verhalten erreichen, das einem inline-block entspricht, wenn man einem inline-Element Layout gibt.
Auf ein inline-Element angewendet hat inline-block den gewünschten Effekt -- zoom:1 würde aber das gleiche Ergebnis liefern.
Über hasLayout | Eigenschaften
Ahh, vielen Dank.
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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:12 Uhr.