CSS em font size vs. px

I'm trying to clean up some bad habits (bad habits according to things i've read) concerning HTML coding with CSS.  One of the things I've always used to define my font size in my css was the "px."  However, I've been reading things that suggest that "em" is a better measurment tool due to screen resolution changes and all that.

So I'm editing in Dreamweaver and setting the font size for my navigation menu in CSS.  I've learned that the base font size for most browsers is 16px.  So if I want the font to appear roughly at 12px for most browsers, i would do "font-size:.85em;" or something like that.

The problem is, Dreamweaver (and FireFox) is displaying this font much smaller than I would like.  So I changed the font size to:  font-size:1.1em.  (this looks perfect and fits horizontally in my layout's navigation bar.  However, when i preview in Internet Explorer, the font is much bigger - which makes sense if the base font for I.E. is 16px...

So here I am trying to use em for my font measurment and I can't get the same look across 2 browsers for something as simple as the navigation.

Any ideas on how I can clear this up?  My goal is to have the navigation font size the equivalent of  around 12px - maybe slightly larger.  And I'd like to avoid using px if possible.

Any help would be greatly appreciated!