CSS: Unterschiedliche Schriftgrössen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
berechnet reiter
boxen
browser
code
dank
definieren
eigene definition
element
face
feld
glauben
input
problem
rahmen
schrift
schriftart
teil
text
textfeld
url
-
Hallo
Ich habe einmal ein input textfeld und einmal ein div element:
<div id="poll_title"></div> <div class="input_container"> <input id="poll_title" type="text" placeholder="Poll title" autofocus /><br /> </div>
Und dazu ein CSS Code:
input[type=text]{ width: 100%; font-size: 14pt; border: none; background: rgba(0,0,0,0.0); } div#poll_title{ font-size: 18pt; }
Ich will bei beiden die gleiche Schriftgrösse. Ihr merkt, beim einen hab ich 14pt und beim anderen 18pt. So ergibt es die gleiche grösse, ansonsten nicht. An was liegt das? Muss ich das wirklich einfach so machen? Oder gibt es eine Lösung, dass ich bei beiden das gleiche erreiche?
Danke -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo!
Welchen Browser benutzt du denn? Ich habe hier Firefox und da sehen die Schriftgrößen absolut nicht gleich aus. Mit dem Add-on Context Font sieht man auch gut, welche Schriftgröße gegeben ist.
Als ich dem input die selbe Schriftgröße (18 px), wie #poll_title gegeben und mal beiden die selbe Schriftart zugewiesen habe, wurden beide gleich dargestellt (Firefox, aber 24 px).
Als nur #poll_title und .input_container die selbe Schriftgröße hatten und das input keine eigene Definition, zeigte Firebug im "Berechnet"-Reiter eine Schriftgröße von 13.3333 px.
Wahrscheinlich ist es durch das Inputfeld, das ja Rahmen und Padding hat, automatisch drin, dass die Schrift um x % verkleinert wird...
Wann das 14-pt-input die selbe Größe wie das 18-pt-div hat, kann ich aber noch nicht nachvollziehen... :/ -
things schrieb:
Hallo!
Welchen Browser benutzt du denn? Ich habe hier Firefox und da sehen die Schriftgrößen absolut nicht gleich aus. Mit dem Add-on Context Font sieht man auch gut, welche Schriftgröße gegeben ist.
Als ich dem input die selbe Schriftgröße (18 px), wie #poll_title gegeben und mal beiden die selbe Schriftart zugewiesen habe, wurden beide gleich dargestellt (Firefox, aber 24 px).
Als nur #poll_title und .input_container die selbe Schriftgröße hatten und das input keine eigene Definition, zeigte Firebug im "Berechnet"-Reiter eine Schriftgröße von 13.3333 px.
Wahrscheinlich ist es durch das Inputfeld, das ja Rahmen und Padding hat, automatisch drin, dass die Schrift um x % verkleinert wird...
Wann das 14-pt-input die selbe Größe wie das 18-pt-div hat, kann ich aber noch nicht nachvollziehen... :/
Ich benutze google chrome. Mein input feld hat kein padding und auch keinen rahmen, hab ich beides aus. Und sie wird ja auch nicht verkleinert, sie ist ja grösser als die, im normalen div Feld. Aber ich glaube, ich lass das einfach so mit meinen 14 und 18, solange es stimmt, passts ja. -
Das Problem muss woanders im Code liegen. Mit dem was du gepostet hast ergibt das die gleiche Schriftgröße, vorausgesetzt man benutzt die gleiche Schriftgröße und Schriftart. (Chrome/Firefox)
Ich nehme an das du später im CSS Teil die Schriftgröße für Inputfelder überschreibst.
Beitrag zuletzt geändert: 10.1.2014 13:48:40 von h4nni -
Versuch mal, bei beiden die Schrift zu definieren, die verwendet wird:
font-face: ...;
Ich glaub das war damals meine Lösung wo ich ähnliche Probleme mit den Textinput-Boxen hatte. -
Da gebe ich Sonok recht. Chrome ändert (wenn ich mich nicht irre) die Schriftart in Input feldern daher ist es nötig die Schriftart anzugeben.
-
Okey, danke euch beiden. :)
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
