Participant

Answered

HELP: Header/Footer Not Aligning with Border

Forum|Forum|7 years ago
March 21, 2018
4 replies
884 views

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!

This topic has been closed for replies.

Correct answer Nancy OShea

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 OShea

Community Expert

Headers and footers are block level elements.

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

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

Nancy O'Shea— Product User & Community Expert

Jon Fritz

Community Expert

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.

WolfShade

Legend

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,

^ _ ^

kristinf14330031Author

Participant

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>

Nancy OShea

Correct answer

Community Expert

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded