Suchfeldhöhe in Browsern verschieden

[rapid10]

So habe ich hochgeladen. Aber das Problem besteht weiterhin.
Es kommen sogar noch welche dazu, nämlich dass beim Vergrößern die Grafik über das Suchfeld hinaussteht und dass im Chrome/Safari von Haus aus, die Grafik über das Suchfeld hinaussteht.

 

[neuroleptika]

So habe ich hochgeladen. Aber das Problem besteht weiterhin.
Es kommen sogar noch welche dazu, nämlich dass beim Vergrößern die Grafik über das Suchfeld hinaussteht und dass im Chrome/Safari von Haus aus, die Grafik über das Suchfeld hinaussteht.

Die Border von #menu .search_input setze mal auf 0. Den Linken Rahmen für das Suchfeld kannst du in die Grafik zeichnen.
Um die Fläche unter .search_submit weiß auszufüllen kannst du die selbe Methode anwenden wie für das Suchfeld.
Dazu brauchst du aber ein weiteres Element:

<div id="menu">
<div id="menu-innen">
			<ul class="menu_sub">
				...
                                                ...
			</ul>
			<div class="search">
				...
                                                ...
			</div>
                        </div>
		</div>

#menu-innen würde eine weiße Grafik mit grauem, linken Rand bekommen.
float:left; und width:100%; muß dann #menu-innen haben. #menu braucht dann kein Float mehr.

 

[rapid10]

Danke, dass du mir noch immer so nett hilfst.

Die Border von #menu .search_input setze mal auf 0. Den Linken Rahmen für das Suchfeld kannst du in die Grafik zeichnen.

Das habe ich bereits umgesetzt.

Um die Fläche unter .search_submit weiß auszufüllen kannst du die selbe Methode anwenden wie für das Suchfeld.

Das heißt ich erstelle eine Grafik in der Größe von auch (?) 500px x 1px (?). Oder soll die anderes groß sein? Und sollte der border nicht rechts sein?

Und stimmt das, dass ich bei search_input den background auf transparent gesetzt habe?

Danke für deine super Hilfe!

 

[neuroleptika]

Das heißt ich erstelle eine Grafik in der Größe von auch (?) 500px x 1px (?). Oder soll die anderes groß sein? Und sollte der border nicht rechts sein?

Nein, eine linker Streifen in der neuen Grafik soll den border-right von #menu .search_input ersetzen.
Im Prinzip ist es egal wie hoch die Grafik ist. Der IE7 baut die Seiten aber oft schneller auf wenn die Grafiken etwas höher sind.

Und stimmt das, dass ich bei search_input den background auf transparent gesetzt habe?

Ja.

 

[rapid10]

Danke!
So jetzt habe ich das mal umgesetzt. Jetzt ist allerdings der graue Streifen ganz links in der Navigation, dort soll er aber nicht hin. Soll ich ihn rechts platzieren und welchen border kann ich dann weglassen?
Ach ja: und wenn ich float von #menu wegnehme, dann stimmen die border ober und unterhalb nicht.

 

[neuroleptika]

Du mußt noch background-position für .#menu_inside anpassen:

background:transparent url(images/search_submit.gif) repeat-y scroll [COLOR="#8b0000"][B]76em[/B] [/COLOR]0;

Border-left für .#menu .search_input muß raus bzw. auf none.

 

[rapid10]

Danke!
So habe das jetzt mal geschafft. Ist das richtig so? Leider ist die Schrift in der Navigation im Chrome noch immer weiter oben, als im Firefox. Aber warum nur?

EDIT: Und warum habe, ich das jetzt eigentlich mit Grafiken gemacht? Ohne Grafiken ist es doch genauso gewesen, oder?

 

[neuroleptika]

Weil nun kein heller Streifen bei Text-zoom mehr unter der Eingabe mehr zu sehen ist. Dein Ergebnis war Schriftgrößenabhängig nicht Browserabhängig (siehe Efchens Antwort). Ich dachte darum ginge es von Anfang an.
Einen Unterschied zwischen Safari4.0 (win) und ff3.5 kann ich nicht erkennen.

In Safari, ff>2, IE>6 kann Mann zwischen Textzoom und Seitenzoom wählen. Im Opera gibt es nur Seitenzoom und im IE6 nur Textzoom.

 

[rapid10]

Ok, vielen Dank für deine super Hilfe! Ich weiß das echt zu schätzen.