On Jul 21, 2010, at 7:43 AM, David Hucklesby wrote: > > With all due respect, I suggest you are attempting to control the > uncontrollable far too finely. 0.9em is either one or two pixels smaller > than default, depending on the rounding applied by the browser. In other > words, you are already getting as much difference between browsers as > you are trying to apply.
This does not eliminate the inheritance issue I raised. Even if I use 15em in my example for span class, the problem still exist. I am not advocating not to use EM, and I am not advocating using Pixel only. I use EM 90% of the time, 10% of the time Pixel could be a far better approach for font size. Anybody who advocating the use of EM only and preach other do so (especially to those who are new to Pixel Vs EM or new to web design in general), IMO, should make people aware there are exception to the rule, that in some situations, EM may not be a better choice due to inheritance, and in some special case when consistency cannot be compromised (this is very common if the design is done by a pixel-obsessed designer). > obviously there's a little more work involved with ems (although it > didn't take me long to fix things), but you have to agree your example > is a little contrived. The example I showed, was not contrived. It's quite common for some complicated layouts which are template based, where content get pulled in based on how user uses the site or how the site owner does the configuration from backend. I cannot tell you which social networking site I partially coded (that has the similar markup as in my example) due to NDA even though I no longer work for that company, but if you are interested to find out what kind of template based sites have similar markup, and that it's very hard to change due to the upgradability issue and other issues related to budget or client wishes, go try out Magento, download a free theme, play with it, try change the messy markup in every phtml template to semantical markup, play with it even more for a couple update version, you may get a bit different perspective a year later. Now this is contrived and extreme case, likely you won't be doing this but inexperienced web designer may get into this if he/she is told to use EM only but was not told there are exception to the rule. > http://greensho.nexcess.net/em-vs-px/ie6.png http://greensho.nexcess.net/em-vs-px/ie7.png http://greensho.nexcess.net/em-vs-px/ie8.png http://greensho.nexcess.net/em-vs-px/ie9.png http://greensho.nexcess.net/em-vs-px/chrome.png http://greensho.nexcess.net/em-vs-px/safari.png This is a more realistic result for experienced web designer: http://greensho.nexcess.net/em-vs-px/fontsizes.png http://greensho.nexcess.net/em-vs-px/example1.png http://greensho.nexcess.net/em-vs-px/example2.png Yet with so many rules written, one still cannot get consistent font size within one paragraph #content div span, #content span {font-size: 1.125em} #content p span, #content li span, #content li div span {font-size: 0.75em} #content p span span, #content span span, #content span span span, #content li span span, #content li span span span, li div, #content li div p, #content li li div p, #content li li {font-size: 1em} In a case like this, shouldn't the 10% exception works better, more effective and productive (there is a different between "it doesn't take long to solve" and one that "takes less than a minute or less to write and get a consistent result across browsers")? #content-alt p, li {font-size: 24px} #content-alt span {font-size: 18px} The only issue I see using pixel that may cause problem is mobile devices, but we have media queries and handheld style sheet to take care of it don't we? Now that we are in the hype for CSS3 and the power of @font-face allows us to use many fancy fonts, this inheritance for font size using EM may complicate the issue a bit more. In example2 (I admit not a very good example to present the @font-face issue with font size inheritance one may run into as I have not used too many open type fonts yet, and Museo is the one I use most and is currently available in my server), you see that in IE6 and 7, where Lucida Sans is used because the two browsers have no support for @font-face , the differences are much bigger with Lucida Sans comparing the example1 where Arial is used. A more thorough web designer and one who has control over what font face can be used may get rid of Museo and Lucida Sans and serve Arial only for older IEs, yet this still does not solved the inheritance issue if a site requires consistent font size within a block of content, a paragraph where span tag is used and is wrapped inside other tags, or if a client insists on using a Lucida Sans or a typeface that result something similar to Lucida Sans. tee ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *******************************************************************
