For many of us designing fluid layouts, which are generally based in “em”s (pronounced like the letter M) you end up not really knowing how many pixels an “em” is while you are deep in the DOM tree. This is especially confusing if you increase/decrease text size with your browser.
Old, busted way that supports Safari 2:
New hotness (from David Baron’s suggestion on StackOverflow):
Explanation and Usage
You can easily use this function by calling:
from your navigation bar or Firebug console or of course within a loop traversing your entire DOM tree (watch out for those text nodes though!).
You could improve this by using a loop as I said earlier and print out a nice DOM tree with pixel values.
I know that there are some improvements to be made here so I wanna see some in the comments! What other ways do you keep track of your “em”s in a fluid layout?