Broken line spacing when using superscript (Yahoo/Hotmail Issue)

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • interr0bangr
    New Member
    • Sep 2010
    • 2
    #1

    Broken line spacing when using superscript (Yahoo/Hotmail Issue)

    Hey all,

    Does anyone have any tips when coding superscript for email newsletters? My client uses insane amounts of superscripted characters (usually to reference the legal fine print) and I've been having to resort to using images instead of just coding them with regular characters otherwise it will cause the line spacing to go crazy.

    My code works fine in AOL Mail and Gmail, but seems to be disregarded in Yahoo Mail and Hotmail (I assume because they're stripping out the CSS?)

    I have this in the <head>:
    Code:
    <style type="text/css">
sup {
vertical-align: baseline;
position: relative;
bottom: .33em; } 
</style>
    Along with this In the <body>:
    Code:
    <sup>&reg;</sup>
    I've also tried inline code, but that still doesn't work (and causes issues in Gmail to boot!):
    Code:
    <sup style="vertical-align: baseline; position: relative; bottom: .33em;">&reg;</sup>
    Any help would be greatly appreciated!

    Thanks.
    Tags: hotmail, line break, superscript, yahoo
    • JKing
      Recognized Expert Top Contributor
      • Jun 2007
      • 1206
      #2
      It is actually the opposite. Gmail is the one stripping out the CSS.

      None of them support position or bottom.

      For best practice when coding email newsletters you should always use inline styles and keep it basic.

      The way each client renders the <sup> tag may be a little different if they render it all but will likely be your best option.

      Alternatively if you absolutely must have superscripts you could use a table in a creative way to mimic a superscript.

      Something like this:
      Code:
      <table cellspacing="0" cellpadding="0" border="0">
	<tr>
		<td align="bottom">
			<p style="padding:0; margin:0;">10</p>
		</td>
		<td valign="top">
			<p style="padding:0; margin:0;font-size:10px;">th</p>
		</td>
	</tr>
</table>

        Comment

        • interr0bangr
          New Member
          • Sep 2010
          • 2
          #3
          Thanks JKing,

          I'm going to do more messing around with tables to see what I can do.

          Currently, I just append a small .gif of the superscripted characters to ensure proper spacing throughout. It just causes a bunch of concern when email recipients have images turned off by default.

          Is there a resource out there that outlines what each major email client can and cannot render?

          Thanks again!

            Comment

            • JKing
              Recognized Expert Top Contributor
              • Jun 2007
              • 1206
              #4
              Here is the best resource I have found.

              Guide To CSS Support

                Comment

                • geo4d
                  New Member
                  • Feb 2013
                  • 1
                  #5
                  Solved:

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

                    Comment

                    Previous template Next
                    Working...