Input erbt Font-Size nicht
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
browser
code
dank
eigenschaft
erben
feld
form
input
kleine sache
komponente
label
login
modul
problem
tag
tun
url
vererbung
versuchen
windows
-
Guten Tag zusammen.
Ich versuche gerade im Joomla das Login Modul auf das Front-End zu packen und bin dabei auf eine kleine Sache im CSS gestoßen.
Es handelt sich um 2 Labels mit dazugehörigen Input Feldern, jeweils in einem p-Tag:
<p id="form-login-username"> <label for="modlgn-username">User Name</label> <input type="text" size="18" class="inputbox" name="username" id="modlgn-username"> </p>
Weil das ganze etwas zu groß war wollte ich die font-size anpassen:
p#form-login-username input, p#form-login-password input { font-size: .95em; }
Das hat auch ganz gut funktioniert, aber da ja auch die Labels angepasst werden müssen, wollte ich clevererweise das Übergeordnete p-Tag verändern. Also:
p#form-login-username, p#form-login-password { padding: 0; margin: 0; font-size: .95em; }
Leider brachte das keinerlei Veränderung, also habe ich mal im FireBug nachgesehen. Der kriegt zwar mit, dass eine Vererbung stattfindet, löscht die aber, ohne dass ich eine Regel erkenne, die diese ersetzt.
Ausgabe FireBug:
Geerbt von p#form-login-username
p#form-login-username, p#form-login-password {
font-size:0.95em;
}
Ich könnte jetzt natürlich einfach direkt auf die input Felder gehen, würde aber trotzdem den Grund für dieses Verhalten herausfinden.
Gruß, Travianinc.
Beitrag zuletzt geändert: 18.7.2012 15:47:08 von travianinc -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Formelemente erben keine Font-Eigenschaften. Hat irgendwie damit zu tun, dass diese vom "System" gerendert werden und nicht vom Browser. So zeigen zB Browser die in Java programmiert werden ein Formelement mit der jeweiligen GUI-Komponente an oder der IE die Standard-Windows-GUI-Inputfelder. Oder eben Android seine eigenen (von Android und nicht vom Browser) bereitgestellten Eingabefelder.
Du kannst das aber umgehen, wenn du expliziet angibst, dass du doch die Vererbung verwenden möchtest (https://developer.mozilla.org/en/CSS/inheritance). -
So funktioniert es
<html> <head> <style type="text/css"> input.button1 { height: 100px; width: 300px; font-family: Arial, Helvetica, sans-serif; font-size: 25px; font-weight: bold; } </style> </head> <body> <input type="submit" name="Button1" value="http://imageupload.ftools.eu.tc" class="button1"> </body> </html>
-
@trueweb
Danke für die Erklärung. Fühl mich jetzt wieder etwas schlauer und weiß in Zukunft, dass ich auf sowas achten muss. =D
Sowas wie "Vererbung forcieren" hatte ich auch kurz gesucht, dann aber aufgegeben.
@ftools
Ich verstehe gerade die Anwendung auf mein Problem nicht ganz. Trotzdem danke für die Mühe. =) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage