 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / February 2007HTML form design tip - font size of text input elements - IE7 vs Firefox
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/event.php?page=0d94c81bc43bb777200ee29ce4f5ace9 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"> <!-- BODY { font-family: sans-serif; font-size: 10pt } FIELDSET { padding: 4px; margin: 8px; } LABEL { float: left; clear: none; margin-right: 8px; } LABEL { font-size: 80%; font-style: italic; } LEGEND { font-weight: 700; font-style: italic } INPUT[type="text"] { font-size: 11pt } .lside { float: left; clear: left; width: 50%; } .rside { float: left; clear: right; width: 50%; } .title1 { font-size:150%; font-style:italic; padding-right:8px } .title2 { font-size:110%; font-style:italic; padding-right:8px } .tstmp { font-style: italic; line-height: 1.5em; padding-right:8px } .glabel { margin-left: 3ex } .glabel LABEL { font-size: 90%; font-style: italic; text-indent: -3ex; } .glabel { white-space: normal } /* stupid microsoft fixes */ * html .glabel { margin-left: 0 } * html .glabel LABEL { text-indent: 0 } #dbtn { display: none } .sbtn { float: right } #ctrl { display: none } #newPrice { clear: both; padding-top: 1ex; } --> </style> </head> <body> <form class="dj" id="booking" action="event.php" method="post" onsubmit="return validate()"> <fieldset><legend>Event Information</legend> <div> <!-- needed for IE --> <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> <!-- end of lside 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">Refresh</a> </div> <!-- end of rside 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="david.emerson.black@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> <!-- <input type="text" name="stime" size="6" value="20:00"/> --> </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> <!-- <input type="text" name="etime" size="6" value="01:00"/> --> </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()"> <!-- <input name="earlySetupTime" type="text" value="20:00" size="6" maxlength="6" /> --> <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> </div> </div> </fieldset> </div> <!-- end of lside div --> <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> <!-- end of rside div --> </div> <br style="clear:both" /> <input type="submit" id="dbtn" /> </fieldset> </form> </body> </html> >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  Signature"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.net> <http://steve.pugh.net/> >>The following CSS rule works in FireFox but not in IE7 >> [quoted text clipped - 6 lines] > 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 [quoted text clipped - 11 lines] > > Steve Thanks again, Jim 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. SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ > 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 > > 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 [quoted text clipped - 33 lines] > > -Jim Even disregarding win98 I doubt that IE7 has even hit a tenth of the IE users out there. > 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-friendly-resources/css/internet-explorer-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 >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 Signature"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.net> <http://steve.pugh.net/> 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. SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ > Scripsit Diogenes: > [quoted text clipped - 9 lines] > 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 >> Scripsit Diogenes: >> [quoted text clipped - 13 lines] >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 Signature"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.net> <http://steve.pugh.net/> >>>Scripsit Diogenes: >>> [quoted text clipped - 28 lines] > > 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 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. SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ > Scripsit Diogenes: > [quoted text clipped - 4 lines] > 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 [quoted text clipped - 4 lines] > 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 [quoted text clipped - 4 lines] > 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 [quoted text clipped - 16 lines] > > 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 [quoted text clipped - 4 lines] > > 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/Comparison_of_layout_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. [quoted text clipped - 5 lines] > > Yes. OMG - now you're agreeing with me! This is going badly indeed. > But after these mostly correct conclusions you jump into somthing > pointless: [quoted text clipped - 5 lines] > 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 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. SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ >> 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. Signature"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/ >>>The following CSS rule works in FireFox but not in IE7 >>> [quoted text clipped - 16 lines] >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. [quoted text clipped - 3 lines] >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 Signature"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.net> <http://steve.pugh.net/> >> 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. Signaturejmm (hyphen) list (at) sohnen-moe (dot) com (Remove .AXSPAMGN for email) 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. SignatureMartin Clark |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.