HELP: Header/Footer Not Aligning with Border

Report · Mar 21, 2018

Hello!

I am having issues getting my header aligned with my border, see image. I've made sure the pixel widths are the same, but for some reason it's not working. I've checked all of the padding, margins, alignments and everything is set to "0" and centered. It is also happening with the footer. HELP!

Thank you!

Report · Mar 21, 2018

Could you provide your code so we can see if there is anything there that might cause this?

It's helpful if you use Advanced Editor and highlight the code, then use >> Syntax Highlighting to encapsulate your code to make it easier to read.

Like this.

..

This is syntax highlighted

V/r,

^ _ ^

Report · Mar 21, 2018

Will this work? I do not have Advanced Editor. As an FYI - this is for an email, not a website.

.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>2018 NCAA March Madness Bracket</title>

<!--

a:link {

color: #006098;

text-decoration: none;

}

a:visited {

text-decoration: none;

color: #184873;

}

a:hover {

text-decoration: underline;

color: #006098;

}

a:active {

text-decoration: none;

font-size: 12px;

color: #006098;

text-align: center;

}

.New {

text-align: center;

font-style: italic;

color: #5880a0;

font-size: 10px;

}

.new {

text-align: center;

font-style: normal;

position: fixed;

}

.New {

text-align: center;

}

.Footer {

text-align: justify;

}

.Subheader {

font-size: 14px;

}

.Footer1 { text-align: justify;

}

.Footer1 { text-align: justify;

}

.style446 {color: #003366; font-weight: bold; font-size: 14px; }

.style21 {

color: #4C6784;

font-size: 9px;

}

-->

</style></head>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tbody>

<tr>

<tbody>

<tr>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</div>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

<tbody>

<tr>

</table>

</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

<div align="center"><span style="color:#3d3d3d; font: 10px/16px 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Tahoma, sans-serif; padding:0; margin:0 0px 0px 0px;"><font face="arial Unicode, sans-serif">This email was sent by TM Capital Corp.<br>

641 Lexington Avenue, 30th Floor, New York, NY, 10022<br>

<a href="%%email_preference_center%%">Manage Subscription Preferences Here</a><br>

<a href="%%unsubscribe%%">Unsubscribe from all TM Capital Mailings Here</a></font></span></div>

</body>

</html>

Report · Mar 21, 2018

Below is a responsive email template.

<!doctype html>

<html>

<head>

<title>Responsive Email Template</title>

html, body {

margin: 0 !important;

padding: 0 !important;

height: 100% !important;

width: 100% !important;

}

* {

-ms-text-size-adjust: 100%;

-webkit-text-size-adjust: 100%;

}

.ExternalClass { width: 100%; }

div[style*="margin: 16px 0"] { margin: 0 !important; }

table, td {

mso-table-lspace: 0pt !important;

mso-table-rspace: 0pt !important;

}

table {

border-spacing: 0 !important;

border-collapse: collapse !important;

table-layout: fixed !important;

margin: 0 auto !important;

}

table table table { table-layout: auto; }

img { -ms-interpolation-mode: bicubic; }

.yshortcuts a { border-bottom: none !important; }

a[x-apple-data-detectors] { color: inherit !important; }

</style>

/* What it does: Hover styles for buttons */

.button-td, .button-a { transition: all 100ms ease-in; }

.button-td:hover, .button-a:hover {

background: #555555 !important;

border-color: #555555 !important;

}

/* Media Queries */

@media screen and (max-width: 600px) {

.email-container { width: 100% !important; }

.fluid, .fluid-centered {

max-width: 100% !important;

height: auto !important;

margin-left: auto !important;

margin-right: auto !important;

}

.fluid-centered {

margin-left: auto !important;

margin-right: auto !important;

}

.stack-column, .stack-column-center {

display: block !important;

width: 100% !important;

max-width: 100% !important;

direction: ltr !important;

}

.stack-column-center { text-align: center !important; }

.center-on-narrow {

text-align: center !important;

display: block !important;

margin-left: auto !important;

margin-right: auto !important;

float: none !important;

}

table.center-on-narrow { display: inline-block !important; }

}

</style>

</head>

<tr>

<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> (Optional) This text will appear in the inbox preview, but not the email body. </div>

<tr>

</tr>

</table>

<tr>

</tr>

<tr>

<td style="padding: 40px; text-align: center; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555;"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. <br>

<br>

<tr>

A Button

</a></td>

</tr>

</table>

</td>

</tr>

<tr>

<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:175px; background-position: center center !important;">

<v:fill type="tile" src="assets/Responsive/Image_600x230.png" color="#222222" />

<v:textbox inset="0,0,0,0">

<![endif]-->

<div>

<tr>

<td valign="middle" style="text-align: center; padding: 40px; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #ffffff;"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. </td>

</tr>

</table>

</div>

<!--[if gte mso 9]>

</v:textbox>

</v:rect>

<![endif]--></td>

</tr>

<tr>

<tr>

<tr>

</tr>

<tr>

<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </td>

</tr>

</table></td>

<tr>

</tr>

<tr>

<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </td>

</tr>

</table></td>

</tr>

</table></td>

</tr>

</table>

<tr>

<br>

Company Name<br>

<span class="mobile-link--footer">Adobe Systems Incorporated, 345 Park Avenue</span> <br>

<br>

<unsubscribe style="color:red; text-decoration:underline;">unsubscribe</unsubscribe></td>

</tr>

</table>

</center></td>

</tr>

</table>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 21, 2018

Could you please provide the code to your page?

The easiest way would be to post a link to your work in progress on a server you control in the forum so we could see it in our browsers.

A very distant second would be to post the entire html and css of the page in the forum itself. Don't use email for that though, it won't some through.

Report · Mar 21, 2018

Is this "border" coming from HTML, CSS or an image?

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 21, 2018

Headers and footers are block level elements.

Nancy O'Shea— Product User, Community Expert & Moderator

HELP: Header/Footer Not Aligning with Border

1 Correct answer

li.media.uploader-dialog.title