Geek Answers Handbook

The font size specified in the body element is ignored by input

I have a base page here http://www.webdevout.net/test?0V , reproduced below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style type="text/css"> body { font-size: 12px;} </style> <title>Test</title> </head> <body> <p>test</p> <form action="/foo" method="get"> <fieldset> <input type="text" value="bar" /> </fieldset> </form> </body> </html>

When I use firebug to check the page, the text "test" is 12px as expected, but the text "bar" in the input is 11px, I would expect it to be 12px. What is going on please?

+4
source share
3 answers

In the browser, you use the default value for the font-size inhert not inhert or percentage, em or other relative length value. that is, it is an absolute value.

Set the font-size property yourself, for example. input { font-size: 100%; }

Consider using reset style sheets .

+10
source

Some elements of the browser style form are based on their respective OS user interface elements. Therefore, they may not comply with all the styles that you apply to the body (i.e., they cannot inherit from it).

You need to select these specific elements and then apply the rules.

 body, input { font-size: 12px; }
+2
source

Try

 * { font-size:12px; }
+1
source

More articles:


All Articles