FF hat unerklärlichen Abstand zwischen button und eingebettetem span

underw0rld · #1 (**permalink**) 02.12.2009, 14:06

Hi zusammen!

Ich habe ein mir unerklärliches css-Problem mit Firefox, das bei sonst keinem (getesteten) Browser auftritt und hoffe, dass mir hier jemand helfen kann.
Alles ist xhtml und css validiert und zum besseren Verständnis habe ich die Hintergründe noch eingefärbt.

Der xhtml Code ist:

HTML-Code:

<button id="totopbutton" class="form-button-alt" onclick="window.scrollTo(0,0);" style="opacity: 1;">
<span>Nach oben</span>
</button>

Alle darauf wirkenden css Elemente sind:

Code:

* { margin:0; padding:0; }

input, select, button { vertical-align:middle; }

:focus { outline:0; }

.form-button, .form-button-alt {
    display:inline-block;
    height:25px;
    vertical-align:top;
    border:0;
    margin:0 0 -5px -5px;
    padding:0 5px 0 0;
    background:url(../images/sprite2.png) no-repeat 100% 0;
    color:#fff;
    font:bold 12px arial, sans-serif !important;
    cursor:pointer;
    }

.form-button span, .form-button-alt span {
    display:block;
    vertical-align:top;
    line-height:20px;
    height:25px;
    margin:0;
    border:0;
    white-space:nowrap;
    padding:0 5px 0 15px;
    background:url(../images/buttons.png) no-repeat 0 0;
    }

.form-button-alt { background:url(../images/sprite2.png) no-repeat 100% -25px #f00; }

.form-button-alt span { background:url(../images/buttons.png) no-repeat 0 -25px #0f0; }

Hier nun ein Bild wie es gehören sollte (Snapshot aus Opera):

Und hier ein Bild wie es entstellt wird (Snapshot aus Firefox):

Wie beim Firefox Bild deutlich erkennbar ist, wird das eingebette span Element 1px zu tief angezeigt und links und rechts ist ein je 3px breiter Abstand.
Da ich im css-Code schon alle paddings, borders und margins an denen es liegen könnte auf 0 gesetzt hab und es ja im Opera richtig angezeigt wird bin ich total ratlos.

Ich hoffe jemand von euch kann mir helfen!

MFG

heiko_rs · #2 (**permalink**) 02.12.2009, 14:11

Der FX ist (immer noch) sehr "eigen" mit dem button-Element, was spricht gegen input? Abgesehen davon, dass im konkreten Fall eh ein normaler Link angebrachter wäre (der übrigens für den Sprung nach oben auch kein JS braucht).

underw0rld · #3 (**permalink**) 02.12.2009, 14:44

Erst mal danke für die schnelle Antwort!
Bei diesem Beispiel spricht nichts gegen Input oder Link, allerdings ist das ganze Teil eines großen Shopsystems, bei dem die Buttons nicht nur in den anpassbaren Themes, sondern auch im Core-Code erzeugt werden, welchen ich nur sehr ungern ändern würde, weil dieser Code bei jedem Update über das Backend überschrieben werden könnte.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
grafische Navigation horizontal zentrieren, klappt nicht	lila_3	CSS	4	30.11.2010 10:25
Float-Problem?	mischaef	CSS	33	20.10.2010 16:20
[Gelöst] Span in <button> ausserhalb positionieren (FF)	andir	CSS	9	22.10.2009 23:52
Navigation verschwindet im IE6	emti	CSS	4	12.05.2009 15:01
span-infobox wird in ie6 nicht angezeigt?	locita	CSS	9	13.07.2008 16:33