XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   FF hat unerklärlichen Abstand zwischen button und eingebettetem span (http://xhtmlforum.de/showthread.php?t=59383)

underw0rld 02.12.2009 15:06

FF hat unerklärlichen Abstand zwischen button und eingebettetem span
 
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): http://www.infestedwear.com/media/totopopera.jpg

Und hier ein Bild wie es entstellt wird (Snapshot aus Firefox): http://www.infestedwear.com/media/totopfirefox.jpg

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 02.12.2009 15: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 02.12.2009 15: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.


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:52 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023