CODEWITHSUNDEEP
htmlcsshtml-email
user5377020
user5377020

Reputation:

Want text element to align at the top of cell

What I'm trying to do is make the red arrows align with the text on the right in the "In this issue, you can:" section of http://jsfiddle.net/me42hfkw/. In other words, I want the ›s of rows like

                                    <td valign="top" style="font-family:Helvetica,Arial;padding-right:10px;padding-bottom:20px;">
                                        <p valign="top" style="color:#FF0000;font-size:36px;font-weight:bold;margin-top:0;">&rsaquo;</p>
                                    </td>
                                    <td valign="top" style="font-family:Helvetica,Arial;padding-bottom:20px;">
                                        <p style="color:#666666;line-height:18px;margin-top:0;">Learn about the IT and business trends driving walk-up service centers.</p>
                                    </td>
                                </tr>

to be aligned at the top of their cell. I can't figure out why it's not working; for I was able to make it work on http://jsfiddle.net/qprc69z1/. What am I missing?

This is for an HTML email, by the way, so that I need to use as primitive of styles as possible.

Upvotes: 1

Views: 43

Answers (1)

Samuel Cook
Samuel Cook

Reputation: 16828

http://jsfiddle.net/me42hfkw/1/

You can decrease the line height of your p tag to adjust the position of the text. With a font-size as large as you're using there is a lot of white space to account for. Decreasing the line height will eliminate that white space.

The difference between the fiddle's you provided is that the one didn't have a p tag it was inside of a td which "plays" a little better when using vertical align.

Upvotes: 1

Related Questions