zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden FF Problem: button mit image

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.03.2007, 15:01
Benutzerbild von darolla
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.03.2007
Ort: Dortmund
Beiträge: 5
darolla befindet sich auf einem aufstrebenden Ast
Standard FF Problem: button mit image

hallo,

ich verzweifle gerade an einer sache.

ich will einen button mit einem image darin haben, aber nicht per background-image.

Code:
CSS:
#resetbutton {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 87px;
    height: 17px;
}

HTML:
<div id="resetbutton"> 						
    <button type="button">
        <img src="reset.gif" width="87" height="17"/>			
    </button>							
</div>
gut, jetzt habe ich links oben einen button in hässlichen grau und 3d feeling, und mittig dazu das bild.

per border: none; bekomm ich den grauen 3d look weg, mit width und height passe ich den button genau auf die bildgrösse an.

in IE6 und IE7 siehts gut aus, in FF und Opera gibts links einen grauen rand. per margin und padding bekomm ich für opera den grauen rand links weg, aber im FF bleibts so.

Code:
#resetbutton button {
    border: none;
    width: 87px;
    height: 17px;							
    margin: 0px;
    padding: 0px;							
}
auch ist im FF das klick gefühl nicht da, also dass der button ein paar pixel nach rechtsunten wandert während ich die linke mouse gedrückt halte.

ist das ein FF bug? weiss jemand eine lösung dafür?

liebe grüße
marco
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.03.2007, 15:02
Benutzerbild von darolla
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.03.2007
Ort: Dortmund
Beiträge: 5
darolla befindet sich auf einem aufstrebenden Ast
Standard

hallo,

um das ganze nochmal klarer zu dokumentieren:

in ff siehts so aus (falsch):



opera, ie6 und ie7 machens so (richtig):



und zu sehen ist das ganze hier:
Button mit Image

liebe grüße
marco
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.03.2007, 15:48
Neuer Benutzer
neuer user
 
Registriert seit: 08.02.2006
Beiträge: 18
silverhay befindet sich auf einem aufstrebenden Ast
Standard

Hi,

setze doch mal die Höhe auf 18px und die Breite auf 91px.
Dann gib dem button background: #fff und schon gehts.

Gruß
Mit Zitat antworten
  #4 (permalink)  
Alt 28.03.2007, 16:59
Benutzerbild von darolla
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.03.2007
Ort: Dortmund
Beiträge: 5
darolla befindet sich auf einem aufstrebenden Ast
Standard

also ich hab entweder die width und height im img geändert, oder die css eigenschaft von #resetbutton button oder die css eigeschaft von #resetbutton. hilft alles nix.

also wo genau soll ich was ändern?

gruß
marco
Mit Zitat antworten
  #5 (permalink)  
Alt 29.03.2007, 08:39
Neuer Benutzer
neuer user
 
Registriert seit: 08.02.2006
Beiträge: 18
silverhay befindet sich auf einem aufstrebenden Ast
Standard

Hi,

Code:
#resetbutton button {
    background: #fff;
    border: none;
    width: 91px;
    height: 19px;							
    margin: 0;
    padding: 0;							
}
So sieht es im FF super aus.

Für den IE solltest du dann allerdings ein extra css anlegen, auf das du über Conditional Comments zugreifst, da der IE anscheinend andere Werte benötigt.

PS: Warum nimmst du nicht

Code:
<input type="image" src="bild.gif" />
Mit Zitat antworten
  #6 (permalink)  
Alt 31.03.2007, 15:14
Benutzerbild von darolla
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.03.2007
Ort: Dortmund
Beiträge: 5
darolla befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

also deine Lösung besteht darin, es dem FF recht zu machen, und die IEs mit Cond.Comments nachzupflegen. Und wie verhält es sich mit Opera? Dort ist auch alles verschoben...

Also ehrlich gesagt keine gute Lösung...

Gibts denn keine Möglichkeit das FF Problem in den Griff zu bekommen?

Gruß
Marco
Mit Zitat antworten
  #7 (permalink)  
Alt 02.04.2007, 08:49
Neuer Benutzer
neuer user
 
Registriert seit: 08.02.2006
Beiträge: 18
silverhay befindet sich auf einem aufstrebenden Ast
Standard

Hi,

da du ohnehin nicht um eine Browserweiche herumkommst, wenn du Crossbrowser arbeiten willst, ist es eine bessere Lösung als du glaubst.

Eine andere Lösung gibt es nicht.
Wie schon gesagt: Warum nimmst du nicht "input type image"

Machs gut!
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
Problem bei Image Sprite Menu scumdivision CSS 3 16.02.2011 04:01
Problem beim horzizontalen Ausrichten von Formelementen finkenmann CSS 7 08.09.2008 02:02
button verrutscht bei onmouseover proggy CSS 3 23.10.2006 18:53
Problem: IE versteckt Text & Feedback Herbi CSS 2 11.08.2006 14:39
formular button image Holger (HMR) CSS 3 26.04.2006 19:50


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:57 Uhr.