CODEWITHSUNDEEP
htmlcssinternet-explorer-7html-emailoutlook-2003
Timothy Adams
Timothy Adams

Reputation: 211

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

The setting:

The guest list:

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 &reg; but also tried &#174;. 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 † (&dagger;) and ‡(&Dagger;) but it didn't change anything.

For visual pleasure

enter image description here

The above screenshot was taken in Outlook 2003.

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

Upvotes: 2

Views: 1564

Answers (3)

Reginasan
Reginasan

Reputation: 1

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.

Upvotes: 0

John
John

Reputation: 12193

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.

Upvotes: 1

Matt Whitehead
Matt Whitehead

Reputation: 1811

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>

Upvotes: 0

Related Questions