On Tue, Jul 20, 2010 at 11:58 PM, tee <[email protected]> wrote:
>
> On Jul 20, 2010, at 7:10 PM, Mathew Robertson wrote:
>
> On 21 July 2010 11:52, tee <[email protected]> wrote:
>>
>> EM can fail miserably in below senario for IEs for p, li and span tags due
>> to inheritance making them very tiny and unable to get consistence font size
>> for one block of content in different browsers not just the IE.
>>
>> body {font-size: 100.1%}
>> p, li {font-size: 0.95em}
>> span {font-size: 0.9em}
>>
> [snipped]
> As a general rule, you shouldn't be putting any font-size in tags, as that
> will frequently suffer inheritance problems. This general-rule applies to
> most attributes on most tags. The one example where this may not apply, is
> when defining a reset.
>
> That was just a quick example to illustrate the problem using EM unit when a
> layout has a span (class) 3 level deep or a li 2 level deep. It doesn't
> matter whether the font size is declare in a type selector or a class. The
> general rule that you may stick with, will still fail miserably.
> Let me make an example and partially answer Scott's question.
> In a eCommerce site, price is showed everywhere in a page, and pricing info
> are stored in one template, we have regular price show in the product
> listing, in cart report, in best selling product block, in recently view
> product block, in checkout, in invoice, in quick report etc etc; then we
> also have "as low as" together with "regular price", "suggested price" vs
> "our price", or "from x price" to "y price". The price maybe wrapped in a p,
> a div, a li, a td, a dd tag, and it can be 2, 3 or 4 level deep of other
> tags, with so many variations and no matter where the pricing will be
> showed, the font size of the pricing must be consistent with the rest of the
> content where the block is, or it maybe that all pricing, no matter where
> they get shows up, have to be the same font size. Under these condition,
> whether I have
> span {font-size:0.9em}
> or
> .price {font-size:0.9em}
> make no differences as far as how it fails in some browsers.
>
> If {font-size:0.9em} change to "{font-size:12px}", I will be getting
> consistent font-size if it needs to be exact the same font size no matter
> where it shows up.
> Using the same pixel unit, with extra rule, I can also get the pricing
> info's font-size be consistent with the rest of text in the same block of
> content.
> Using EM, all I get is headache and madness to try to make something show up
> consistently in the same block of content within the same browser -- this
> was the reason the programmer changed my code back. He needed something be
> absolute consistent, and a chunk of code that can be inserted in any part of
> the content.
> tee
A lot of whether or not you use EMs vs Pixels is going to depend a lot
on what the structure of your content looks like and how well you know
what that the structure is going to be consistent. Even with your
example I was able to get the EMs and Pixel versions to look exactly
the same (using Chrome, IE may need some minor tweeks but it should
look "okay" there too).
Pixel code:
<style>
p, li {font-size: 24px}
span {font-size: 18px}
</style>
<p><span><span>xxx<span><span></p>
<div><span><span><span>xxx</span><span><span></div>
<ul>
<li><span>some text
some more texts depend on situation <span>
<span>extra more texts depend on above situation
</span><span><span><li>
<li> <div> <span>xxx</span></div></li>
<li>
<ul><li><div> <p>some text
<span>some more texts
<span>extra more texts depend on above situation </span>
</span>
<p></div></li><ul>
</li>
</ul>
Ems code:
<style>
body {font-size: 100%}
p, li {font-size: 1.5em}
div span, span {font-size: 1.125em}
p span, li span, li div span {font-size: 0.75em}
p span span, span span, span span span, li span span, li span span
span, li div, li div p, li li div p, li li {font-size: 1em}
</style>
<p><span><span>xxx<span><span></p>
<div><span><span><span>xxx</span><span><span></div>
<ul>
<li><span>some text
some more texts depend on situation <span>
<span>extra more texts depend on above situation
</span><span><span><li>
<li> <div> <span>xxx</span></div></li>
<li>
<ul><li><div> <p>some text
<span>some more texts
<span>extra more texts depend on above situation </span>
</span>
<p></div></li><ul>
</li>
</ul>
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. If you're content looks this horrible then my
sympathies, because you're gonna have a heck of a time styling the
layout for any document that is this poorly structured let alone
figuring out the typography. It all just goes back to writing
semantically good content and utilizing web standards and you should
be able to use ems just fine.
--
------------------------------------------------------------------------------------
Jason Arnold
http://www.jasonarnold.net
------------------------------------------------------------------------------------
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
