Textfeld mit Button an rechter Seite, nicht einheitliche Darstellung

[Tobi44]

Hallo,

möchte ein Textfeld mit einem Button auf rechter Seite haben. Dazu habe ich mir ein Beispiel aus dem Internet besorgt und angepasst. Mit Verdana 12px wird es in Opera sowie Firefox korrekt dargestellt, mit Calibri 16px ist im Opera der Abstand des Buttons zum Textfeld nicht gleichmäßig und beträgt nicht ca. 1 Pixel. Habe mal zwei Screenshots angehängt.

Dabei handelte dieses CSS-Beispiel davon, dass der Button und das Textfeld auf gleicher Höhe sind.

CSS:

#form-interests input {vertical-align:middle; font-weight:bold; font-size: 12px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;}
#form-interests input[type="text"] {width:488px; padding:8px 175px 8px 10px; font-family:Calibri; font-size:16px; background:#eee; border:1px solid #bbb;}
#form-interests button[type="button"] {width:150px; vertical-align:middle; margin-left:-152px; padding:7px; border:none; font-family:Calibri; font-size:16px; color:#fff; background: #157ebc; text-shadow: 0 1px 0 rgba(0,0,0,0.8); cursor:pointer; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;}
#form-interests button[type="button"]::-moz-focus-inner {border:0;}
#form-interests button[type="button"]:hover {background:#6DB7E2;}
#form-interests button[type="button"]:focus {background:#6b6b6b;}

HTML:

<input type="text" id="interests" onfocus="resettext(this)" value="test"><button type="button" id="submit-interests" style="background-image: url('/img/magnifying_glass.png');background-repeat:no-repeat; background-position: 3px 50%;padding-left:24px;">Search for videos</button>

Was mache ich falsch?

 

[Marv]

Hallo,

dass die Schriftarten in verschiedenen Browser anders angezeigt werden hatte ich auch schonmal. Ich denke mal dass da eventuell browserinterne einstellungen sind. Eventuell so etwas wie letter-spacing?
Würde diesbezüglich mal versuchen dem Text einheitliche Formatierungs-Regeln im CSS zu geben, ist aber nur geraten, ob das daran liegt.

Wenn es am Browser selber liegt und nicht über CSS Steuerbar ist würde ich vorschlagen:

1.) So lassen, da du davon ausgehen kannst dass andere Personen im Opera die gleiche abweichende Darstellung haben. Und da hier die veränderung nur minimal ist, solltest du nicht zu kleinlich sein und leichte Browser-Unterschiede einfach in Kauf nehmen.

2.) Verwende eine andere Schriftart wie Verdana..Tahoma oder Arial.

 

[Tobi44]

Hallo und danke für Deine Antwort.

Hmm, wollte einmal im Leben für eine Sache eine andere Schriftart als diese Standard Verdana, Tahoma und Arial verwenden.
Auf diesem Screenshot sieht es nicht so ausgeprägt aus, wie es aber in Wirklichkeit ist (Bild wurde beim Upload verzerrt). Und es sieht einfach unprofessionell und schlecht gemacht aus.

Chrome, Safari und Firefox stellen es korrekt dar, der IE zeigt zu große Abstände oben und unten, und der Opera schiebt den Button zu weit nach unten.

Da muss es doch eine Lösung mit CSS geben. Vielleicht sogar feste Höhen des input-Feldes und Buttons definieren?

Edit: Hab nochmal geschaut. Es klappt überhaupt nicht. Mach ich die Schrift ein bisschen größer passt es im einen Browser haargenau, im anderen wieder gar nicht usw. Es muss eine Lösung geben!

Edit2: Habs vorerst: Habe dem input-Feld sowie dem Button eine auf Pixel genaue Höhe gegeben. Somit wird es sogar im IE korrekt angezeigt.

 

[Tobi44]

Hi,

nachdem ich diese Herausforderung geschafft habe, steht die nächste bereit. Da komme ich einfach nicht weiter.

Möchte, dass vor dem Button links ein <span tag ist, den ich mit Text (bzw. einer Zahl) füllen kann. Leider schaffe ich es nicht, etwas vor den Button zu setzen, da sich dieser sonst aus seiner Position löst und nach sonstwohin verschiebt.

Mein Code sieht aktuell so aus:

#form-interests input {vertical-align:middle; font-weight:bold; font-size: 12px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;}

#form-interests input[type="text"] {height:19px; width:465px; padding:8px 198px 8px 10px; font-family:Calibri; font-size:16px; background:#F7F6F6; border:1px solid #bbb;}
#form-interests input[type="text"]:hover {background:#eee;}
#form-interests input[type="text"]:focus {background:#fff;}
#form-interests button[type="submit"] {height:33px; width:164px; vertical-align:middle; margin-left:-166px; padding:7px; border:none; font-family:Calibri; font-size:16px; color:#fff; font-weight:bold; background: #157ebc; text-shadow: 0 1px 0 rgba(0,0,0,0.8); cursor:pointer; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;}
#form-interests button[type="submit"]::-moz-focus-inner {border:0;}
#form-interests button[type="submit"]:hover {background:#6DB7E2;}
#form-interests button[type="submit"]:focus {background:#6b6b6b;}


#form-interests span[id="new-videos"] {height:33px; font-family:Calibri; font-size:24px; color:#ff0000; font-weight:normal; background: #F8E0E0; text-shadow: 0 1px 0 rgba(255,255,255,0.8); border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;}

<input type="text" name="interests" id="interests" onfocus="resettext(this)" value="<?php if (empty($home_interests)) { echo $standard_interests; } else { echo $home_interests; } ?>">
<button type="submit" name="submit_interests" id="submit-interests" style="background-image: url('/img/magnifying_glass.png');background-repeat:no-repeat; background-position: 6px 50%;padding-left:24px;">Search for videos</button>

Wie kriege ich einen span tag vor den Button?