Hallo ihr Lieben,
da ihr mir schon vor zwei Tagen so nett geholfen habt, möchte ich euch heute nochmal ein kleines Problem anvertrauen. Und zwar: Meine ganze Seite (sowohl Navigation als auch Content) laufen über Arial Punkt 11. Das ist auch im CSS-File so festgelegt. Jetzt habe ich das Kontaktformular von wp integriert. Das läuft auch super - allerdings werden die Felder dort durch die Schriftart Courier angezeigt.
Nun habe ich mir schon die .php-Dateien des Formulars angeschaut, da fiel mir aber nichts auf. An der style.css kann es ja eigentlich auch nicht liegen. Habt ihr einen Rat?
Viele Grüße
Doreen
Schriftart weicht von CSS-Standard ab
-
-
- Gerade eben
- Anzeige
Hallo!
Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.
- ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
- ✔️ Deutsche Server & DSGVO-konform
- ✔️ Persönlicher Support (kein 0815-Ticket-System)
-
Jo, und wir sollen nun munter drauf los raten?
Gegen Link wird geholfen...
-
Das ist der Link!
Vielleicht hat ja jemand eine Idee? -
Die meisten Browser zeigen von Hause aus die Inhalte von Formularfelder in einer monospace-Schrift an.
Ergänze deine css um eine schriftdefinition für "input" und "Textarea", dann sollte sich das Problem lösen.
Grüße
MO -
Danke für den Tipp :) Leider hat sich da aber immer noch nichts verändert!
-
Hi doreen,
aktuell wird bei dir dies verwendet:HTMLinput { font: 13px 'Trebuchet MS', 'Bitstream Vera Sans', Verdana, Arial, Helvetica, sans-serif; padding: 0; } textarea { font: 13px 'Trebuchet MS', 'Bitstream Vera Sans', Verdana, Arial, Helvetica, sans-serif; padding: 0; }
ist dies nicht das gewünschte?Besser wäre es dies genauer einzutragen, das wäre dann hier:
div.intouch div.inputfield input,
div.intouch div.inputfield textarea {................. -
In der style.css würde das Stück, dass zu dem Kontaktformular gehört, dann also so aussehen?
HTML
Alles anzeigen/* Intouch Contact Form */ /* just for clearing floats, IE Hack */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-table;} /* Hides from IE-mac \*/ .clearfix {display: block; margin: 0; padding: 0; } p.clearfix {} /* End hide from IE-mac */ div.intouch { margin: 1em auto 2em auto; } div.intouch form { float: left; width: 100%; } div.intouch div.inputfield { padding: 4px 0px; position: relative; } div.intouch span { position: relative; top: 0.4em; } div.intouch label { display: block; float: left; clear: left; width: 15%; text-align: right; padding-top: 0.4em; position: relative; right: 5px; } div.intouch div.inputfield input, div.intouch div.inputfield textarea { font: 13px 'Trebuchet MS', 'Bitstream Vera Sans', Verdana, Arial, Helvetica, sans-serif; padding: 0; float: left; margin-left: 10px; } div.intouch div.inputfield input { width: 40%; border: 1px solid #ccc; padding: 3px; } div.intouch div.inputfield textarea { width: 60%; height: 138px; padding: 5px; border: 1px solid #ccc; } div.intouch div.inputfield input.submitbutton { border: 3px double #ccc; background: #F0F0F0; cursor: pointer; width: auto !important; padding: 2px; margin-left: 10px; left: 15%; position: relative; } div.intouch div#usermessage { margin-bottom: 10px; text-align: center; } div.intouch div#usermessage.success {} div.intouch .error { border: 1px solid #FF0000 !important; padding: 1px; } -
Jo, wenn ich das jetzt richtig überblicke ganau so. Dann das andere rauslöschen, was ich oben zitierte.
Aber willst du denn 13px 'Trebuchet MS', ......? Das war doch gar nicht dein Anliegen, das musst du so anpassen wie du willst.Wenn ich das richtig sehe zu 11px Arial, wah?
-
Ja klar, hast natürlich recht :-D Hab jetzt alles angepasst und überschrieben - nur leider will der Browser irgendwie nicht!
-
Mach mal so, ist sauberer:
falls jemand vorbeikommt ohne Arial.Es klappt, du solltest mal den Browsercache löschen.
P.S. du solltest mal im FF checken, ich hab mich schon gewundert was das für komisches Layout ist ;)
Nu hab ich mal des Teufels Werkzeug genommen, da siehts ja besser aus :cry: -
Cache habe ich schon geleert. Komisch, dann liegt es vielleicht an meinen IE-Einstellunge!? Im Firefox zeigt es das Kontaktformular ja auch ganz normal an!
Jetzt hab ich das Layout mal im Firefox geöffnet und war ein bisschen erschrocken :-D Das Problem ist da ja offenbar die Sidebar! Kann ich das irgendwie in den Griff kriegen? -
Hast es wohl inzwischen hinbekommen?
-
Ja, es war ein Fehler in der CSS-Datei! :-) Der Contentbereich war dort zu breit eingestellt :-D
Jetzt funktioniert alles - nochmal besten Dank für deine Hilfe!
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!