Table Data

Apply the same rule to all the table tags also.

1 Like

that worked thank you.

how can I move the icon to stick to the top? if possible

Like this:

Hi,

Iā€™m not sure if this is what you mean but f you want content aligned to the top of a cell then you need to set vertical-align:top on the cell.

You should also collapse the borders on the table and set images to block to kill the gaps under those also.

e.g.

td{vertical-align:top}
table{border-collapse:collapse}
img{display:block}

Of course as this is for html email you need to apply those rules as inline styles on all the appropriate tags.

2 Likes

Ok did I add them the correct tags?

<table id="main-table" style="width:600px;border:none;border-collapse:collapse;">
	<tbody>
		<tr>
			<td style="border:none"><img alt="" id="header" src="https://www.tuneupfitness.com/sites/default/files/email_images/pose_notification_redesign_email_final_01.jpg" style="width: 600px;height: 285px;border-width: 0px;border-style: solid;padding-left:0px;padding-right:0px;" /></td>
		</tr>
		<tr>
			<td style="border:none">
			<table style="border:none;font-size:16px;border-collapse:collapse;">
				<tbody>
					<tr>
						<td style="border:none;vertical-align:top;"><img alt="icons" class="icon-sections" src="https://www.tuneupfitness.com/sites/default/files/email_images/pose_notification_redesign_email_final_02.jpg" style="width: 225px; height: 186px;display:block" /></td>
						<td style="border:none;">
						<p id="intro"><strong>Hi ~Contact.FirstName~,</strong><br />
						<br />
						Below is a direct link to the<br />
						YTU Pose of the Week video:<br />
						<br />
						<strong>Weekly Pose</strong>: %pose_name<br />
						<br />
						<strong>Therapeutic Benefits:</strong> %therapeutic_application</p>
						</td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
		<tr>
			<td style="border:none"><a href="https://tuneupfitness.stage.avatarnewyork.com/one-armed-plank?destination=user%23overlay%3Dadmin%2Fytu-settings%2Fdaily-management%2Fpose"><img src="%email_image" /></a></td>
		</tr>
		<tr>
			<td style="border:none;vertical-align:top;"><img alt="" src="https://tuneupfitness.stage.avatarnewyork.com/sites/default/files/email_images/pose_notification_redesign_email_final_06.jpg" style="width: 600px;display:block" /></td>
		</tr>
		<tr>
			<td style="border:none;"><img alt="" src="https://tuneupfitness.stage.avatarnewyork.com/sites/default/files/email_images/pose_notification_redesign_email_final_07.jpg" style="width: 600px;display:block" /></td>
		</tr>
		<tr>
			<td style="border:none;">
			<p id="outro" style="color:#788767; margin-left:35px;">Warmest,<br />
			Jill Miller<br />
			Creator, Yoga Tune UpĀ®</p>
			</td>
		</tr>
	</tbody>
</table>

You missed the display:block from the first image.:slight_smile:

<img alt="" id="header" src="https://www.tuneupfitness.com/sites/default/files/email_images/pose_notification_redesign_email_final_01.jpg" style="width: 600px;height: 285px;border-width: 0px;border-style: solid;padding-left:0px;padding-right:0px;display:block">

1 Like

I made the text bigger on the right side of this section
and I wanted to make the icon image on the left
smaller but then it created a gap above.

Iā€™d need to see your revised code but it looks as though you havenā€™t made the td vertical-align:top ?

1 Like

On my phone I sent a test email and it is off on Gmail,
but on my outlook it looks perfectly fine.

and desktop gmail looks off too

Desktop (Outlook)

Try setting a percentage width on both those cell that holds the image and the text. Then setting the image to width:100% and height:auto.

It looks as those those email clients have narrow widths.

Iā€™m afraid with html email there is no definite answer and you just have to keep trying and chopping and changing until you get close to what you want. You will never get all email clients to behave,

yeah, so Ive heardā€¦

So I have implemented the widths, but ill have to test it to see if it works

Update: It worked, but now I have my bottom image overflowing. Doesnā€™t make
sense because I have a hard width on the image:

The last image is the only one that you havenā€™t used the width attribute so I would test using the width attribute instead of the style attribute and see what happens?

1 Like

oh wow didnt see that

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.