CSS Madness - Help sought

I present you guys three images:

First, my navbar:



The font in question is the one I'm using for my navigation links. (Site Features, etc). I'm using the following plain old HTML for them:

<font size="1px" color="#FFFFFF"><b>Site Policy</b></font>

Now, as I do my best to be a good, compliant fellow, I'm trying to move more towards CSS classes so that Mac Users, Firefox Users and AnyBrowserOtherThanIE Users all see my site the same, glorious way.

So, in my handy HTML editor, I produce the following:

<span style="color:white;font:bold 10px verdana">Site Policy</span>

Which looks exactly like the picture above.

Editor:


Result: Yay!


"Gravy", I think, I'll just add some CSS and use span classes.

So I toss this into the Main CSS:

.testmarkup
{
color: #ffffff;
font: bold 10pt verdana;
Text-Decoration: none;
}

Assign it to my admin navbar link that nobody sees but me using:

<span class="testmarkup">Unused</span>

And, no sooner than I can say "Why, damn you, why!!", I get the following:



Thus my problem. Before I concede the point that I'll be 30 in less than 4 months and could be going senile before my time.. What am I missing here?

Much thanks to any insight offered.