We all know that the elastic layout "em" value for a given object is relative to the object's parent, e.g.:
<div id="div1" style="font-size:1em;">
<p>Hello</p>
<div id="div2" style="font-size:0.5em;">
<p>Hello</p>
<div id="div3" style="font-size:0.5em;">
<p>Hello</p>
</div>
</div>
</div>
But is it possible to make a subordinate DIV "reset" it's em value, or get its value from a parent higher up the chain?
Basically, I have some nested DIVs, and I want one of the inner ones to use the document's own em value. Using 1em is no good, as one of the DIV's parents already uses a fractional value.
Thanks in advance
Simon
Update: Since this answer was originally written, a new unit has been added to CSS.
rem is the root em and is:
Equal to the computed value of font-size on the root element.
This is "the document's own em value".
No, it isn't. font-sizes set with the em unit are explicitly relative to the parent element's font-size.
The closest you can come is to know all the changes and account for that when calculating.
e.g. since the #div2 has a font-size of 0.5em, to make #div3 have the same font-size as #div1 you would need to set font-size: 2em
Other lengths (with as width values) are relative to the current element's font-size, and you would have to make similar calculations for those.