 Is there actually a not-horrible WYSIWYG HTML editor?, Can these tools be useful or is it always better to start from HTML? |
  |
| ToddSummers |
 Jul 17 2020, 01:19 PM
Post
#1
|
|
Group: Members Posts: 2 Joined: 17-July 20 Member No.: 27,441  |
Hello all, I am a novice with HTML code, I know enough to hack out a basic layout but I'm slow. I am trying to get better and realizing it's more fun the more tricks you learn. But I'm still very slow, hence my question... So I have always hated WYSIWYG HTML editors, they are always super cheesey and limit what you can do so much that there's no time savings. But, just recently my company bought Act-On (marketing automation platform) and I was surprised to find that a more high quality WYSIWYG is a totally different experience, now I can see how it could potentially save time for certain basic things throwing together a layout for a landing page or an email. However... Almost as soon as I began to rethink my prejudices against WYSIWYG, I immediately ran into a problem with something I built and now I'm almost wishing I had coded it more myself from the beginning. I don't see how to modify the code that Act-On gave me from the WYSIWYG to fix it. Here is my design. As you'll see in the link, it looks fine in a browser but as you'll see in the image below it looks terrible on mobile or in Outlook or anywhere else (other than Gmail oddly, which has no problem with it). Once the responsive-ness kicks in on the smaller screen, the tables start having a funky alignment and it's horrible looking. I wanted to have some "float effect" to the layout where certain content or images can extend out past the internal frame but it seems on smaller screens it goes wonky. Below is the image of the problem I'm talking about and further below that is my code. Is there any way to salvage this code? Any tips or things I can read up on to get the effect I'm looking for but to make it work on smaller screens? Thanks a million, I'm dreading starting over on this...   CODE <!DOCTYPE html>
<html> <head><meta http-equiv="Content-Type" content="text/html charset=UTF-8" /> <!--[if gte mso 12]><style type="text/css"> td p {margin-top: 1em; margin-bottom: 1em } p.MsoNormal, li.MsoNormal, div.MsoNormal, table.MsoNormalTable {font-family:Arial, Helvetica, sans-serif;} </style><![endif]--> <link rel="shortcut icon" type="image/x-icon" href="https://www.multitaction.com/wp-content/uploads/2018/06/favicon-194x194-150x150.png?v=2" /> <link rel="icon" type="image/x-icon" href="https://www.multitaction.com/wp-content/uploads/2018/06/favicon-194x194-150x150.png?v=2" /> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> body, table, tr, td, div, textarea, input { color: #000000; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; /* Extended Stationery Text Styles */ /* Page background, Borders, Corners */ /* Header Styles */ /* Footer Style Defaults */ } </style> </head> <body bgcolor="#FFFFFF" style="background-color: #FFFFFF; "> <div style="background-color: #FFFFFF; "> <table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0" id="backgroundTable" style="width: 100%; height: 100%;"><tr><td align="center" valign="top" style="width: 100%; height: 100%;"> <table width="600" border="0" cellspacing="0" cellpadding="0" class="devicewidthouter"> <div style="display: none; font-size: 1px; color: #FFFFFF; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;"> Insert Preview Text Here </div> <tr><td width="100%" bgcolor=transparent style="padding: 0 0 0 0; text-align: center;" align="center" class="moheader"> </td></tr> </table> <table width="600" border="0" cellspacing="0" cellpadding="0" class="devicewidthouter"> <tr><td width="600" bgcolor="#FFFFFF" valign="top" align="left" class="devicewidthtable"> <table width="600" border="0" cellspacing="0" cellpadding="0" class="devicewidth"> <tr><td width="100%" bgcolor="#FFFFFF" valign="top" align="suppress" class="milogo" style="padding: 0; text-align: suppress;"></td></tr> <tr><td width="600" bgcolor="#FFFFFF" valign="top" align="left" class="devicewidthtable"> <style type="text/css"> a[href] { white-space:normal; } /* Client-specific Styles */ #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */ body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */ .ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */ .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ */ #backgroundTable {margin:0; padding:0; width:100% !important;} img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;} a img {border:none;} .image_fix {display:block;} table td {border-collapse: collapse;} table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; } /*a {color: #e95353;text-decoration: none;text-decoration:none!important;}*/ /*STYLES*/ table[class=full] { width: 100%; clear: both; } /*################################################*/ /*tablet STYLES*/ /*################################################*/ @media only screen and (max-width: 640px) { a[href^="tel"], a[href^="sms"] { text-decoration: default; color: inherit; pointer-events: none; cursor: default; } .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] { text-decoration: default; color: #ffffff !important; pointer-events: auto; cursor: default; } td[class=devicewidth] img {max-width: 440px!important; height: auto!important;} td[class=devicewidthouter] img {max-width: 440px!important; height: auto!important;} td[class=devicewidth] img:not([width]) {width: auto!important;} td[class=devicewidthouter] img:not([width]) {width: auto!important;} table[class=devicewidth] {width: 440px!important;} div[class=devicewidth] {width: 440px!important;} td[class=devicewidth] {width: 440px!important; display: table!important;} td[class=devicewidthtable] {width: 440px!important;} img[class=devicewidth] {width: 440px!important;} table[class=devicewidthouter] {width: 440px!important;} div[class=devicewidthouter] {width: 440px!important;} td[class=devicewidthouter] {width: 440px!important;} img[class=devicewidthouter] {width: 440px!important;} table[class=devicewidthborder] {width: 440px!important;} div[class=devicewidthborder] {width: 440px!important;} td[class=devicewidthborder] {width: 440px!important;} img[class=devicewidthborder] {width: 440px!important;} td[class=milogo] img {max-width: 440px!important; height:auto!important;} td[class=mologo] img {max-width: 440px!important; height:auto!important;} td[class=miheader] img {max-width: 440px!important; height:auto!important;} td[class=moheader] img {max-width: 440px!important; height:auto!important;} td[class=mifooter] img {max-width: 400px!important; height:auto!important;} td[class=mofooter] img {max-width: 400px!important; height:auto!important;} td[class=miheader], td[class=miheader] table {width: 440px!important;} td[class=moheader], td[class=moheader] table {width: 440px!important;} td[class=mifooter], td[class=mifooter] table {width: 400px!important;} td[class=mofooter], td[class=mofooter] table {width: 400px!important;} } /*##############################################*/ /*PHONE STYLES IPHONE 6 Plus*/ /*##############################################*/ @media only screen and (max-width: 440px) { a[href^="tel"], a[href^="sms"] { text-decoration: default; color: inherit; pointer-events: none; cursor: default; } .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] { text-decoration: default; color: #ffffff !important; pointer-events: auto; cursor: default; } td[class=devicewidth] img {max-width: 414px!important; height: auto!important;} td[class=devicewidthouter] img {max-width: 414px!important; height: auto!important;} td[class=devicewidth] img:not([width]) {width: auto!important;} td[class=devicewidthouter] img:not([width]) {width: auto!important;} table[class=devicewidth] {width: 414px!important;} div[class=devicewidth] {width: 414px!important;} td[class=devicewidth] {width: 414px!important; display: table!important;} td[class=devicewidthtable] {width: 414px!important;} img[class=devicewidth] {width: 414px!important;} table[class=devicewidthouter] {width: 414px!important;} div[class=devicewidthouter] {width: 414px!important;} td[class=devicewidthouter] {width: 414px!important;} img[class=devicewidthouter] {width: 414px!important;} table[class=devicewidthborder] {width: 414px!important;} div[class=devicewidthborder] {width: 414px!important;} td[class=devicewidthborder] {width: 414px!important;} img[class=devicewidthborder] {width: 414px!important;} td[class=milogo] img {max-width: 414px!important; height:auto!important;} td[class=mologo] img {max-width: 414px!important; height:auto!important;} td[class=miheader] img {max-width: 414px!important; height:auto!important;} td[class=moheader] img {max-width: 414px!important; height:auto!important;} td[class=mifooter] img {max-width: 374px!important; height:auto!important;} td[class=mofooter] img {max-width: 374px!important; height:auto!important;} td[class=miheader], td[class=miheader] table {width: 414px!important;} td[class=moheader], td[class=moheader] table {width: 414px!important;} td[class=mifooter], td[class=mifooter] table {width: 374px!important;} td[class=mofooter], td[class=mofooter] table {width: 374px!important;} } /*##############################################*/ /*PHONE STYLES IPHONE 6*/ /*##############################################*/ @media only screen and (max-width: 375px) { a[href^="tel"], a[href^="sms"] { text-decoration: default; color: inherit; pointer-events: none; cursor: default; } .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] { text-decoration: default; color: #ffffff !important; pointer-events: auto; cursor: default; } td[class=devicewidth] img {max-width: 375px!important; height: auto!important;} td[class=devicewidthouter] img {max-width: 375px!important; height: auto!important;} td[class=devicewidth] img:not([width]) {width: auto!important;} td[class=devicewidthouter] img:not([width]) {width: auto!important;} table[class=devicewidth] {width: 375px!important;} div[class=devicewidth] {width: 375px!important;} td[class=devicewidth] {width: 375px!important; display: table!important;} td[class=devicewidthtable] {width: 375px!important;} img[class=devicewidth] {width: 375px!important;} table[class=devicewidthouter] {width: 375px!important;} div[class=devicewidthouter] {width: 375px!important;} td[class=devicewidthouter] {width: 375px!important;} img[class=devicewidthouter] {width: 375px!important;} table[class=devicewidthborder] {width: 375px!important;} div[class=devicewidthborder] {width: 375px!important;} td[class=devicewidthborder] {width: 375px!important;} img[class=devicewidthborder] {width: 375px!important;} td[class=milogo] img {max-width: 375px!important; height:auto!important;} td[class=mologo] img {max-width: 375px!important; height:auto!important;} td[class=miheader] img {max-width: 375px!important; height:auto!important;} td[class=moheader] img {max-width: 375px!important; height:auto!important;} td[class=mifooter] img {max-width: 335px!important; height:auto!important;} td[class=mofooter] img {max-width: 335px!important; height:auto!important;} td[class=miheader], td[class=miheader] table {width: 375px!important;} td[class=moheader], td[class=moheader] table {width: 375px!important;} td[class=mifooter], td[class=mifooter] table {width: 335px!important;} td[class=mofooter], td[class=mofooter] table {width: 335px!important;} } /*##############################################*/ /*PHONE STYLES*/ /*##############################################*/ @media only screen and (max-width: 374px) { a[href^="tel"], a[href^="sms"] { text-decoration: default; color: inherit; pointer-events: none; cursor: default; } .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] { text-decoration: default; color: #ffffff !important; pointer-events: auto; cursor: default; } td[class=devicewidth] img {max-width: 280px!important; height: auto!important;} td[class=devicewidthouter] img {max-width: 280px!important; height: auto!important;} td[class=devicewidth] img:not([width]) {width: auto!important;} td[class=devicewidthouter] img:not([width]) {width: auto!important;} table[class=devicewidth] {width: 280px!important;} div[class=devicewidth] {width: 280px!important;} td[class=devicewidth] {width: 280px!important; display: table!important;} td[class=devicewidthtable] {width: 280px!important;} img[class=devicewidth] {width: 280px!important;} table[class=devicewidthouter] {width: 280px!important;} div[class=devicewidthouter] {width: 280px!important;} td[class=devicewidthouter] {width: 280px!important;} img[class=devicewidthouter] {width: 280px!important;} table[class=devicewidthborder] {width: 280px!important;} div[class=devicewidthborder] {width: 280px!important;} td[class=devicewidthborder] {width: 280px!important;} img[class=devicewidthborder] {width: 280px!important;} td[class=milogo] img {max-width: 280px!important; height:auto!important;} td[class=mologo] img {max-width: 280px!important; height:auto!important;} td[class=miheader] img {max-width: 280px!important; height:auto!important;} td[class=moheader] img {max-width: 280px!important; height:auto!important;} td[class=mifooter] img {max-width: 240px!important; height:auto!important;} td[class=mofooter] img {max-width: 240px!important; height:auto!important;} td[class=miheader], td[class=miheader] table {width: 280px!important;} td[class=moheader], td[class=moheader] table {width: 280px!important;} td[class=mifooter], td[class=mifooter] table {width: 240px!important;} td[class=mofooter], td[class=mofooter] table {width: 240px!important;} } @media only screen and (max-width: 640px) { td[class=devicewidth] .mcol1 { width: 440px!important; } td[class=devicewidth] .mcol1 img { max-width: 440px!important;height: auto!important; } td[class=devicewidth] .mcol2 { width: 400px!important; } td[class=devicewidth] .mcol2 img { max-width: 400px!important;height: auto!important; } td[class=devicewidth] .mcol3 { width: 440px!important; } td[class=devicewidth] .mcol3 img { max-width: 440px!important;height: auto!important; } td[class=devicewidth] .mcol4 { width: 360px!important; } td[class=devicewidth] .mcol4 img { max-width: 360px!important;height: auto!important; } td[class=devicewidth] .mcol5 { width: 360px!important; } td[class=devicewidth] .mcol5 img { max-width: 360px!important;height: auto!important; } td[class=devicewidth] .mcol6 { width: 440px!important; } td[class=devicewidth] .mcol6 img { max-width: 440px!important;height: auto!important; } td[class=devicewidth] .mcol7 { width: 400px!important; } td[class=devicewidth] .mcol7 img { max-width: 400px!important;height: auto!important; } td[class=devicewidth] .mcol8 { width: 440px!important; } td[class=devicewidth] .mcol8 img { max-width: 440px!important;height: auto!important; } td[class=devicewidth] .mcol9 { width: 380px!important; } td[class=devicewidth] .mcol9 img { max-width: 380px!important;height: auto!important; } td[class=devicewidth] .mcol10 { width: 360px!important; } td[class=devicewidth] .mcol10 img { max-width: 360px!important;height: auto!important; } } @media only screen and (max-width: 440px) { td[class=devicewidth] .mcol1 { width: 414px!important; } td[class=devicewidth] .mcol1 img { max-width: 414px!important;height: auto!important; } td[class=devicewidth] .mcol2 { width: 374px!important; } td[class=devicewidth] .mcol2 img { max-width: 374px!important;height: auto!important; } td[class=devicewidth] .mcol3 { width: 414px!important; } td[class=devicewidth] .mcol3 img { max-width: 414px!important;height: auto!important; } td[class=devicewidth] .mcol4 { width: 334px!important; } td[class=devicewidth] .mcol4 img { max-width: 334px!important;height: auto!important; } td[class=devicewidth] .mcol5 { width: 334px!important; } td[class=devicewidth] .mcol5 img { max-width: 334px!important;height: auto!important; } td[class=devicewidth] .mcol6 { width: 414px!important; } td[class=devicewidth] .mcol6 img { max-width: 414px!important;height: auto!important; } td[class=devicewidth] .mcol7 { width: 374px!important; } td[class=devicewidth] .mcol7 img { max-width: 374px!important;height: auto!important; } td[class=devicewidth] .mcol8 { width: 414px!important; } td[class=devicewidth] .mcol8 img { max-width: 414px!important;height: auto!important; } td[class=devicewidth] .mcol9 { width: 354px!important; } td[class=devicewidth] .mcol9 img { max-width: 354px!important;height: auto!important; } td[class=devicewidth] .mcol10 { width: 334px!important; } td[class=devicewidth] .mcol10 img { max-width: 334px!important;height: auto!important; } } @media only screen and (max-width: 375px) { td[class=devicewidth] .mcol1 { width: 375px!important; } td[class=devicewidth] .mcol1 img { max-width: 375px!important;height: auto!important; } td[class=devicewidth] .mcol2 { width: 335px!important; } td[class=devicewidth] .mcol2 img { max-width: 335px!important;height: auto!important; } td[class=devicewidth] .mcol3 { width: 375px!important; } td[class=devicewidth] .mcol3 img { max-width: 375px!important;height: auto!important; } td[class=devicewidth] .mcol4 { width: 295px!important; } td[class=devicewidth] .mcol4 img { max-width: 295px!important;height: auto!important; } td[class=devicewidth] .mcol5 { width: 295px!important; } td[class=devicewidth] .mcol5 img { max-width: 295px!important;height: auto!important; } td[class=devicewidth] .mcol6 { width: 375px!important; } td[class=devicewidth] .mcol6 img { max-width: 375px!important;height: auto!important; } td[class=devicewidth] .mcol7 { width: 335px!important; } td[class=devicewidth] .mcol7 img { max-width: 335px!important;height: auto!important; } td[class=devicewidth] .mcol8 { width: 375px!important; } td[class=devicewidth] .mcol8 img { max-width: 375px!important;height: auto!important; } td[class=devicewidth] .mcol9 { width: 315px!important; } td[class=devicewidth] .mcol9 img { max-width: 315px!important;height: auto!important; } td[class=devicewidth] .mcol10 { width: 295px!important; } td[class=devicewidth] .mcol10 img { max-width: 295px!important;height: auto!important; } } @media only screen and (max-width: 374px) { td[class=devicewidth] .mcol1 { width: 280px!important; } td[class=devicewidth] .mcol1 img { max-width: 280px!important;height: auto!important; } td[class=devicewidth] .mcol2 { width: 240px!important; } td[class=devicewidth] .mcol2 img { max-width: 240px!important;height: auto!important; } td[class=devicewidth] .mcol3 { width: 280px!important; } td[class=devicewidth] .mcol3 img { max-width: 280px!important;height: auto!important; } td[class=devicewidth] .mcol4 { width: 200px!important; } td[class=devicewidth] .mcol4 img { max-width: 200px!important;height: auto!important; } td[class=devicewidth] .mcol5 { width: 200px!important; } td[class=devicewidth] .mcol5 img { max-width: 200px!important;height: auto!important; } td[class=devicewidth] .mcol6 { width: 280px!important; } td[class=devicewidth] .mcol6 img { max-width: 280px!important;height: auto!important; } td[class=devicewidth] .mcol7 { width: 240px!important; } td[class=devicewidth] .mcol7 img { max-width: 240px!important;height: auto!important; } td[class=devicewidth] .mcol8 { width: 280px!important; } td[class=devicewidth] .mcol8 img { max-width: 280px!important;height: auto!important; } td[class=devicewidth] .mcol9 { width: 220px!important; } td[class=devicewidth] .mcol9 img { max-width: 220px!important;height: auto!important; } td[class=devicewidth] .mcol10 { width: 200px!important; } td[class=devicewidth] .mcol10 img { max-width: 200px!important;height: auto!important; } } </style> <style type="text/css"> a[href^="x-apple-data-detectors:"], a[href^="tel:"] { color: inherit; font-size: inherit; font-family: inherit; text-decoration: inherit; } </style> <table border="0" cellspacing="0" cellpadding="0" width="100%" class="devicewidth"> <tr><td width="100%"><table border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;" width="600" class="devicewidth"><tr><td valign="top" width="600" class="devicewidth" bgcolor="transparent" style="border-collapse: collapse; box-sizing: border-box; border-top: none; border-right: none; border-left: none; border-bottom: none;" ><table cellspacing="0" cellpadding="0" width="100%" height="100%" style="width: 100%; height: 100%; border-collapse: separate;" ><tr><td valign="top" class="mcol1" style="border: 0; border-collapse: separate; width: 100%; height: 100%; " ><table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr><td valign="top" style="padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;" id="B1593540309647" class="ao_PictureStripBlock"> <a name="B1593540309647"></a> <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" height="auto" style="line-height: 150%; "> <tbody> <tr style="line-height: 150%; "> <td style="line-height: 150%; "> <table border="0" cellspacing="0" cellpadding="0" align="center" width="100%" style="line-height: 150%; table-layout: fixed;"> <tbody> <tr style="line-height: 150%; "> <td style="font-size: 0; line-height: 100%; " align="center"><img border="0" style="max-width: 100% !important;display:block !important; font-size: 12px;" alt="" title="" src="https://touch.multitaction.com/cdnr/205/acton/attachment/43241/f-4db10091-514c-4b56-9507-4c766a0228cb/2/-/-/-/-/image.jpg"></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td></tr> </table></td></tr></table></td></tr></table></td></tr><tr><td width="100%"><table border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;" width="600" class="devicewidth"><tr><td valign="top" width="600" class="devicewidth" bgcolor="#36A9E1" style="border-collapse: collapse; box-sizing: border-box; border-top: none; border-right: none; border-left: none; border-bottom: none;" ><table cellspacing="0" cellpadding="0" width="100%" height="100%" style="width: 100%; height: 100%; border-collapse: separate;" ><tr><td valign="top" class="mcol1" style="border: 0; border-collapse: separate; width: 100%; height: 100%; padding: 30px 20px 10px 20px;" ><table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr><td valign="top" style="padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;" id="B1592943074276" class="ao_FreeTextBlock"> <a name="B1592943074276"></a> <h1 style="text-align: center;"><span style="line-height: 150%; color: #ffffff; font-size: 22pt;">Nasdaq's investment in a more personalized client experience</span></h1> </td></tr> </table></td></tr></table></td></tr></table></td></tr><tr><td width="100%"><table border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;" width="600" class="devicewidth"><tr><td valign="top" width="600" class="devicewidth" bgcolor="#36A9E1" style="border-collapse: collapse; box-sizing: border-box; border-top: none; border-right: none; border-left: none; border-bottom: none;" ><table cellspacing="0" cellpadding="0" width="100%" height="100%" style="width: 100%; height: 100%; border-collapse: separate;" ><tr><td valign="top" class="mcol1" style="border: 0; border-collapse: separate; width: 100%; height: 100%; " ><table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr><td valign="top" style="padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;" id="B1592943755148" class="ao_PictureStripBlock"> <a name="B1592943755148"></a> <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" height="auto" style="line-height: 150%; "> <tbody> <tr style="line-height: 150%; "> <td style="line-height: 150%; "> <table border="0" cellspacing="0" cellpadding="0" align="center" width="100%" style="line-height: 150%; table-layout: fixed;"> <tbody> <tr style="line-height: 150%; "> <td style="font-size: 0; line-height: 100%; " align="center"><img border="0" style="max-width: 100% !important;display:block !important; font-size: 12px;" alt="Nasdaq" title="Nasdaq" src="https://touch.multitaction.com/cdnr/205/acton/attachment/43241/f-8075811f-fcb1-4ed3-ba65-0da50d8222f4/2/-/-/-/-/image.png"></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td></tr> </table></td></tr></table></td></tr></table></td></tr><tr><td width="100%"><table border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;" width="600" class="devicewidth"><tr><td valign="top" width="600" class="devicewidth" bgcolor="#F1F9FD" style="border-collapse: collapse; box-sizing: border-box; border-top: none; border-right:20px solid #FFFFFF; border-left:20px solid #FFFFFF; border-bottom: none;" ><table cellspacing="0" cellpadding="0" width="100%" height="100%" style="width: 100%; height: 100%; border-collapse: separate;" ><tr><td valign="top" class="mcol1" style="border: 0; border-collapse: separate; width: 100%; height: 100%; padding: 30px 20px 0px 20px;" ><table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr><td valign="top" style="padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;" id="B1592943148736" class="ao_FreeTextBlock"> <a name="B1592943148736"></a> <p style="line-height: 150%; text-align: center;"><span style="line-height: 150%; font-size: 12pt; font-family: arial, helvetica, sans-serif; color: #0b3950;">When Nasdaq wanted the ultimate interactive client experience for their iconic MarketSite building at Times Square, only MultiTaction could offer the performance and functionality demanded by the project. Discover how our solution delivers them personalized multi-touch interaction for up to 100 MarketSite visitors at a time.</span></p> </td></tr> </table></td></tr></table></td></tr></table></td></tr><tr><td width="100%"><table border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;" width="600" class="devicewidth"><tr><td valign="top" width="600" class="devicewidth" bgcolor="#F1F9FD" style="border-collapse: collapse; box-sizing: border-box; border-top: none; border-right:20px solid #FFFFFF; border-left:20px solid #FFFFFF; border-bottom: none;" ><table cellspacing="0" cellpadding="0" width="100%" height="100%" style="width: 100%; height: 100%; border-collapse: separate;" ><tr><td valign="top" class="mcol1" style="border: 0; border-collapse: separate; width: 100%; height: 100%; padding: 20px 20px 40px 20px;" ><table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr><td valign="top" style="padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;" id="B1592942906221" class="ao_CustomBlock"> <a name="B1592942906221"></a> <table align="center" class="button__default" style="line-height: 150%; border-collapse: collapse;"> <tbody> <tr style="line-height: 150%; "> <td style="line-height: 150%; border-collapse: collapse; background: #e4007e; display: inline-block; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; letter-spacing: 1.6px; padding: 22px; text-align: center; text-transform: uppercase;" class=""><a href="https://www.multitaction.com/wp-content/uploads/2020/05/CFS_FS-Case-study_051120.pdf" style="line-height: 150%; text-decoration:none;color: #FFFFFF;">DOWNLOAD THE CASE STUDY </a></td> </tr> </tbody> </table> </td></tr> </table></td></tr></table></td></tr></table></td></tr><tr><td width="100%"><table border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;" width="600" class="devicewidth"><tr><td valign="top" width="600" class="devicewidth" bgcolor="#D6EDF8" style="border-collapse: collapse; box-sizing: border-box; border-top: none; border-right: none; border-left: none; border-bottom: none;" ><table cellspacing="0" cellpadding="0" width="100%" height="100%" style="width: 100%; height: 100%; border-collapse: separate;" ><tr><td valign="top" class="mcol1" style="border: 0; border-collapse: separate; width: 100%; height: 100%; " ><table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr><td valign="top" style="padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;" id="B1594942079184" class="ao_PictureStripBlock"> <a name="B1594942079184"></a> <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" height="auto" style="line-height: 150%; "> <tbody> <tr style="line-height: 150%; "> <td style="line-height: 150%; "> <table border="0" cellspacing="0" cellpadding="0" align="center" width="100%" style="line-height: 150%; table-layout: fixed;"> <tbody> <tr style="line-height: 150%; "> <td style="font-size: 0; line-height: 100%; " align="center"><img border="0" style="max-width: 100% !important;display:block !important; font-size: 12px;" alt="" title="" src="https://touch.multitaction.com/cdnr/205/acton/attachment/43241/f-8357b29a-b2f3-4000-a6e4-9e3f6e80dcad/2/-/-/-/-/image.jpg"></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td></tr> </table></td></tr></table></td></tr></table></td></tr><tr><td width="100%"><table border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;" width="600" class="devicewidth"><tr><td valign="top" width="600" class="devicewidth" bgcolor="#D6EDF8" style="border-collapse: collapse; box-sizing: border-box; border-top: none; border-right:20px solid #FFFFFF; border-left:20px solid #FFFFFF; border-bottom: none;" ><table cellspacing="0" cellpadding="0" width="100%" height="100%" style="width: 100%; height: 100%; border-collapse: separate;" ><tr><td valign="top" class="mcol1" style="border: 0; border-collapse: separate; width: 100%; height: 100%; " ><table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr><td valign="top" style="padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;" id="B1594942473440" class="ao_SpacerBlock"> <a name="B1594942473440"></a> <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <td style="padding:0px;font-size: 0px; line-height:0px;" width="100%"> <table border="0" cellspacing="0" cellpadding="0" height="20" width="100%" style="font-size: 0px; line-height: 0px"> <tr> <td height="20" width="100%" style="border-collapse:collapse;font-size:0px; line-height:0px;" bgcolor="#D6EDF8"> <img src="https://touch.multitaction.com/acton/image/transpix.gif" alt="" height="1" width="1" /> </td> </tr> </table> </td> </tr> </table> </td></tr> </table></td> |
  |
 
|
| pandy |
Jul 17 2020, 01:41 PM
Post
#2
|
|
🌟Computer says no🌟  Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
How is it supposed to look? Are all sections supposed to have the same width or do they have different widths and is the image at 'Who says presenting remotely has to be dull?' supposed to stick out? Because I see different widths and the image sticks out in a large window on a desktop too. Tried several browsers.
 I've helped to fix, or at least put band aids on, a lot of WYSIWYG pages, the last 20 years or so. I find there are basically three problems with WYSIWYGS. 1. Most (all?) of them generate crap. 2. Almost certainly all of them generate way too much of it. 3. It's hard to correct their mistakes. The person that uses them usually isn't skilled enough and doesn't understand what he's looking at. It's hard for more experienced guys too, because of the crap and verbosity and because there's seldom any logic at all to the mess. It's like wading through mud. Worst case scenario is that when you fix one thing, that causes other problems that need to be fixed and that causes even more problems and you end up having to rewrite the page from scratch. Which would have been quicker if I had done so to start with. Additionally, if you learn the ways of one WYSIWYG so you can modify its output fairly swiftly, the time you spent learning that is mostly wasted if you switch to another program. It will have its own oddities and create its own flavour of mud. If you instead spend that time learning to do it by hand, you'll find that's quicker than using a WYSIWYG and correct its mistake and you'll have cleaner, neater and faster pages. All in IMHO of course!  |
|
|
|
| ToddSummers |
Jul 20 2020, 10:21 AM
Post
#3
|
|
Group: Members Posts: 2 Joined: 17-July 20 Member No.: 27,441 |
Thanks for the feedback! Yes I did want that image to stick out over that left edge. I'm trying to make it seem as if it's floating, so it feels like it's coming off the page somewhat. If I can get that to work believe I will turn that image into a transparency so it's just the computer screen kind of floating there without a background.
Do you think there's any hope to salvage this? Is it a bad idea to begin? Our product is all about presenting visual content in a more exciting and engaging way so I like the idea of an email layout that's kind of reflecting that idea. I appreciate the insight. Yeah for a second there I thought this tool might be a short cut for me but I guess what I really need to do is take some classes or tutorials and figure out how to make what I'm envisioning. Do you know of any good classes/tutorials? In particular I'm interested in learning how to do stuff like this - to get images to appear to float over the edges of tables. Is there a term for that that I could research? Thanks a million, I really appreciate your help! Todd |
|
|
|
| pandy |
Jul 20 2020, 10:52 AM
Post
#4
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I really don't know. The amount of CSS it has spat out is scary.
|
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 25th April 2024 - 06:27 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC