Highlighted

Responsive email - when sized to mobile text drops over content below

Contributor ,
Oct 31, 2017

Copy link to clipboard

Copied

Hi,

I have an email template with a paragraph thats giving me issues. At first I tried to just add another paragraph below with it's own styling and for some reason the next paragraph jumps about 400px down the page.

So I added a <span instead of a <p and now I'm getting the overlap. Does anyone have any ideas?

Code and screenshot below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="icon" href="../../assets/img/icons/foundation-favicon.ico" type="image/x-icon">

<meta name="viewport" content="width=device-width">

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation-emails/2.2.1/foundation-emails.min.css" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=PT+Serif:400,700" rel="stylesheet">

<title>My Hero Template Email Template Subject</title>

</head>

<body>

<span class="preheader"></span>

<script>

      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i=i||function(){

      (i.q=i.q||[]).push(arguments)},i.l=1*new Date();a=s.createElement(o),

      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-2195009-2', 'auto');

      ga('send', 'pageview');

      ga('create', 'UA-2195009-27', 'auto', {name: "foundation"});

      ga('foundation.send', 'pageview');

      ga('create', 'UA-2195009-47', 'auto', {name: "foundation_emails"});

      ga('foundation_emails.send', 'pageview');

    </script>

<table class="body">

<tr>

<td align="center" class="center" valign="top">

<center data-parsed="">

  <table align="center" class="container float-center">

    <tbody>

<tr>

<td>

<table class="spacer">

<tbody>

<tr>

<td height="16px" style="font-size:16px;line-height:16px;background-color: #999999;"> </td>

</tr>

</tbody>

</table>

<table class="row" style="background-color: #999999">

<tbody>

<tr>

<th class="small-12 large-12 columns first last">

<table width="677">

<tr>

<th width="613" height="424">

<img style="margin-bottom: 15px;vertical-align:top"alt="" src="http://offers.premierinc.com/rs/381-NBB-525/images/Join-Premier.jpg">

<table width="743" class="callout" >

<tr>

<th class="callout-inner primary" style="background-color: #ffffff;border:0;">

<p style="background-color:#ffffff;;height:250px;padding:35px;text-align: center;font-family: 'PT Serif', serif;line-height: 1.2;font-size: 18px;letter-spacing: 2px;"><b>January 31st  – February 1st</b><br>

Premier Headquarters | Charlotte, NC.<br><br/><span style="font-size: 16px;">As a member of Premier, we value your perspective and  willingness to help provide strategic direction and tactical input  as we work toward our design and launch. Our goal is to design the most effective medical group collaborative in the market to support the quadruple aim, and more specifically, to address the areas that are of the greatest concern and benefit to you.</span>

<hr width="90%">

<center><a href="http://"

style="background-color:#0099cc;border-radius:0px;color:#ffffff;display:inline-block;font-family: 'PT Serif', serif;font-size:17px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:250px;-webkit-text-size-adjust:none;mso-hide:all;margin-top:10px;margin-bottom:10px;">RSVP BY November 30*</a><br><p style="text-align: center;font-size: 12px;font-family: 'PT Serif', serif;line-height: 1.4;">*Be sure to include contact information for your executive assistant <br> so we can complete your registration. Travel related expenses to be paid by Premier.

</p><hr width="90%"></p></center>

<p style="text-align: center;font-size: 14px;font-family: 'PT Serif', serif;line-height: 1.4;"><b>Questions regarding the Physician Enterprise Collaborative?</b><br>

Contact Kearin Schulte at 720.413. 0064.</p>

<p style="text-align: center;font-size: 14px;font-family: 'PT Serif', serif;line-height: 1.4;"><b>Event logistics and/or registration questions?</b> <br>

Contact Tiffany Randolph at 704.816.5696. </p><hr width="90%"></th>

<th class="expander"></th>

</tr>

</table>

<h2> </h2>

</th>

</tr>

</table>

</th>

</tr>

</tbody>

</table>

<center data-parsed="">

</center>

</td>

</tr>

</tbody>

</table>

</center>

</td>

</tr>

</table>

<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;">                                                             </div>

</body>

</html>

Screen Shot 2017-10-31 at 3.31.30 PM.png

Remove height: 250px from the paragraph inline styling:

<p style="background-color:#ffffff;;height:250px;padding:35px;text-align: center;font-family: 'PT Serif', serif;line-height: 1.2;font-size: 18px;letter-spacing: 2px;"><b>January 31st  – February 1st</b><br>

Premier Headquarters | Charlotte, NC.<br><br/><span style="font-size: 16px;">As a member of Premier, we value your perspective and  willingness to help provide strategic direction and tactical input  as we work toward our design and launch. Our goal is to design the most effective medical group collaborative in the market to support the quadruple aim, and more specifically, to address the areas that are of the greatest concern and benefit to you.</span></p>

Views

485

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Responsive email - when sized to mobile text drops over content below

Contributor ,
Oct 31, 2017

Copy link to clipboard

Copied

Hi,

I have an email template with a paragraph thats giving me issues. At first I tried to just add another paragraph below with it's own styling and for some reason the next paragraph jumps about 400px down the page.

So I added a <span instead of a <p and now I'm getting the overlap. Does anyone have any ideas?

Code and screenshot below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="icon" href="../../assets/img/icons/foundation-favicon.ico" type="image/x-icon">

<meta name="viewport" content="width=device-width">

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation-emails/2.2.1/foundation-emails.min.css" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=PT+Serif:400,700" rel="stylesheet">

<title>My Hero Template Email Template Subject</title>

</head>

<body>

<span class="preheader"></span>

<script>

      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i=i||function(){

      (i.q=i.q||[]).push(arguments)},i.l=1*new Date();a=s.createElement(o),

      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-2195009-2', 'auto');

      ga('send', 'pageview');

      ga('create', 'UA-2195009-27', 'auto', {name: "foundation"});

      ga('foundation.send', 'pageview');

      ga('create', 'UA-2195009-47', 'auto', {name: "foundation_emails"});

      ga('foundation_emails.send', 'pageview');

    </script>

<table class="body">

<tr>

<td align="center" class="center" valign="top">

<center data-parsed="">

  <table align="center" class="container float-center">

    <tbody>

<tr>

<td>

<table class="spacer">

<tbody>

<tr>

<td height="16px" style="font-size:16px;line-height:16px;background-color: #999999;"> </td>

</tr>

</tbody>

</table>

<table class="row" style="background-color: #999999">

<tbody>

<tr>

<th class="small-12 large-12 columns first last">

<table width="677">

<tr>

<th width="613" height="424">

<img style="margin-bottom: 15px;vertical-align:top"alt="" src="http://offers.premierinc.com/rs/381-NBB-525/images/Join-Premier.jpg">

<table width="743" class="callout" >

<tr>

<th class="callout-inner primary" style="background-color: #ffffff;border:0;">

<p style="background-color:#ffffff;;height:250px;padding:35px;text-align: center;font-family: 'PT Serif', serif;line-height: 1.2;font-size: 18px;letter-spacing: 2px;"><b>January 31st  – February 1st</b><br>

Premier Headquarters | Charlotte, NC.<br><br/><span style="font-size: 16px;">As a member of Premier, we value your perspective and  willingness to help provide strategic direction and tactical input  as we work toward our design and launch. Our goal is to design the most effective medical group collaborative in the market to support the quadruple aim, and more specifically, to address the areas that are of the greatest concern and benefit to you.</span>

<hr width="90%">

<center><a href="http://"

style="background-color:#0099cc;border-radius:0px;color:#ffffff;display:inline-block;font-family: 'PT Serif', serif;font-size:17px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:250px;-webkit-text-size-adjust:none;mso-hide:all;margin-top:10px;margin-bottom:10px;">RSVP BY November 30*</a><br><p style="text-align: center;font-size: 12px;font-family: 'PT Serif', serif;line-height: 1.4;">*Be sure to include contact information for your executive assistant <br> so we can complete your registration. Travel related expenses to be paid by Premier.

</p><hr width="90%"></p></center>

<p style="text-align: center;font-size: 14px;font-family: 'PT Serif', serif;line-height: 1.4;"><b>Questions regarding the Physician Enterprise Collaborative?</b><br>

Contact Kearin Schulte at 720.413. 0064.</p>

<p style="text-align: center;font-size: 14px;font-family: 'PT Serif', serif;line-height: 1.4;"><b>Event logistics and/or registration questions?</b> <br>

Contact Tiffany Randolph at 704.816.5696. </p><hr width="90%"></th>

<th class="expander"></th>

</tr>

</table>

<h2> </h2>

</th>

</tr>

</table>

</th>

</tr>

</tbody>

</table>

<center data-parsed="">

</center>

</td>

</tr>

</tbody>

</table>

</center>

</td>

</tr>

</table>

<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;">                                                             </div>

</body>

</html>

Screen Shot 2017-10-31 at 3.31.30 PM.png

Remove height: 250px from the paragraph inline styling:

<p style="background-color:#ffffff;;height:250px;padding:35px;text-align: center;font-family: 'PT Serif', serif;line-height: 1.2;font-size: 18px;letter-spacing: 2px;"><b>January 31st  – February 1st</b><br>

Premier Headquarters | Charlotte, NC.<br><br/><span style="font-size: 16px;">As a member of Premier, we value your perspective and  willingness to help provide strategic direction and tactical input  as we work toward our design and launch. Our goal is to design the most effective medical group collaborative in the market to support the quadruple aim, and more specifically, to address the areas that are of the greatest concern and benefit to you.</span></p>

Views

486

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 31, 2017 0
Adobe Community Professional ,
Oct 31, 2017

Copy link to clipboard

Copied

You must close your paragraph tags.  Unbalanced tags will cause overlaps.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 31, 2017 0
Contributor ,
Oct 31, 2017

Copy link to clipboard

Copied

It's closed and no luck: see red text.

Is there somehow I can just create a separate <p> instead of using the span and get it to work? Do I need to close the <th or <tr?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="icon" href="file:///assets/img/icons/foundation-favicon.ico" type="image/x-icon">

<meta name="viewport" content="width=device-width">

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation-emails/2.2.1/foundation-emails.min.css" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=PT+Serif:400,700" rel="stylesheet">

<title>My Hero Template Email Template Subject</title>

</head>

<body>

<span class="preheader"></span>

<script>

      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i=i||function(){

      (i.q=i.q||[]).push(arguments)},i.l=1*new Date();a=s.createElement(o),

      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-2195009-2', 'auto');

      ga('send', 'pageview');

      ga('create', 'UA-2195009-27', 'auto', {name: "foundation"});

      ga('foundation.send', 'pageview');

      ga('create', 'UA-2195009-47', 'auto', {name: "foundation_emails"});

      ga('foundation_emails.send', 'pageview');

    </script>

<table class="body">

<tr>

<td align="center" class="center" valign="top">

<center data-parsed="">

  <table align="center" class="container float-center">

    <tbody>

<tr>

<td>

<table class="spacer">

<tbody>

<tr>

<td height="16px" style="font-size:16px;line-height:16px;background-color: #999999;"> </td>

</tr>

</tbody>

</table>

<table class="row" style="background-color: #999999">

<tbody>

<tr>

<th height="940" class="small-12 large-12 columns first last">

<table width="677">

<tr>

<th width="613" height="424">

<img style="margin-bottom: 15px;vertical-align:top"alt="" src="http://offers.premierinc.com/rs/381-NBB-525/images/Join-Premier.jpg">

<table width="743" class="callout" >

<tr>

<th class="callout-inner primary" style="background-color: #ffffff;border:0;margin:">

<p style="background-color:#ffffff;;height:250px;padding:35px;text-align: center;font-family: 'PT Serif', serif;line-height: 1.2;font-size: 18px;letter-spacing: 2px;"><b>January 31st  – February 1st</b><br>

Premier Headquarters | Charlotte, NC.<br><br/><span style="font-size: 16px;">As a member of Premier, we value your perspective and  willingness to help provide strategic direction and tactical input  as we work toward our design and launch. Our goal is to design the most effective medical group collaborative in the market to support the quadruple aim, and more specifically, to address the areas that are of the greatest concern and benefit to you.</span></p>

<hr width="90%">

<center><a href="http://"

style="background-color:#0099cc;border-radius:0px;color:#ffffff;display:inline-block;font-family: 'PT Serif', serif;font-size:17px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:250px;-webkit-text-size-adjust:none;mso-hide:all;margin-top:10px;margin-bottom:10px;">RSVP BY November 30*</a><br><p style="text-align: center;font-size: 12px;font-family: 'PT Serif', serif;line-height: 1.4;">*Be sure to include contact information for your executive assistant <br> so we can complete your registration. Travel related expenses to be paid by Premier.

</p><hr width="90%"></p></center>

<p style="text-align: center;font-size: 14px;font-family: 'PT Serif', serif;line-height: 1.4;"><b>Questions regarding the Physician Enterprise Collaborative?</b><br>

Contact Kearin Schulte at 720.413. 0064.</p>

<p style="text-align: center;font-size: 14px;font-family: 'PT Serif', serif;line-height: 1.4;"><b>Event logistics and/or registration questions?</b> <br>

Contact Tiffany Randolph at 704.816.5696. </p><hr width="90%"><br><img style="vertical-align:top"alt="" src="http://offers.premierinc.com/rs/381-NBB-525/images/footer.jpg"></th>

<th class="expander"></th>

</tr>

</table>

<tbody>

<tr>

</tr>

</tbody>

</table>

</th>

</tr>

</table>

</th>

</tr>

</tbody>

</table>

<center data-parsed="">

</center>

</td>

</tr>

</tbody>

</table>

</center>

</td>

</tr>

</table>

<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;">                                                             </div>

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 31, 2017 0
LEGEND ,
Oct 31, 2017

Copy link to clipboard

Copied

Remove height: 250px from the paragraph inline styling:

<p style="background-color:#ffffff;;height:250px;padding:35px;text-align: center;font-family: 'PT Serif', serif;line-height: 1.2;font-size: 18px;letter-spacing: 2px;"><b>January 31st  – February 1st</b><br>

Premier Headquarters | Charlotte, NC.<br><br/><span style="font-size: 16px;">As a member of Premier, we value your perspective and  willingness to help provide strategic direction and tactical input  as we work toward our design and launch. Our goal is to design the most effective medical group collaborative in the market to support the quadruple aim, and more specifically, to address the areas that are of the greatest concern and benefit to you.</span></p>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 31, 2017 1
Contributor ,
Oct 31, 2017

Copy link to clipboard

Copied

WOW! Something so simple. Thanks again.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 31, 2017 0
Contributor ,
Nov 01, 2017

Copy link to clipboard

Copied

Hi osgood,

Would you happen to have any insight on why my hero image isn't full width in outlook? I have display:block;width:100%; set in the inline style for the image. It's also creating a grey bar below the footer. I would guess that the paragraph padding is being affected from the image issue.

Screen Shot 2017-11-01 at 1.52.46 PM.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="icon" href="file:///assets/img/icons/foundation-favicon.ico" type="image/x-icon">

<meta name="viewport" content="width=device-width">

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation-emails/2.2.1/foundation-emails.min.css" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=PT+Serif:400,700" rel="stylesheet">

<title>My Hero Template Email Template Subject</title>

<meta name="format-detection" content="date=no">

</head>

<body>

<span class="preheader"></span>

<style type=”text/css”>

.appleLinks p {color:#000000;}

.appleLinks a {color:#000000;}

.appleLinksWhite a {color:#ffffff;}

</style>

<script>

      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i=i||function(){

      (i.q=i.q||[]).push(arguments)},i.l=1*new Date();a=s.createElement(o),

      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-2195009-2', 'auto');

      ga('send', 'pageview');

      ga('create', 'UA-2195009-27', 'auto', {name: "foundation"});

      ga('foundation.send', 'pageview');

      ga('create', 'UA-2195009-47', 'auto', {name: "foundation_emails"});

      ga('foundation_emails.send', 'pageview');

    </script>

<table class="body">

<tr>

<td align="center" class="center" valign="top">

<center data-parsed="">

  <table align="center" class="container float-center">

    <tbody>

<tr>

<td>

<table class="spacer">

<tbody>

<tr>

<td height="16px" style="font-size:16px;line-height:16px;background-color: #999999;"> </td>

</tr>

</tbody>

</table>

<table class="row" style="background-color: #999999">

<tbody>

<tr>

<th style="padding-bottom: 0px;"height="940" class="small-12 large-12 columns first last">

<table style=""width="677">

<tr>

<th width="100%" height="424">

<img style="vertical-align:top;display:block;width:100%;background-color: #ffffff;"alt="" src="http://offers.premierinc.com/rs/381-NBB-525/images/Join-Premier.jpg">

<table class="spacer">

<tbody>

<tr>

<td height="14px" style="font-size:16px;line-height:16px;">&#xA0;</td>

</tr>

</tbody>

</table>

<table style="background-color: #ffffff;padding-left: 35px;padding-right: 35px;"width="743" class="callout" >

<tr>

<th class="callout-inner primary appleLinks" style="background-color: #ffffff;border:0;margin:">

<p style="background-color:#ffffff;margin-bottom: 20px;margin-top:35px; padding-left: 35px; padding-right: 35px; text-align: center;font-family: 'PT Serif', serif;line-height: 1.2;font-size: 18px;letter-spacing: 2px;color:#000000"><b>January&#8203; 31st&#8203;–February&#8203; 1st&#8203;</b><br>

  Premier Headquarters | Charlotte, NC.</p>

<p style="background-color:#ffffff;margin-bottom: 20px;margin-top:35px; padding-left: 35px; padding-right: 35px; text-align: center;font-family: 'PT Serif', serif;line-height: 1.2;font-size: 16px;letter-spacing: 2px;color:#000000">We value your perspective and  willingness to help provide strategic direction and tactical input  as we work toward the design and launch of our collaborative. Our goal is to design the most effective medical group collaborative in the market to support the quadruple aim, and more specifically, to address the areas that are of the greatest concern and benefit to you.</p>

<hr width="90%"><br>

<center><div><!--[if mso]>

  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:250px;" arcsize="0%" strokecolor="#1e3650" fillcolor="#0099cc">

    <w:anchorlock/>

    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">DOWNLOAD NOW</center>

  </v:roundrect>

<![endif]--><a class="appleLinksWhite"href=""

style="background-color:#0099cc;border-radius:0px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:14px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:250px;-webkit-text-size-adjust:none;mso-hide:all;">DOWNLOAD NOW</a></div><br><p style="text-align: center;font-size: 12px;font-family: 'PT Serif', serif;line-height: 1.4;background-color: #ffffff">*Be sure to include contact information for your executive assistant <br>so we can complete your registration. Travel related expenses to be paid by Premier.

</p><hr width="90%"></p></center>

<p style="text-align: center;font-size: 14px;font-family: 'PT Serif', serif;line-height: 1.4;background-color: #ffffff"><b>Questions regarding this event?</b> <br>

Contact Tiffany Randolph at 704.816.5696. </p><hr width="90%"><br><img style="vertical-align:top"alt="" src="http://offers.premierinc.com/rs/381-NBB-525/images/footer.jpg"></th>

<th class="expander"></th>

</tr>

</table>

<tbody>

<tr>

</tr>

</tbody>

</table>

</th>

</tr>

</table>

</th>

</tr>

</tbody>

</table>

<center data-parsed="">

</center>

</td>

</tr>

</tbody>

</table>

</center>

</td>

</tr>

</table>

<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;">                                                             </div>

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 01, 2017 0
Adobe Community Professional ,
Nov 01, 2017

Copy link to clipboard

Copied

your DOM tree is pretty confusing... you have a TH tag containaing the IMG and as siblings other TABLE... you should use (either if it is a TABLE construction) a more robust container dispatching...

as it appears to be presnted, you have the Join Premier Image Hero that should be on an isolate ROW, the following content on a next ROW and so on...

consider each stage of the content as ROWs dispatched in a COLUMN

so the COLUM is indicated by the TABLE tag, the ROW as the TR tags and the siblings (neighbors in the same level as THs or TDs)

perhaps I missed the bottom line , I haven't red all the previous message... but hope that it will help more than it will confuse you

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 01, 2017 1
Contributor ,
Nov 01, 2017

Copy link to clipboard

Copied

Hi there,

Thanks for your input. Yes there is a bunch of crazy stuff going on in this template. It's been a nightmare. Although I'm new to this I get the gist of what your saying. Off to keep learning:)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 01, 2017 0
Adobe Community Professional ,
Nov 02, 2017

Copy link to clipboard

Copied

if you need help just post your new approach here and we will try to help you. Reading your previous code,

  • avoid to nest TABLE in within TABLE when it is not needed,
  • keep your DOM structure as simple as you can,
  • don't forget as mentionned Nancy to always close your tags,
  • remove all unusued, or empty TAG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 02, 2017 0