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

Diogenes

Hi All;

I, like others, have been frustrated with designing
forms that look and flow the same in both IE and Firefox.
They simply did not scale the same.

I have discovered, to my chagrin, that IE7 does not seem
to offer any way to control the font size of a text input
element.

Firefox properly inherits the font-size for the text input
from its container. In IE7, there seems to be only one
font-size available, that being 11pt.

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.

So now my design practice will be to the to set the
text input element font-size to 11pt. At least the input
element sizes will be much more similar in size between the
two browsers.

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.

Here is a web link to a CSS *fluid* form. With the
style rule mentioned above, the form looks and flows
pretty much the same in both browsers. Take that rule
out and compare the difference.

http://68.147.176.113/calgarydj/even...0ee29ce4f5ace9

Here is some of the HTML source from the same form to let
you cut, paste, and fool around.

================================================== =================

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

<html>
<head>
<title>Fluid form example</title>
<meta name="author" content="Jim Sontag" />
<meta name="description" content="sample fluid form using
CSS" />
<style type="text/css">

</style>
</head>
<body>

<form class="dj" id="booking" action="event.php"
method="post" onsubmit="return validate()">
<fieldset><legend>Event Information</legend>

<div 
<div class="lside">
<span class="title1">Dave Black</span><br / <span
class="title2">Tuesday, December 19, 2006 <br />8:00pm to
1:00am (5:00 hours)</span><br />
</div
<div class="rside" style="text-align:right">
<span class="title1">Our price : $700<br /></span>
<span class="tstmp">Last updated: Sat, Feb 24 -
3:13pm</span><br />

<a
href="/calgarydj/event.php?page=0d94c81bc43bb777200ee29ce4f5ace9">R efresh</a>
</div
<div id="newPrice"></div><br />
</div>
<fieldset id="ctrl" style="float:left;clear:left">
<legend>Control</legend>
<label>
type<br />
<input readonly type="hidden" name="type" size="6"
value="booking" />
</label>

<label>
idx<br />
<input readonly type="hidden" name="idx" size="1"
maxlength="4" value="-1" />
</label>

<label>
pkey<br />
<input readonly type="hidden" name="pkey" size="2"
maxlength="4" value="1" />
</label></fieldset>

<div id="jim">
<div class="lside" style="clear:both">
<fieldset><legend>Contact information</legend>

<div style="float:left;clear:none">
<label>Name<br />
<input type="text" name="name" size="32" maxlength="32"
value="Dave Black" />

</label>

<label style="clear:left">e-mail<br />
<input type="text" name="email" size="32" maxlength="40"
value="da*****************@www.calgarydj.ca" />
</label>
</div>

<div style="float:left;clear:none">
<label>Phone (primary)<br />

<input type="text" name="phone1" size="13" maxlength="13"
value="403 123-4567" />
</label>

<label style="clear:left">Phone (alternate)<br />
<input type="text" name="phone2" size="13" maxlength="13"
value="403 765-4321" />
</label>
</div>

<label>
Address<br />

<input type="text" name="addr1" size="32"
maxlength="32" value="123 Mockingbird Lane NW" /><br />
<input type="text" name="addr2" size="32"
maxlength="32" value="" />
</label>

<div style="float:none;clear:both">
<label style="clear:both">
City<br />
<input type="text" name="city" size="15" maxlength="20"
value="Calgary" />
</label>
<label>
Prov<br />
<input type="text" name="prov" size="4" maxlength="20"
value="AB" />
</label>

<label>
Postal Code<br />
<input type="text" name="postalCode" size="9"
maxlength="9" value="T2M 0X5" />
</label> 

</div>
</fieldset>

<fieldset>
<legend>Time & Place</legend>
<label>Venue name<br />
<input type="text" name="venue" size="30" maxlength="32"
value="" />
</label>

<label>
starting<br />
<select name="stime" onchange="pcalc()" <option
value="12:30">12:30</option>
<option value="13:00">1:00</option>
<option value="13:30">1:30</option>
<option value="14:00">2:00</option>

<option value="14:30">2:30</option>
<option value="15:00">3:00</option>
<option value="15:30">3:30</option>
<option value="16:00">4:00</option>
<option value="16:30">4:30</option>
<option value="17:00">5:00</option>

<option value="17:30">5:30</option>
<option value="18:00">6:00</option>
<option value="18:30">6:30</option>
<option value="19:00">7:00</option>
<option value="19:30">7:30</option>
<option selected value="20:00">8:00</option>

<option value="20:30">8:30</option>
<option value="21:00">9:00</option>
<option value="21:30">9:30</option>
<option value="22:00">10:00</option>
<option value="22:30">10:30</option>
<option value="23:00">11:00</option>

<option value="23:30">11:30</option>
<option value="00:00">12:00am</option>
<option value="00:30">12:30am</option>
<option value="01:00">1:00am</option>
<option value="01:30">1:30am</option>
<option value="02:00">2:00am</option>

</select>


</label>

<label>
ending<br />
<select name="etime" onchange="pcalc()" <option
value="12:30">12:30</option>
<option value="13:00">1:00</option>

<option value="13:30">1:30</option>
<option value="14:00">2:00</option>
<option value="14:30">2:30</option>
<option value="15:00">3:00</option>
<option value="15:30">3:30</option>
<option value="16:00">4:00</option>

<option value="16:30">4:30</option>
<option value="17:00">5:00</option>
<option value="17:30">5:30</option>
<option value="18:00">6:00</option>
<option value="18:30">6:30</option>
<option value="19:00">7:00</option>

<option value="19:30">7:30</option>
<option value="20:00">8:00</option>
<option value="20:30">8:30</option>
<option value="21:00">9:00</option>
<option value="21:30">9:30</option>
<option value="22:00">10:00</option>

<option value="22:30">10:30</option>
<option value="23:00">11:00</option>
<option value="23:30">11:30</option>
<option value="00:00">12:00am</option>
<option value="00:30">12:30am</option>
<option selected value="01:00">1:00am</option>

<option value="01:30">1:30am</option>
<option value="02:00">2:00am</option>
</select>

</label>

<label>Address<br />
<input type="text" name="street" size="30" maxlength="32"
value="123 mockingbird lane" />
</label>
<div class="glabel" style="clear:left">
<label style="margin-top:1ex">
<input type="checkbox" name="inTown" value="true"
onclick="pcalc()" />
Check here if the venue is outside of the city.
</label>

<label style="margin-top:6px;float:right">
If yes, distance from city limits?
<select name="travel" onchange="pcalc()">
<option value="20">0-20 km</option>

<option value="40">20-40km</option>
<option value="60">40-60km</option>
<option value="80">60-80km</option>
<option value="100">80-100km</option>
<option selected value="200">Over 100km</option>
</select>

</label>

<div style="clear:both;padding-top:6px">
<label>
<input type="checkbox" name="earlySetup"
value="true" onclick="pcalc()" />
Do you need us to set up earlier in the day?
(setup normally happens 1 hour before your requested
start time)
</label>

<label style="float:right">
If yes, early setup time
<select name="earlySetupTime" onchange="pcalc()">


<div class="rside">
<fieldset>
<legend>Dinner Music</legend>
<div class="glabel">
<label>
<input type="radio" name="dinnerMusic" value="recorded"
onclick="pcalc()" />Recorded music ($50/hr)
</label>

<br style="clear:both" />

<label>
<input checked type="radio" name="dinnerMusic"
value="guitar" onclick="pcalc()" />Live classical guitar
($150/hr)
</label>
<br style="clear:both" />

<label>
<input type="radio" name="dinnerMusic" value="piano"
onclick="pcalc()" />Live classical piano ($150/hr)
</label>
<br style="clear:both" />

<label>

<input type="radio" name="dinnerMusic" value="none"
onclick="pcalc()" />No dinner music
</label>
</div>
</fieldset>

<fieldset>
<legend>Sound Enhancement </legend>
Please select any of the following extras you are interested in
<div class="glabel">
<label>
<input checked type="checkbox" name="wireless"
value="true" onclick="pcalc()" />Wireless microphone ($50)
</label>

<br style="clear:both" />

<label>
<input checked type="checkbox" name="lights"
value="true" onclick="pcalc()" />Upgraded lighting system ($100)
</label>
<br style="clear:both" />

<label>
<input type="checkbox" name="bigSound" value="true"
onclick="pcalc()" />Upgraded sound system
-recommended for groups of <b>200 +</b($100)
</label>

<br style="clear:both" />

<label>
<input type="checkbox" name="senior" value="true"
onclick="pcalc()" />
Premium DJ -our most expereinced DJs ($50)
</label>
</div>
</fieldset>

<fieldset>
<legend>Notepad</legend>

<textarea rows="4" cols="28" name="notepad">hey
nee ner
nee ner ner
</textarea>
</fieldset>

</div 
</div>
<br style="clear:both" />
<input type="submit" id="dbtn" />
</fieldset>
</form>
</body>
</html>

Steve Pugh

Diogenes <no****@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 <st***@pugh.net <http://steve.pugh.net/>

Diogenes

Steve Pugh wrote:

Diogenes <no****@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

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

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

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

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

Diogenes <no****@nospam.netwrote:

>Steve Pugh wrote:
>Diogenes <no****@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?

http://hsivonen.iki.fi/doctype/
and
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 <st***@pugh.net <http://steve.pugh.net/>

Jukka K. Korpela

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

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

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:
http://www.webcredible.co.uk/user-fr...plorer-7.shtml

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

Diogenes <no****@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 <st***@pugh.net <http://steve.pugh.net/>

Diogenes

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

Diogenes <no****@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 <st***@pugh.net <http://steve.pugh.net/>

Diogenes

Steve Pugh wrote:

Diogenes <no****@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

Jukka K. Korpela

Scripsit Diogenes:

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

Actually, I think the explanation is rather that you didn't read good CSS
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.

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 "inheritance", so I'll skip it
here.

2) INPUT { font-size: 100% } (or any value) did absolutely
nothing in IE,

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.

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.

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.

I'm still trying to figure out a best practice here.

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.

When I
set out building a web page, I usually set the BODY element
to { font-size: 10pt; font-family: sans-serif }

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.

I want the page and the form content to be consistent in
appearance.

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.

INPUT[type="text"] { font-size: 10pt }

You're solving a wrong problem a wrong way.

We seemed to have established 4 things here

1) IE5 had a fixed font size, 11pt, for it text input elements

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.

2) IE6 honoured the INPUT { font-size: xx% } CSS selectors,

Yes, except that it's not a selector but a rule.

but does not recognize the INPUT[type="text"} selectors.

Yes, that's clear. And it's not really serious when you know it, since you
can use different types of selectors.

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

Indeed.

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

Yes.

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:

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.

Should I even care about IE5?

Not much as such, but it mostly comes as extra when test your pages on IE 7
in quirks mode.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Diogenes

Jukka K. Korpela wrote:

Scripsit Diogenes:

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

Actually, I think the explanation is rather that you didn't read good
CSS tutorials but made wild assumptions, conjectures, and guesses in
general.

Uh right, my bad.

>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.

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 "inheritance", so I'll skip
it here.

Thank-you Jukka, for saving us from the brain hurt that
would, no doubt, be inflicted on us lower level simians in
the event that you did attempt an explanation!

You are, indeed, destined for higher purpose - to routinely
point out where others are wrong, and to inspire them to
seek the truth by alleging their ignorance and making vague
allusions to better resources elsewhere, without ever
providing them yourself.

>2) INPUT { font-size: 100% } (or any value) did absolutely
nothing in IE,

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.

Wrong! It DID NOT work; not in the *quirks* mode context I
was in. Nice selective snipping there. You work for a tabloid?

>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.

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.

see previous comment...

A yes or no answer here, even without explanation, would
have been more useful.

>I'm still trying to figure out a best practice here.

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.

see previous comment...

>When I
set out building a web page, I usually set the BODY element
to { font-size: 10pt; font-family: sans-serif }

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.

>I want the page and the form content to be consistent in
appearance.

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.

>INPUT[type="text"] { font-size: 10pt }

You're solving a wrong problem a wrong way.

At the risk of being boring, see previous comment ...

>We seemed to have established 4 things here

1) IE5 had a fixed font size, 11pt, for it text input elements

Wrong. The size is 13px. With a normal resolution, this corresponds to
9.75pt.

You may be right.

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,

Yes, except that it's not a selector but a rule.

And if I ever write a book, you can be my editor! ;-)

>but does not recognize the INPUT[type="text"} selectors.

Yes, that's clear. And it's not really serious when you know it, since
you can use different types of selectors.

Actually, it's not all that clear.

I referenced the excellent wiki web page on CSS browser
compatibility:

http://en.wikipedia.org/wiki/Compari...t_engines_(CSS)

From this I knew that an element type selector like

INPUT [type="text"]

would work in IE7 but not in previous versions.

I now know, *thanks to you, Jukka*, that I can control the
font-size (and other attributes, I assume) across all INPUT
elements *in IE6* with a simple INPUT selector.

OMG - I believe I just thanked you!
(Editor - Can we cut this out after it's posted?)

I am also much more aware now of avoiding *quirks mode* in
IE. This is a very happy coincidence of my original post
because it was peripheral to my knowledge of CSS itself.

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

Indeed.

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

Yes.

OMG - now you're agreeing with me! This is going badly indeed.

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:

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.

Because I subscribe to the Bill Gates / Henry Ford blended
business model. You can use any browser you want as long as
its Microsoft. Life would be much easier if there was only
one kind of car, wouldn't it? We could call it a 'Jukka' if
you want.

And with that kind of economy of scale to your advantage,
everyone can have a Volkswagen for the price of a Rolls
Royce, uh wait... I meant that the other way around.

(Note to self - must get bigger brain fast! Getting things
mixed up again)

>Should I even care about IE5?

Not much as such, but it mostly comes as extra when test your pages on
IE 7 in quirks mode.

Thanks for the tip Jukka!

And, once again, thanks to all the others who posted.

I have a better handle now on a form design pattern that
should work for the biggest audience. This thread has been
very helpful to me. I think it will help others.

IE7 market penetration may be somewhat anecdotal here, but
hey, the numbers sure look interesting.

Newsgroups can be tough to deal with. No wonder most users
are lurkers. No need to mention the emotion and wasted time
attached to a flame war - so I won't ;-).

The solution to my problem was posted in a remarkable 17
minutes by Steve Pugh (thanks again Steve). That was the
first response!

And it just kept getting more interesting.

Cheers
Jim

Jukka K. Korpela

Scripsit Diogenes:

You are, indeed, destined for higher purpose - to routinely
point out where others are wrong, and to inspire them to
seek the truth by alleging their ignorance and making vague
allusions to better resources elsewhere, without ever
providing them yourself.

Thank you for your eloquent appraisal, but I am still far below the level of
Socrates, though not as much below Diogenes as you are, with your forged
identity behind which you make personal attacks in public, thereby
classifying yourself much below the simian level.

Consider yourself plonked. Thank you for letting me do this knowing that I
won't miss anything of value. It was a bit tough to try to find out whether
you had something to say in the midst of massive quoting and pointless
babbling.

And if I ever write a book, you can be my editor! ;-)

You wish. And I don't recommend that you try writing a book before first
reading one.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Felix Miata

On 2007/02/26 16:36 (GMT) Diogenes apparently typed:

Jukka K. Korpela wrote:

>Scripsit Diogenes:

>>1) IE5 had a fixed font size, 11pt, for it text input elements

>Wrong. The size is 13px. With a normal resolution, this corresponds to
9.75pt.

You may be right.

He's partially right. 13px does correspond mathematically to 9.75pt at the
windoz default 96 DPI. However, IE, as does all of windoz, works in pt, not
px. IE only uses px as it may be called upon by CSS to do so. So, on a page
using unstyled form controls, if it looks like 10pt, that would be because
10pt was specified by the system, and not 9.75pt. Reboot doze into 120 DPI,
and 9.75pt will no longer match 10pt in either FF or IE.

Not all browsers round the same, and not all operating system's font
subsystems round the same. Take a look at
http://mrmazda.no-ip.com/auth/Font/font-rounding.html and particularly its
bottom section of pt only on both IE and FF on windoz running at 96 DPI and
you should see a size match (if you don't have the same default font family
set on both you may not), but the upper sections will not exactly size
match. Compare again on FF between windoz and Linux at 96 DPI, and you'll
likely (depending on Linux version) see the top two sections size match, but
not the bottom one.
--
"If we claim to be without sin, we deceive ourselves and the
truth is not in us." 1 John 1:8 NIV

Team OS/2 ** Reg. Linux User #211409

Felix Miata *** http://mrmazda.no-ip.com/

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

This discussion thread is closed

Similar topics

Question stats

	Ask Question
Home Questions Articles Browse Topics Latest Top Members FAQ