zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden FF hat unerklärlichen Abstand zwischen button und eingebettetem span

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.12.2009, 14:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.12.2009
Beiträge: 2
underw0rld befindet sich auf einem aufstrebenden Ast
Frage 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):

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.12.2009, 14:11
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.869
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.12.2009, 14:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.12.2009
Beiträge: 2
underw0rld befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Antwort

Stichwörter
css, design, fehler, firefox

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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:43 Uhr.