• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Suchfeldhöhe in Browsern verschieden

R

rapid10

Mitglied
Hallo,

ich habe ein klitzekleines (unwichtiges) Problem und zwar hätte ich gerne, dass das Suchfeld in meinem Blog in allen Browsern (Safari und Chrome) die gleiche Höhe hat. Derzeit ist es so, dass das Suchfeld im Firefox so angezeigt wird, dass es die Navigation abschließt. Doch bei Chrome und Safari ist ein ca. 1px großer Abstand bis zum Ende der Navigation.
Blizzing

Der Code:
HTML: 
<input type="text" value="Suchen" id="s" name="s" class="search_input" onblur="if(this.value=='')this.value='Suchen';" onclick="if(this.value=='Suchen')this.value='';" />
<input type="image" src="http://www.blizzing.net/wp-content/themes/simple_light/images/search.gif" value="Suchen" class="search_submit" name="submit" />
HTML: 
#menu .search_input {
    background-color: #E2E2E2;
    border: none;
    border-left: 0.1em solid #CCC;
    border-right: 0.1em solid #CCC;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    padding: 0.5em 0.3em;
    width: 17em;
}
Oder liegt das Problem überhaupt in der Navigationsleiste?

Vielen Dank für eure Hilfe!
 
rapid10 schrieb:
Derzeit ist es so, dass das Suchfeld im Firefox so angezeigt wird, dass es die Navigation abschließt. Doch bei Chrome und Safari ist ein ca. 1px großer Abstand bis zum Ende der Navigation.
Zum Vergrößern anklicken....
Das sieht bei mir im Firefox genauso aus wie Du für Chrome und Safari beschreibst, aber nur wenn ich die Schriftgröße ändere. Bei bestimmten Größen habe ich auch mal den ein oder anderen Pixel Abstand. (Firefox 3.6). Das mit den Rundungsfehlern könnte schon hinkommen...
 
Komisch bei mir schaut das ganz anders aus. Nämlich bei Firefox 3.6 ist bei mir gar kein Abstand.
Nur in den anderen Browser.
Ich habe aber nie gerundet. Immer mit ganzen Pixel gearbeitet. Und verwendet habe ich em.
 
Ja, und wenn ich nun die Schriftgröße ändere wird der Browser wohl nie runden müssen?
Nimm nur mal Dein padding von 0.3em. 16px * 0.3em sind 4.8px. Da werden es wohl 5 px sein. Bei 14px Schriftgröße sinds 4.2px, also 4px. Der Browser rundet ständig.
 
Also kann ich dass Problem nie lösen? Oder so ungefähr hinbiegen, dass es halbwegs gut ausschaut?
Ich habe auch gesehen, dass im Chrome der untere Boarder der Navigation weiter unten ist, als der im Firefox. Könnte das damit zusammenhängen? Ich habe aber schon so viele Einstellungen probiert, und nie hat es geklappt.
Weißt du vielleicht irgendeine Idee, wie man das sonst noch machen könnte? Danke!

EDIT: Habe jetzt einen kleinen Trick angewendet, damit man den Abstand nicht sieht. Hab form die background-color vom Eingabefeld gegeben.
 
Zuletzt bearbeitet:
Bei pixelgenauen Angaben sollte es keine Rundungsfehler geben. Aber dann hast Du wieder anders geartete Probleme bei Schriftvergrößerung u.ä.
 
Habs jetzt einfach mal mit dem "background-Trick" gemacht. So sieht es immerhin ansehnlich aus und stört das Auge nicht. ;-)
Danke für deine Hilfe!
 
Grundsätzlich hast Du auf der Seite das Problem, dass du von Vorraussetzungen ausgehst, die nicht bestehen:
Damit kommst Du auf eine Schriftgröße, die zum Teil Deutlich unter 9px liegt.
 
Die Schrift vergrößern.

Ansonsten:
Verzichte auf die Höhenangabe für #menu. Die Höhe passt sich automatisch an die Inhalte an wenn du die Floats darin einschließt.
Am einfachsten mit float:
Code: 
#menu {
float:left;
width:100%;
}

Den grauen Hintergrund für die Eingabe würde ich mit einer Hintergrundgrafik für #menü erstellen
(mit passender background-position in em).

Diesen fortgeschrittenen Selektor brauchst du nicht:
input[type="image"]
Das Element hat schließlich eine Klasse (search_submit).
 
Vielen Dank für die Anleitung!
Das mit dem float und width habe ich bereits umgesetzt. Ein bisschen ein Problem habe ich mit dem anderen Teil. Warum soll ich einen Hintergrund verwenden, wenn es doch eigentlich mit background-color auch geht? Das braucht nicht so lange zum laden.
Und wie soll ich das mit dem type=image machen? Einen ganz normalen Submit-Button mit einer Hintergrundgrafik?

Leider wird im Chrome und Safari die obere Navigation (mit dem Suchfeld) nicht richtig angezeigt. Der border-bottom ist ca. 1px weiter entfernt als im Firefox.
 
rapid10 schrieb:
Vielen Dank für die Anleitung!
... Warum soll ich einen Hintergrund verwenden, wenn es doch eigentlich mit background-color auch geht? Das braucht nicht so lange zum laden.
Zum Vergrößern anklicken....
Weil #menü das einzige Element ist welches immer so hoch ist wie der Inhalt (faux columns ).
type="image" finde ich ok. Nur den css-Selektor (input[type="image"]) braucht du nicht. Du kannst das Element auch mit .search_submit ansprechen.
 
Entschuldige,
input[type="image"] habe ich nur im Firebug gesehen. Den Selektor hast du nicht in deinem css verwendet.

Die Grafik für #menu Garantiert dir, daß #menu immer in der vollen Höhe farbig ausgefüllt wird. Mit background-color für ein inneres Element (mit eigener Höhe) kannst du das nicht erreichen.
 
Super, vielen Dank!
Das heißt, ich mache jetzt ein Rechteck mit der Höhe der Lupe. Und dann gebe ich dem Suchfeld (search_input) die Grafik als Hintergrund. Ist das richtig so?
Wird dann das Menü auch im Safari und Chrome ohne 1px-Abstand angezeigt?

Nochmals vielen Dank für deine Hilfe!
 
Nein,
#menu braucht die Grafik. Die Grafik sollte recht breit sein, so daß sie auch noch bei großer Schriftgröße noch ausreicht.
Mit background-position in em richtest du sie passend aus. Die Höhe ist nicht so wichtig. Mit background-repeat: repeat-y kann sie auch kleiner sein als die Lupe.
Die 1px-Lücke verschwindet dann.

ps:
Am html brauchst du nichts ändern.
 
Zuletzt bearbeitet:
Also, wenn ich jetzt eine ungefähr 500px x 1px große Grafik habe, wie da wird ja der gesamte rechte Bereich grau, weil die Grafik ja zu groß ist.
Und mir ist jetzt aufgefallen, dass in Chrome und Safari der padding-Wert nicht gleich behandelt wird, wie im Firefox. Denn im Safari/Chrome ist border-bottom 1px weiter unten. Aber die Höhe des Menüs stimmt auch, denn die Lupe wird mit den bordern eingegrenzt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben