Some CSS trouble with input and textarea in Firefox
Yesterday, I noticed some weird behaviour in Firefox. I have had an input field and a textarea formatted with CSS like:
input, textarea
{
color: red;
font-size: 0.8em;
}
If you look at this CSS, you would assume that a text you enter will look the same whether it is in the input field or the textarea. Well, with Konqueror, that is true. But with Firefox, it is different. It seems to me that by default different fonts are used for the two elements. So you have to specify the font family in the CSS:
input, textarea
{
color: red;
font-family: Verdana,Arial,Sans-serif;
font-size: 0.8em;
}
And so it works with Firefox, too.
Please use a background-color whenever you set a color. At very least, make sure one is inherited. For all you know, the user’s defaults are pink on red, so the input, textarea above will have invisible writing (like some bits of this form do for me…).
This advice is based on W3C’s Web Accessibility Initiative: http://www.w3.org/TR/WCAG/#gl-color
Hope that helps. Ciao.
Thanks for your advice!
Ahhh!!! A useability that I have never even thought about. I have had that same problem on other site’s where they have a weird color, but firefox puts all familiar stuff as a color and overrides. So, the background of yellow then has yellow text. (Like your email address I think is one of them in Firefox or IE).
Anyway, nice tip!
It would be easier to just set things like font-family for every element right off the bat, thus saving you from having duplicate settings for td, div, p, span, input, textarea…
* {
font-family: verdana, sans-serif;
}
And, as a side note: please, please do not ever specify the abomination that is Arial. If you want that ’60s Gothic look, just use Helvetica in the first place…
Hi, it works perfectly! thanx for ur advice^^
A related problem that led me to this posting -
I was having a problem where firefox was displaying the font-size of a textarea element approximately half the size of that in a regular text field.
After reading that the font-family was being set differently between the two, I tried using the * font-family entry on my style sheet and wa-la! it evened them out, now they are the same size. Thanx!