When utilizing YUI's CSS system, font-sizes are defined in percentages instead of pixels to ensure a consistent font size across different browsers.
However, if you have elements with specified font sizes, any nested elements with font sizes set will be affected. For example:
<div style='font-size: 108%'>
<p>This text should be 14px.<p>
<div style='font-size: 167%'>
<p>This should be 22px but due to nesting, it ends up being 23.38px</p>
<p>Other content not displaying as expected</p>
</div>
</div>
In the above example, assigning font-size's to the <p> elements resolves the issue, though doing so for each element can be tedious.
I was curious to know if there was a simpler solution. The current setup breaks when wrapping font-size-styled elements within others. What if you want all text on the page to have a base size of 12px instead of the default 13px in YUI? Adjusting this one parameter affects all percentage values. You would then need to individually style numerous elements with the new base size.