HTML form design tip - font size of text input elements - IE7 vsFirefox

**Steve Pugh** · Feb 25 '07, 07:25 PM

Re: HTML form design tip - font size of text input elements - IE7 vs Firefox

Diogenes <nospam@nospam. netwrote:

>The following CSS rule works in FireFox but not in IE7
>
>INPUT[type="text"] { font-size: 10pt }
>
>Plug in any value in the above line. IE7 simply ignores it.

Works for me.

Interesting, it only works if I trigger standards mode. You must be
including a doctype that triggers quirks mode.

OTOH, attribute selectors won't work at all in IE6, so don't use them
for anything too important.

>FWIW, I can't see M$ fixing this 'bug' anytime soon. Their
>'zoom' feature of scaling a bitmap image as opposed to the
>more elegant solution of incrementing the font-size is,
>IMHO, pretty lame and goofy looking.

IE7 offers both page zoom and text zoom. The problem is that by
setting font sizes in px or pt authors disable text zoom. So don't use
those units for font size - use % or em instead.

><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Triggers quirks mode, so you're making IE6 and IE7 emulate the bugs of
IE5.

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.n et <http://steve.pugh.net/>

**Diogenes** · Feb 25 '07, 08:05 PM

Re: HTML form design tip - font size of text input elements - IE7vs Firefox

Steve Pugh wrote:

Diogenes <nospam@nospam. netwrote:

>>The following CSS rule works in FireFox but not in IE7
>>
>>INPUT[type="text"] { font-size: 10pt }
>>
>>Plug in any value in the above line. IE7 simply ignores it.

>
Works for me.
>
Interesting, it only works if I trigger standards mode. You must be
including a doctype that triggers quirks mode.
>

Hey, brilliant Steve! I swapped the DOCTYPE for the
following in the same document ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

and it works great! I've never dealt with quirks and
standards mode. Do you have a favorite bookmark
that discusses this?

OTOH, attribute selectors won't work at all in IE6, so don't use them
for anything too important.
>

It has been my impression that IE7 has replaced IE6 on
almost every machine by now. Any idea of what % still run
IE6? I only have one system - IE6 and IE7 seem to be
mutually exclusive on a single system.

>

>>FWIW, I can't see M$ fixing this 'bug' anytime soon. Their
>>'zoom' feature of scaling a bitmap image as opposed to the
>>more elegant solution of incrementing the font-size is,
>>IMHO, pretty lame and goofy looking.

>
>
IE7 offers both page zoom and text zoom. The problem is that by
setting font sizes in px or pt authors disable text zoom. So don't use
those units for font size - use % or em instead.
>
>

>><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

>
>
Triggers quirks mode, so you're making IE6 and IE7 emulate the bugs of
IE5.
>
Steve

Thanks again,
Jim

**Jukka K. Korpela** · Feb 25 '07, 08:35 PM

Re: HTML form design tip - font size of text input elements - IE7 vs Firefox

Scripsit Diogenes:

and it works great!

Using input { font-size: 100% } (which is what you _should_ do) works well
on IE 6 and IE 7. It avoids the issue of support to attribute selectors -
and makes button texts, too, appear in reasonable size.

It has been my impression that IE7 has replaced IE6 on
almost every machine by now.

Don't be ridiculous. IE 7 isn't even available e.g. for Windows 98.

--
Jukka K. Korpela ("Yucca")

http://www.cs.tut.fi/~jkorpela/

**Diogenes** · Feb 25 '07, 09:05 PM

Re: HTML form design tip - font size of text input elements - IE7vs Firefox

Jukka K. Korpela wrote:

>
Using input { font-size: 100% } (which is what you _should_ do) works
well on IE 6 and IE 7. It avoids the issue of support to attribute
selectors - and makes button texts, too, appear in reasonable size

Instead of using ....

INPUT { font-size: 100% }

I'd be inclined use ... well nothing at all, which,
I think, is equivalent to your suggestion. But if
you are paid by lines of code - hey, go for it.

The problem is that IE6 and IE7 (in quirks mode) offers only
1 font size for a text input element - 11pt.
..

>

>It has been my impression that IE7 has replaced IE6 on
>almost every machine by now.

>
>
Don't be ridiculous. IE 7 isn't even available e.g. for Windows 98.
>

You're right, I should forgo all improvements, features and
advancement of the last 9 years so as NOT to offend the
sensibilities of the 1% demographic of Windows 98 users out
there.

What was I thinking?

I prefer to develop with Firefox as my primary browser. The
ONLY reason I have IE on my system is that MOST computers
that I want to reach have IE as their default.

It's a numbers game my friend. What is so ridiculous about
that?

-Jim

**Rick Brandt** · Feb 25 '07, 09:15 PM

Re: HTML form design tip - font size of text input elements - IE7 vs Firefox

Diogenes wrote:

Jukka K. Korpela wrote:

Using input { font-size: 100% } (which is what you _should_ do)
works well on IE 6 and IE 7. It avoids the issue of support to
attribute selectors - and makes button texts, too, appear in
reasonable size

>
Instead of using ....
>
INPUT { font-size: 100% }
>
I'd be inclined use ... well nothing at all, which,
I think, is equivalent to your suggestion. But if
you are paid by lines of code - hey, go for it.
>
The problem is that IE6 and IE7 (in quirks mode) offers only
1 font size for a text input element - 11pt.
.

It has been my impression that IE7 has replaced IE6 on
almost every machine by now.

Don't be ridiculous. IE 7 isn't even available e.g. for Windows 98.

>
You're right, I should forgo all improvements, features and
advancement of the last 9 years so as NOT to offend the
sensibilities of the 1% demographic of Windows 98 users out
there.
>
What was I thinking?
>
I prefer to develop with Firefox as my primary browser. The
ONLY reason I have IE on my system is that MOST computers
that I want to reach have IE as their default.
>
It's a numbers game my friend. What is so ridiculous about
that?
>
-Jim

Even disregarding win98 I doubt that IE7 has even hit a tenth of the IE users
out there.

**Jim Moe** · Feb 25 '07, 09:45 PM

Re: HTML form design tip - font size of text input elements - IE7vs Firefox

Diogenes wrote:

>

>OTOH, attribute selectors won't work at all in IE6, so don't use them
>for anything too important.

>
It has been my impression that IE7 has replaced IE6 on
almost every machine by now. Any idea of what % still run
IE6?
>

You must be reading Microsoft PR releases.
IE7 uptake is quite slow, it is not even available for Windows versions
prior to XP sp2. Given that at least 60% of Windows users have those older
versions, it will be quite a while (3 - 5 years) before IE6 becomes
somewhat irrelevant, a bit like IE5 is now.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

**Steve Pugh** · Feb 25 '07, 09:45 PM

Re: HTML form design tip - font size of text input elements - IE7 vs Firefox

Diogenes <nospam@nospam. netwrote:

>Steve Pugh wrote:

>Diogenes <nospam@nospam. netwrote:

>>>The following CSS rule works in FireFox but not in IE7
>>>
>>>INPUT[type="text"] { font-size: 10pt }
>>>
>>>Plug in any value in the above line. IE7 simply ignores it.

>>
>Works for me.
>>
>Interesting, it only works if I trigger standards mode. You must be
>including a doctype that triggers quirks mode.
>>

>
>Hey, brilliant Steve! I swapped the DOCTYPE for the
>following in the same document ...
>
><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
>
>and it works great! I've never dealt with quirks and
>standards mode. Do you have a favorite bookmark
>that discusses this?

Activating Browser Modes with Doctype

http://hsivonen.iki.fi/doctype/

Explains how browsers use doctype sniffing to switch the engine mode between the quirks mode and the standards mode.

and

Doctype switching and standards compliance in Internet Explorer and Netscape

http://gutfeldt.ch/matthias/articles/doctypeswitch.html

plus the various sites they reference.

>OTOH, attribute selectors won't work at all in IE6, so don't use them
>for anything too important.

>
>It has been my impression that IE7 has replaced IE6 on
>almost every machine by now. Any idea of what % still run
>IE6? I only have one system - IE6 and IE7 seem to be
>mutually exclusive on a single system.

The stats for two sites I maintian (one high traffic general audience
site, another a hobby site) both have about two IE6 visits for every
one IE7 visit. I'd expect IE6 to be common for a couple of years to
come.

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.n et <http://steve.pugh.net/>

**Jukka K. Korpela** · Feb 25 '07, 09:55 PM

Re: HTML form design tip - font size of text input elements - IE7 vs Firefox

Scripsit Diogenes:

Instead of using ....
>
INPUT { font-size: 100% }
>
I'd be inclined use ... well nothing at all, which,
I think, is equivalent to your suggestion.

It isn't equivalent at all. You need to learn some CSS before you can
understand this. Briefly, browsers may have all kinds of settings in their
browser style sheets, and IE has such settings for input elements, among
other things.

You're right, I should forgo all improvements, features and
advancement of the last 9 years so as NOT to offend the
sensibilities of the 1% demographic of Windows 98 users out
there.

You are really trying to ridicule yourself in public, are you not?

What was I thinking?

Not very much, apparently.

--
Jukka K. Korpela ("Yucca")

http://www.cs.tut.fi/~jkorpela/

**Martin Clark** · Feb 25 '07, 09:55 PM

Re: HTML form design tip - font size of text input elements - IE7 vs Firefox

Diogenes wrote...

>It has been my impression that IE7 has replaced IE6 on
>almost every machine by now. Any idea of what % still run
>IE6? I only have one system - IE6 and IE7 seem to be
>mutually exclusive on a single system.

The stats for my UK based sites show:
IE7 47%, IE6 39%, Firefox 9%, Safari 3%.
IE7 48%, IE6 38%, Firefox 10%, Safari 1%.
IE7 27%, IE6 55%, Firefox 16%, Safari 1%.
so IE6 is still alive and kicking in the UK.
--
Martin Clark

**Diogenes** · Feb 25 '07, 11:15 PM

Re: HTML form design tip - font size of text input elements - IE7vs Firefox

Rick Brandt wrote:

>
Even disregarding win98 I doubt that IE7 has even hit a tenth of the IE users
out there.
>
>

I did a quick & dirty analysis of one home page since Jan 3.

The MSIE 6.0 windows agents outnumbered the MSIE 7.0
windows agents by about 2-1, meaning about 33% have
IE7 already.

Firefox came in at around 18% of all users.

Windows 98 & Opera users came in at under 1%

Very small sample but I'd bet it's not a lot
different a very big sample.

I've also done some testing with the CSS rules.

I have text INPUT elements contained within LABEL
elements. This offers some advantages. A radio
button or checkbox INPUT, for example, can be
activated by clicking on the LABEL text instead
of just the button or checkbox itself.

I specified that the LABEL text font-size to be 80%
so that a LABEL above an input box would look like a
a regular printed form.

In FF, the text INPUT then inherited the reduced
font-size of the LABEL container. So the text INPUT
font size in FF was about 9pt instead of the 10pt
had expected (I has specified 10pt for the BODY)

IE6 left the text INPUT elements at 11pt.

Another interesting point. I changed to my
original declaration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

to:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

and IE went back to standards mode instead
of quirks mode.

I also read at:

UX agency Webcredible joins Inviqa

http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer-7.shtml

UX agency Webcredible joins Inviqa to offer best-in-class services across the digital lifecycle.

that the * html hack won't work any more but it
does seem to have worked for me. Maybe I was in
IE quirks mode at the time?

What is the best way to handle this? Is
triggering *quirks* mode a quick & dirty way
to see what a web page will look like in
IE6 when you are using IE7?

Cheers
Jim

**Steve Pugh** · Feb 25 '07, 11:15 PM

Re: HTML form design tip - font size of text input elements - IE7 vs Firefox

Diogenes <nospam@nospam. netwrote:

>What is the best way to handle this? Is
>triggering *quirks* mode a quick & dirty way
>to see what a web page will look like in
>IE6 when you are using IE7?

Not really. Quirks mode in both IE6 and IE7 is mostly about emulating
the CSS shortcomings of IE5.

So, if you trigger quirks mode then both IE6 and IE7 will be degraded
in broadly similar way. But there will still be differences.

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.n et <http://steve.pugh.net/>

**Diogenes** · Feb 25 '07, 11:35 PM

Re: HTML form design tip - font size of text input elements - IE7vs Firefox

Jukka K. Korpela wrote:

Scripsit Diogenes:
>

>Instead of using ....
>>
>INPUT { font-size: 100% }
>>
>I'd be inclined use ... well nothing at all, which,
>I think, is equivalent to your suggestion.

>
>
It isn't equivalent at all. You need to learn some CSS before you can
understand this. Briefly, browsers may have all kinds of settings in
their browser style sheets, and IE has such settings for input elements,
among other things.
>

Maybe I'm unclear on the concept, but isn't *font-size:100%*
like saying use the same font-size as before? Kind of
like mutiplying a number by 1 and calling it a days work?

You are really trying to ridicule yourself in public,

are you not?

>

Keep in mind who was the first to use the word *ridiculous*.

There are plenty of others who like to ridicule me in
public. They are doing a fine job. Leave it to the experts
I say.

>What was I thinking?

>
>
Not very much, apparently.
>

Reflective, isn't it.

Cheers
Jim

**Steve Pugh** · Feb 26 '07, 07:25 AM

Re: HTML form design tip - font size of text input elements - IE7 vs Firefox

Diogenes <nospam@nospam. netwrote:

>Jukka K. Korpela wrote:

>Scripsit Diogenes:
>>

>>Instead of using ....
>>>
>>INPUT { font-size: 100% }
>>>
>>I'd be inclined use ... well nothing at all, which,
>>I think, is equivalent to your suggestion.

>>
>It isn't equivalent at all. You need to learn some CSS before you can
>understand this. Briefly, browsers may have all kinds of settings in
>their browser style sheets, and IE has such settings for input elements,
>among other things.
>>

>Maybe I'm unclear on the concept, but isn't *font-size:100%*
>like saying use the same font-size as before? Kind of
>like mutiplying a number by 1 and calling it a days work?

Consider a browser style sheet
input {font-size: 11pt;}

Now consider two author stylesheets:
form {font-size: 24pt;}

and
form {font-size: 24pt;}
input {font-size: 100%;}

What will be displayed for those two different author stylesheets in
the browser that uses the given browser stylesheet?

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.n et <http://steve.pugh.net/>

**Diogenes** · Feb 26 '07, 11:55 AM

Re: HTML form design tip - font size of text input elements - IE7vs Firefox

Steve Pugh wrote:

Diogenes <nospam@nospam. netwrote:
>

>>Jukka K. Korpela wrote:
>>

>>>Scripsit Diogenes:
>>>
>>>
>>>>Instead of using ....
>>>>
>>>>INPUT { font-size: 100% }
>>>>
>>>>I'd be inclined use ... well nothing at all, which,
>>>>I think, is equivalent to your suggestion.
>>>
>>>It isn't equivalent at all. You need to learn some CSS before you can
>>>understand this. Briefly, browsers may have all kinds of settings in
>>>their browser style sheets, and IE has such settings for input elements,
>>>among other things.
>>>

>>
>>Maybe I'm unclear on the concept, but isn't *font-size:100%*
>>like saying use the same font-size as before? Kind of
>>like mutiplying a number by 1 and calling it a days work?

>
>
Consider a browser style sheet
input {font-size: 11pt;}
>
Now consider two author stylesheets:
form {font-size: 24pt;}
>
and
form {font-size: 24pt;}
input {font-size: 100%;}
>
What will be displayed for those two different author stylesheets in
the browser that uses the given browser stylesheet?
>
Steve

Ah, I stand corrected. The possibility had not occurred to
me for two reasons.

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.

2) INPUT { font-size: 100% } (or any value) did absolutely
nothing in IE, at least not in the context I was in (quirks
mode). In FF, it did exactly as I expected,: nothing,
because the browser style sheet and inheritance model works
as I would expect.

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.

This worked as long as you were in standards mode.

I'm still trying to figure out a best practice here. When I
set out building a web page, I usually set the BODY element
to { font-size: 10pt; font-family: sans-serif } because its
economical in size but still easy to read, even for old guys
like me.

I want the page and the form content to be consistent in
appearance. FF handled this quite nicely - I didn't need to
use any special CSS rules.

It was the problems I was having with IE that prompted me to
start trying things like:

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

2) IE6 honoured the INPUT { font-size: xx% } CSS selectors,
but does not recognize the INPUT[type="text"} selectors.

3) IE7 recognizes both types of selectors but only in
standards mode.

4) The form of the Document declaration is important to
avoid triggering *Quirks Mode*.

So, to create a form that looks as similar as possible
across as many browsers as possible:

Should I even care about IE5?

Do I NEED to use the INPUT { font-size: 100% } rule
suggested by Mr. Korpela for the benefit of IE6 users?

Thanks to all that have posted so far and especially to you
Steve.

Cheers
Jim

HTML form design tip - font size of text input elements - IE7 vsFirefox

HTML form design tip - font size of text input elements - IE7 vsFirefox

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment