Why are HTML entities ignoring my span code in Outlook 2003 and IE7

Question

The setting:

• HTML emails

The guest list:

• Outlook 2000 (desktop client)
• Outlook 2003 (desktop client)
• Outlook 2007 (desktop client)
• Outlook 2010 (desktop client)
• Outlook (Firefox, Chrome, Explorer)
• Gmail (Firefox, Chrome, Explorer)
• Yahoo (Firefox, Chrome, Explorer)
• Internet Explorer 7 browser (FML)

My code:

<span style="font-size:85%;line-height:0;vertical-align:3px;">&reg;</span>

I can't use any sort of <sup> tag because it doesn't render consistently despite any styling I could add.

The question:

Why is Outlook 2003 and IE7 adding extra line space above my code only on HTML entities?

What I know so far:

I can throw numbers and words in between my span tags and it's all good everywhere. Same size, same positioning, same line height. I tried switching switching to decimal entities but the results remained the same. For example, for ® I use ® but also tried ®. I even said "to hell with proper coding practices" and put a ® symbol straight in my HTML code. Nothin'!

So then I thought maybe it had something to do with those entities being round (I mean I dunno, I'm trying everything) so I swapped in † (†) and ‡(‡) but it didn't change anything.

For visual pleasure

The above screenshot was taken in Outlook 2003.

(Note: some words have been changed for privacy reasons)

Answer 1

The code below has always rendered properly for me in your list of clients. Maybe try using px instead of percent in the font-size.

<sup style="font-size:10px; line-height:0; vertical-align:3px;">&reg;</sup>

Answer 2

You can play with the font-size and line-height of <sup> elements by adding style inline to the <sup> tag. Another CSS property that can help is baseline-shift

Personally I gave up on trying to get consistent results from <sup> in Outlook and other email clients, as some respect one CSS element while others do not.

The most consistent result I got (where the whole line height wasn't effected) was by creating a small image, avoiding using superscript characters all together.

Answer 3

If you use span tag instead of sup tag (and give it all the parameters you have above, including font-size and vertical-align, which is the only thing that sup would normally do outside of OUTLOOK's messed up little world), this should keep results in other email clients and OUTLOOK looking more similar.