DarkxPunk

Text Line I Can't Identify

5 posts in this topic

Hi there,

 

Okay so this will sound incredibly confusing, but lets give it a try.

 

I made an email signature a while back for a customer, it functioned correctly. However I wanted to optimize and improve it for better appearances on mobile. I rewrote it, brought it into Apple Mail, and everything seems to break it. Adding text, attachments, replying, etc. I couldn't figure out why my new signature was not functioning like the old. Then I noticed this on the old signature:

 

weird.png

The purple is a highlight of some sort of text line... But I can't figure out where it is coming from in the code.

 

On I went, rewriting the email signature line by line to re create this text line... I couldn't do it. I absolutely can't figure out where this is coming from, but I am convinced this line is why the old signature works and the new one does not. It is providing some sort of separation to the email signature that prevents other elements from causing it to break. I have tried simulating it, recreating it, no luck...

 

Ill attach the code, but if someone can find out what this is you will keep me from going insane.

 

(Note I thought it was the margins too, however in the rewrite it does not create this text line)

 

 

<style type="text/css" scoped>
@media only screen and (max-device-width: 414px) {
	table[class=wrap] {
		width: 230px !important;
	}
	table[class=separator] {
		border-right: 0 !important;
		border-bottom: 1px solid #dbdbdb !important;
	}
	td[class=spacer-top] {
		display: none !important;
	}
	td[class=spacer-bottom] {
		font-size: 10px !important;
	}
}
@media only screen and (max-width: 470px) {
	table[class=wrap] {
		width: 230px !important;
	}
	table[class=separator] {
		border-right: 0 !important;
		border-bottom: 1px solid #dbdbdb !important;
	}
	td[class=spacer-top] {
		display: none !important;
	}
	td[class=spacer-bottom] {
		font-size: 10px !important;
	}
}
</style>
<table class="wrap" border="0" cellspacing="0" cellpadding="0" style="margin: 0; padding: 0; border: 0; border-collapse: collapse; font-size: 0; text-align: left;">
	<tr>
		<td>
			<table border="0" cellspacing="0" cellpadding="0" valign="middle" style="margin: 5px; padding: 0; border: 0; border-collapse: collapse; width: 80px; height: 80px; font-size: 0; display: inline-block; vertical-align: middle; text-align: left; zoom: 1; *display: inline;">
				<tr>
					<td>
						<img src="" alt="" width="110" height="81" name="logo" alt="Logo"/>
					</td>
				</tr>
			</table>
			<table class="separator" border="0" cellspacing="0" cellpadding="0" valign="middle" style="margin: 5px; padding: 0; border: 0; border-right: 1px solid #dbdbdb; border-collapse: collapse; width: auto; height: auto; font-size: 0; display: inline-block; vertical-align: middle; text-align: left; zoom: 1; *display: inline;">
				<tr>
					<td colspan="2" style="padding: 0 10px 0 0; font-family: sans-serif; font-size: 13px; text-align: left; color: #616161">First Last</td>
				</tr>
				<tr>
					<td style="padding: 0 5px 0 0; font-family: sans-serif; font-size: 13px; text-align: left; color: #616161">Direct:</th>
					<td style="padding: 0 10px 0 0; font-family: sans-serif; font-size: 13px; text-align: left; color: #616161"><a style=" font-size: 13px; text-decoration: none; color: #616161" href="tel:1234567890">1234567890</a></td>
				</tr>
				<tr>
					<td style="padding: 0 5px 0 0; font-family: sans-serif; font-size: 13px; font-weight: normal; text-align: left; color: #616161">Fax:</th>
					<td style="padding: 0 10px 0 0; font-family: sans-serif; font-size: 13px; text-align: left; color: #616161"><a style=" font-size: 13px; text-decoration: none; color: #616161" href="tel:1234567890">1234567890</a></td>
				</tr>
				<tr>
					<td style="padding: 0 5px 0 0; font-family: sans-serif; font-size: 13px; text-align: left; color: #616161">Email:</th>
					<td style="padding: 0 10px 0 0; font-family: sans-serif; font-size: 13px; text-align: left; color: #616161"><a style=" font-size: 13px; text-decoration: none; color: #616161" href="mailto:abc@xyz.com">abc@xyz.com</a></td>
				</tr>

			</table>
			<table border="0" cellspacing="0" cellpadding="0" valign="middle" style="margin: 5px; padding: 0; border: 0; border-collapse: collapse; width: auto; height: auto; font-size: 0; display: inline-block; vertical-align: middle; text-align: left; zoom: 1; *display: inline;">
				<tr>
					<td style="font-family: sans-serif; font-size: 13px; text-align: left; color: #616161">Company Name</td>
				</tr>
				<tr>
					<td style="font-family: sans-serif; font-size: 13px; text-align: left; color: #616161"><a style=" font-size: 13px; text-decoration: none; color: #616161" href="">Line 1<br/>Line 2<br/>Line 3</a></td>
				</tr>
				<tr>
					<td style="font-family: sans-serif; font-size: 13px; text-align: left; color: #616161"><a style=" font-size: 13px; text-decoration: none; color: #616161" href="http://www.google.com/">www.google.com</a></td>
				</tr>
			</table>
		</td>
	</tr>
</table>

 

 

 

Thank you for all your help. If I spend another 6h on this like I have been I am going to go nuts...

Edited by DarkxPunk

Share this post


Link to post
Share on other sites

There is no CSS for a screen larger than 470 pixels if i see this correctly.

You are also working with inline css and obsolete table sub tags such as border="0" cellspacing="0" cellpadding="0".

 

CSS gets read like this:

Use inline CSS
Else
Use the css in the head
Else
Use the css in the linked file.

Maybe that is what is creating the conflict?

Share this post


Link to post
Share on other sites

I have played with the different styling methods just to be sure, I can't replicate. However this is an email signature so I need to keep everything inline and cover old styles for older email clients.

 

Thanks for the tips, if you have any further direction it's appreciate.

Share this post


Link to post
Share on other sites

Coding for emails is very different than coding for a website. You have to use old attributes and inline CSS to get it to render properly in email clients.

Share this post


Link to post
Share on other sites

So surprise surprise I finally figure it out on my own, and I am actually surprised at what it is.

 

So I kinda was wrong kinda was right about its not being the margins... It isn't the margins, but the margins cause it to appear... Its in fact cellpadding/padding...

 

Now logically this shouldn't make sense but welcome to ancient html logic. Even though I have cellpadding set to 0, by having padding on the TD it turns it back on... regardless where the padding is... Then the margins is extending the open area between the cells and thus this line appears... And this line causes content to break below it if you try to place text beside it. It is messed up and makes no sense, but it works!

 

Now since I have this understanding I decided to redesign it and post my optimized version here, open for any suggestions:

 

 

<style type="text/css" scoped>
	@media only screen and (max-width: 500px) {
		table {
			display: table !important;
			padding: 0 !important;
			padding-top: 10px !important;
			padding-bottom: 10px !important;
		}
		table table {
			padding: 0 !important;
			padding-top: 5px !important;
			padding-bottom: 5px !important;
		}
		table[class=logo] {
			padding: 0 !important;
			padding-bottom: 5px !important;
		}
		table[class=spacer] {
			padding: 0 !important;
			border: 0 !important;
			border-top: 1px solid #dbdbdb !important;
			width: 57px !important;
			height: 1px !important;
		}
	}
</style>
<table border="0" width="100%" align="center" cellpadding="0" cellspacing="0" style="margin: 0;border: 0;padding: 0;padding-top: 10px;padding-right: 1px;padding-bottom:10px;width: 100%;height: auto;display: inline-table;vertical-align: middle;white-space: nowrap;">
	<tbody align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;">
		<tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;">
			<td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;padding-top: 1px;padding-right: 1px;padding-bottom: 1px;width: auto;height: auto;vertical-align: middle;white-space: nowrap;">
				<table class="logo" border="0" width="auto" align="center" cellpadding="0" cellspacing="0" style="margin: 0;border: 0;padding: 0;padding-right: 5px;width: auto;height: auto;display: inline-table;vertical-align: middle;white-space: nowrap;">
					<tbody align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;">
						<tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;">
							<td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;width: 110px;height: 81px;vertical-align: middle;white-space: nowrap;">
								<img src="" name="Company" alt="Company Logo" width="110" height="81" style="margin: 0;border: 0;padding: 0;width: 110px;height: 81px;vertical-align: middle;white-space: nowrap;" />
							</td>
						</tr>
					</tbody>
				</table>
				<table border="0" width="auto" align="center" cellpadding="0" cellspacing="0" style="margin: 0;border: 0;padding: 0;padding-left: 5px;padding-right: 5px;width: auto;height: auto;display: inline-table;vertical-align: middle;white-space: nowrap;">
					<tbody align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;">
						<tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;">
							<td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;text-align: left;vertical-align: middle;white-space: nowrap;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">
								First Name Last Name Title
							</td>
						</tr>
						<tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;">
							<td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;text-align: left;vertical-align: middle;white-space: nowrap;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">
								<span style="margin: 0;padding: 0;padding-right: 1px;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">Direct:</span>
								<a href="tel:1234567890" style="margin: 0;padding: 0;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">(123) 456-7890</a>
							</td>
						</tr>
						<tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;">
							<td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;text-align: left;vertical-align: middle;white-space: nowrap;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">
								<span style="margin: 0;padding: 0;padding-right: 13px;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">Cell:</span>
								<a href="tel:1234567890" style="margin: 0;padding: 0;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">(123) 456-7890</a>
							</td>
						</tr>
						<tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;">
							<td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;text-align: left;vertical-align: middle;white-space: nowrap;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">
								<span style="margin: 0;padding: 0;padding-right: 14px;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">Fax:</span>
								<a href="tel:1234567890" style="margin: 0;padding: 0;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">(123) 456-7890</a>
							</td>
						</tr>
						<tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;">
							<td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;text-align: left;vertical-align: middle;white-space: nowrap;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">
								<span style="margin: 0;padding: 0;padding-right: 3px;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">Email:</span>
								<a href="mailto:abc@xyz.com" style="margin: 0;padding: 0;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">abc@xyz.com</a>
							</td>
						</tr>
					</tbody>
				</table>
				<table class="spacer" border="0" width="auto" align="center" cellpadding="0" cellspacing="0" style="margin: 0;border: 0;border-right: 1px solid #dbdbdb;padding: 0;width: 1px;height: 57px;display: inline-table;vertical-align: middle;white-space: nowrap;">
					<tbody align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;">
						<tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;">
							<td style="margin: 0;border: 0;padding: 0;width: 0;height: 0;" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;text-align: left;vertical-align: middle;white-space: nowrap;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">
							</td>
						</tr>
					</tbody>
				</table>
				<table border="0" width="auto" align="center" cellpadding="0" cellspacing="0" style="margin: 0;border: 0;padding: 0;padding-left: 5px;padding-right: 5px;width: auto;height: auto;display: inline-table;vertical-align: middle;white-space: nowrap;">
					<tbody align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;">
						<tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;">
							<td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;text-align: left;vertical-align: middle;white-space: nowrap;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">
								Company Name
							</td>
						</tr>
						<tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;">
							<td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;text-align: left;vertical-align: middle;white-space: nowrap;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">
								<a href="" style="margin: 0;padding: 0;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">Address Line 1</a>
							</td>
						</tr>
						<tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;">
							<td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;text-align: left;vertical-align: middle;white-space: nowrap;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">
								<a href="" style="margin: 0;padding: 0;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">Address Line 2</a>
							</td>
						</tr>
						<tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;">
							<td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;text-align: left;vertical-align: middle;white-space: nowrap;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">
								<a href="" style="margin: 0;padding: 0;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">Address Line 3</a>
							</td>
						</tr>
						<tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;">
							<td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;text-align: left;vertical-align: middle;white-space: nowrap;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">
								<a href="http://www.xyz.com/" style="margin: 0;padding: 0;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">www.xyz.com</a>
							</td>
						</tr>
					</tbody>
				</table>
			</td>
		</tr>
	</tbody>
</table> 

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now