0

I make HTML emails and I understand that different email clients and browsers have different rules that render code differently. One thing I have never been able to figure out though is why the following code is ignored:

<sup style="vertical-align:baseline; position:relative; bottom:5px;">1,2</sup>

This is what I've come up with through much trial and error as the best solution for not messing up line heights across different clients, especially pesky IE7. It works and looks fantastic in everything except GMail, in which it simply lies on the baseline and ignores the bottom:5px.

I've tried adding !important after each style, but still nothing.

I've tried making it a class as well, but again, the same result.

Any ideas why it's ignoring my code?

MaVRoSCy
  • 17,747
  • 15
  • 82
  • 125
Timothy Adams
  • 191
  • 1
  • 1
  • 16

2 Answers2

2

Gmail strips "interesting" CSS properties like position when displying emails in its web interface.
This is done to prevent the email from covering Gmail's UI.

Here is a list of supported properties.

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
  • Any idea on what I could use to replace it? The closet solution I've made was ``, but that makes everything too small in Outlook clients. – Timothy Adams Jul 25 '13 at 14:07
0

Many mail clients remove any tags or styling that could allow the message to escape its container and start messing with the mail interface itself.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176