Re: HTML form design tip - font size of text input elements - IE7 vs Firefox
Scripsit Diogenes:
Actually, I think the explanation is rather that you didn't read good CSS
tutorials but made wild assumptions, conjectures, and guesses in general.
Well, it is silly, but hardly sillier than authors who routinely set the
font size to (say) 10px. "The whole inheritance idea" is completely
misunderstood by most people who write about "inheritanc e", so I'll skip it
here.
Wrong. It worked. You use a _different_ rule, one with an attribute
selector, and then it was the selector that caused the problem; it would
cause it for any property.
Try re-re-reading it. Actually, I think you should read posts more carefully
in the first occasion, instead of massively quoting them. Comprehensive
quotations are an almost sure sign of lack of comprehensive reading.
You seem to have missed the best of the FAQ resources of this group and seem
to keep doing so, making your attempts rather pointless.
That's destructive. Even font-size: 83% would be less bad. It's illogical,
but at least it (mostly) lets IE users get a font size they can read, by
selecting (for example) the Large option in the Font size menu.
You seem to be thinking that the font size in copy text should be the same
as in form fields. That's questionable. They (almost certainly) have
different font face, unless you do something about this, and 10pt fonts may
look very different in size.
You're solving a wrong problem a wrong way.
Wrong. The size is 13px. With a normal resolution, this corresponds to
9.75pt.
If things look different to you, the reason is probably in the difference of
fonts. The default font face for input elements has a large x-height and
other properties that make it look bigger than most fonts in the same size.
Yes, except that it's not a selector but a rule.
Yes, that's clear. And it's not really serious when you know it, since you
can use different types of selectors.
Indeed.
Yes.
But after these mostly correct conclusions you jump into somthing pointless:
Why would you do that? What have you got against the existence of different
browsers? Different people use different browsers partly just because they
display pages differently.
Not much as such, but it mostly comes as extra when test your pages on IE 7
in quirks mode.
--
Jukka K. Korpela ("Yucca")
Scripsit Diogenes:
Ah, I stand corrected. The possibility had not occurred to
me for two reasons.
me for two reasons.
tutorials but made wild assumptions, conjectures, and guesses in general.
1) a browser setting a fixed font-size for an element
strikes me as being kind of silly - going against the whole
inheritance idea. Silly me for assuming this.
strikes me as being kind of silly - going against the whole
inheritance idea. Silly me for assuming this.
font size to (say) 10px. "The whole inheritance idea" is completely
misunderstood by most people who write about "inheritanc e", so I'll skip it
here.
2) INPUT { font-size: 100% } (or any value) did absolutely
nothing in IE,
nothing in IE,
selector, and then it was the selector that caused the problem; it would
cause it for any property.
Re-reading Mr. Korpela's post, I am now assuming that the
100% rule was necessary in IE6 to get past a fixed size
limitation in IE5.
100% rule was necessary in IE6 to get past a fixed size
limitation in IE5.
in the first occasion, instead of massively quoting them. Comprehensive
quotations are an almost sure sign of lack of comprehensive reading.
I'm still trying to figure out a best practice here.
to keep doing so, making your attempts rather pointless.
When I
set out building a web page, I usually set the BODY element
to { font-size: 10pt; font-family: sans-serif }
set out building a web page, I usually set the BODY element
to { font-size: 10pt; font-family: sans-serif }
but at least it (mostly) lets IE users get a font size they can read, by
selecting (for example) the Large option in the Font size menu.
I want the page and the form content to be consistent in
appearance.
appearance.
as in form fields. That's questionable. They (almost certainly) have
different font face, unless you do something about this, and 10pt fonts may
look very different in size.
INPUT[type="text"] { font-size: 10pt }
We seemed to have established 4 things here
>
1) IE5 had a fixed font size, 11pt, for it text input elements
>
1) IE5 had a fixed font size, 11pt, for it text input elements
9.75pt.
If things look different to you, the reason is probably in the difference of
fonts. The default font face for input elements has a large x-height and
other properties that make it look bigger than most fonts in the same size.
2) IE6 honoured the INPUT { font-size: xx% } CSS selectors,
but does not recognize the INPUT[type="text"} selectors.
can use different types of selectors.
3) IE7 recognizes both types of selectors but only in
standards mode.
standards mode.
4) The form of the Document declaration is important to
avoid triggering *Quirks Mode*.
avoid triggering *Quirks Mode*.
But after these mostly correct conclusions you jump into somthing pointless:
So, to create a form that looks as similar as possible
across as many browsers as possible:
across as many browsers as possible:
browsers? Different people use different browsers partly just because they
display pages differently.
Should I even care about IE5?
in quirks mode.
--
Jukka K. Korpela ("Yucca")
Comment