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.

[KTBleeding]

Try this:

.testmarkup {
	color: #FFF;
	font-weight: bold;
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
}

EDIT:

I think I just noticed where your main problem is..

When you were doing the spans, you had the font set to 10px.. when you put it in the style it was set for 10pt.

Perhaps just changing that back to 10px is the answer to the problem.

Huzzah! Thank you man!

I really am senile after all.

[KTBleeding]

No problem.

CSS is my baby.. I love her..
I'm currently developing an entire CSS / table-less (except for tabular data) skin for my future site.. Very exciting.. if you're a nerd like me.

I know the feeling, I'm excited about it too.

I long for the day when there's a completely table-less, 100% CSS vBulletin release.