tags:

views:

238

answers:

1

I'm building a form with 3 fields: #name, #mail, and #message. The first and second field have the same font size but the last one (#message) have a bigger font size only on Firefox.

Here is the CSS of #message when I inspect it with Firebug:

 ....loading....

body {
color:#666666;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
line-height:130%;
margin:0;
padding:0;
}
screen.css (line 3)
#message {
height:100px;
width:200px;
}
global.css (line 189)
#name, #email, #message {
font-family:Arial,"MS Trebuchet",sans-serif;
margin:0 0 10px;
padding:6px;
}
global.css (line 182)
Inherited fromdiv#form
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv#contact
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv.container
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv#footer
#footer {
color:#DDDDDD;
}
global.css (line 145)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited frombody#home
body {
color:#666666;
font-family:Arial,"MS Trebuchet",sans-serif;
font-size:75%;
}
global.css (line 27)
body {
line-height:1;
}
global.css (line 12)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromhtml
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)

And I have this in my Firefox chrome folder (userContent.css):

input, select, button,textearea {
 font-family: Arial !important; 
}

pre, code {
 font-family: Consolas !important; 
}

Here is the CSS of #name when I inspect it with Firebug:

 ....loading....

body {
color:#666666;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
line-height:130%;
margin:0;
padding:0;
}
screen.css (line 3)
#name, #email, #message {
font-family:Arial,"MS Trebuchet",sans-serif;
margin:0 0 10px;
padding:6px;
}
global.css (line 182)
input, select, button, textearea {
}
userContent.css (line 1)
Inherited fromdiv#form
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv#contact
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv.container
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv#footer
#footer {
color:#DDDDDD;
}
global.css (line 145)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited frombody#home
body {
color:#666666;
font-family:Arial,"MS Trebuchet",sans-serif;
font-size:75%;
}
global.css (line 27)
body {
line-height:1;
}
global.css (line 12)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromhtml
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)

Here is the CSS of #mail when I inspect it with Firebug:

....loading....

body {
color:#666666;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
line-height:130%;
margin:0;
padding:0;
}
screen.css (line 3)
#name, #email, #message {
font-family:Arial,"MS Trebuchet",sans-serif;
margin:0 0 10px;
padding:6px;
}
global.css (line 182)
input, select, button, textearea {
}
userContent.css (line 1)
Inherited fromdiv#form
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv#contact
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv.container
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromdiv#footer
#footer {
color:#DDDDDD;
}
global.css (line 145)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited frombody#home
body {
color:#666666;
font-family:Arial,"MS Trebuchet",sans-serif;
font-size:75%;
}
global.css (line 27)
body {
line-height:1;
}
global.css (line 12)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
Inherited fromhtml
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
global.css (line 2)
A: 

One of the best things that you could do with your font-size definitions is to use em unit sizes instead of the px sizes.

Still, not much can be told by this CSS, since the other two styles are missing (#name, #mail). With those other two you can easilly compare them and see what is different.

jpabluz