SendGrid email issue in responsive Gmail

A

AGHAcreative

Joined
Nov 3, 2021
Messages
1
Reaction score
0
Hi everyone! I am a graphic designer using Sendgrid to send emails. But sendgrid don't have a function where we can show 1 image size on desktop and another image size on mobile responsive devices. Also, they don't allow us to design an email that has a column that is 500px wide and one that is 300px (or the % equivalent to that). SO, I went into Mailstyler and created those 2 sections we needed and added in the code to SendGrid (which allows for sections of code to be added in). Done I thought- but no!!! It appears fine on Outlook and Gmail desktop and mobile Outlook BUT NOT ON gmail mobile responsive. SendGrid have been absolutely useless- their technical department saying they do not handle these problems. Not sure if there is any help you can give me!! Below is 2 sections of code that come from Mailstyler. Without these 2 codes SendGrid works fine on Gmail, but we need the design that this offers.



Leaderboard code for adding a mobile responsive image



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

<meta name="x-apple-disable-message-reformatting">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css">

    body, .maintable { height:100% !important; width:100% !important; margin:0; padding:0;}

    img, a img { border:0; outline:none; text-decoration:none;}

    p {margin-top:0; margin-right:0; margin-left:0; padding:0;}

    .ReadMsgBody {width:100%;}

    .ExternalClass {width:100%;}

    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;}

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

    body, table, td, p, a, li, blockquote {-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}

   /*p {display: table; table-layout: fixed; width: 100%; word-wrap: break-word;} */

</style>

<style type="text/css">

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

 .rtable {width: 100% !important;}

 .rtable tr {height:auto !important; display: block;}

 .contenttd {max-width: 100% !important; display: block; width: auto !important;}

 .contenttd:after {content: ""; display: table; clear: both;}

 .hiddentds {display: none;}

 .imgtable, .imgtable table {max-width: 100% !important; height: auto; float: none; margin: 0 auto;}

 .imgtable.btnset td {display: inline-block;}

 .imgtable img {width: 100%; height: auto !important;display: block;}

 table {float: none;}

 .mobileHide {display: none !important; width: 0 !important; max-height: 0 !important; overflow: hidden !important;}

 .desktopHide {display: block !important; width: 100% !important; max-height: unset !important; overflow: unset !important;}

 .noresponsive p {display: table; table-layout: fixed; width: 100%; word-wrap: break-word;}

}

@media only screen and (min-width: 481px) {

 .desktopHide {display: none !important; width: 0 !important; max-height: 0 !important; overflow: hidden !important;}

}

</style>

<!--[if gte mso 9]>

<xml>

  <o:OfficeDocumentSettings>

    <o:AllowPNG></o:AllowPNG>

    <o:PixelsPerInch>96</o:PixelsPerInch>

  </o:OfficeDocumentSettings>

</xml>

<![endif]-->

<title></title>





<table style="BACKGROUND-COLOR: #feffff" cellspacing="0" cellpadding="0" width="100%">

<tbody><tr>

<td style="FONT-SIZE: 0px; HEIGHT: 0px; LINE-HEIGHT: 0"></td>

</tr>

<tr>

<td valign="top">

<table class="rtable" style="WIDTH: 800px; MARGIN: 0px auto" cellspacing="0" cellpadding="0" width="800" align="center" border="0">

<tbody><tr>

<th class="contenttd mobileHide" style="BORDER-TOP: medium none; BORDER-RIGHT: medium none; WIDTH: 800px; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0px; BACKGROUND-COLOR: #feffff">

<table style="WIDTH: 100%" cellspacing="0" cellpadding="0" align="left">

<tbody><tr style="HEIGHT: 90px" height="90">

<th class="contenttd" style="BORDER-TOP: medium none; BORDER-RIGHT: medium none; WIDTH: 800px; VERTICAL-ALIGN: top; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0px; BACKGROUND-COLOR: transparent"><!--[if gte mso 12]>

    <table cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td align="center">

<![endif]-->

<table class="imgtable" style="MARGIN: 0px auto" cellspacing="0" cellpadding="0" align="center" border="0">

<tbody><tr>

<td style="PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px" align="center">

<table cellspacing="0" cellpadding="0" border="0">

<tbody><tr>

<td style="BORDER-TOP: medium none; BORDER-RIGHT: medium none; BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BACKGROUND-COLOR: transparent"><a href="https://agha.com.au/" target="_blank"><img style="BORDER-TOP: medium none; BORDER-RIGHT: medium none; BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; DISPLAY: block" alt="" src="https://marketing-image-production.s3.amazonaws.com/uploads/0120029cf235c86735c20a8d88c75ccb7af2e27b82c5e90a2520d7e3619147d09218e867f1fc6064735f22a01e3bfa04b08853c3104f2c71d442132c213dc311.jpg" width="728" hspace="0" vspace="0"></a></td>

</tr>

</tbody></table>

</td>

</tr>

</tbody></table>

<!--[if gte mso 12]>

    </td></tr></table>

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

</tr>

</tbody></table>

</th>

</tr>

<tr><!--[if !mso]><!-- -->

<th class="contenttd desktopHide" style="OVERFLOW: hidden; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WIDTH: 0px; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; BORDER-LEFT: medium none; DISPLAY: none; PADDING-RIGHT: 0px; MAX-HEIGHT: 0px; BACKGROUND-COLOR: #feffff; mso-hide: all">

<table style="WIDTH: 100%" cellspacing="0" cellpadding="0" align="left">

<tbody><tr style="HEIGHT: 150px" height="150">

<th class="contenttd" style="BORDER-TOP: medium none; BORDER-RIGHT: medium none; WIDTH: 800px; VERTICAL-ALIGN: top; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0px; BACKGROUND-COLOR: transparent"><!--[if gte mso 12]>

    <table cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td align="center">

<![endif]-->

<table class="imgtable" style="MARGIN: 0px auto" cellspacing="0" cellpadding="0" align="center" border="0">

<tbody><tr>

<td style="PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px" align="center">

<table cellspacing="0" cellpadding="0" border="0">

<tbody><tr>

<td style="BORDER-TOP: medium none; BORDER-RIGHT: medium none; BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BACKGROUND-COLOR: transparent"><a href="https://agha.com.au/" target="_blank"><img style="BORDER-TOP: medium none; BORDER-RIGHT: medium none; BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; DISPLAY: block" alt="" src="https://marketing-image-production.s3.amazonaws.com/uploads/b1294ce0053f8d98eeb3c0ccd0ea7a31b3251205789c1bab2b36127cb6bba605bf555376bdadd19c328c37e98a0ed8be6ab9cf5b3aec4eb382e6210722afa651.jpg" width="320" hspace="0" vspace="0"></a></td>

</tr>

</tbody></table>

</td>

</tr>

</tbody></table>

<!--[if gte mso 12]>

    </td></tr></table>

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

</tr>

</tbody></table>

</th>

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

</tbody></table>

</td>

</tr>

<tr>

<td style="FONT-SIZE: 0px; HEIGHT: 8px; LINE-HEIGHT: 0">&nbsp;</td>

</tr>

</tbody></table>

<!-- -->



Code for a section that has columns of differing percentage widths

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

<meta name="x-apple-disable-message-reformatting">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css">

    body, .maintable { height:100% !important; width:100% !important; margin:0; padding:0;}

    img, a img { border:0; outline:none; text-decoration:none;}

    p {margin-top:0; margin-right:0; margin-left:0; padding:0;}

    .ReadMsgBody {width:100%;}

    .ExternalClass {width:100%;}

    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;}

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

    body, table, td, p, a, li, blockquote {-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}

   /*p {display: table; table-layout: fixed; width: 100%; word-wrap: break-word;} */

</style>

<style type="text/css">

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

 .rtable {width: 100% !important;}

 .rtable tr {height:auto !important; display: block;}

 .contenttd {max-width: 100% !important; display: block; width: auto !important;}

 .contenttd:after {content: ""; display: table; clear: both;}

 .hiddentds {display: none;}

 .imgtable, .imgtable table {max-width: 100% !important; height: auto; float: none; margin: 0 auto;}

 .imgtable.btnset td {display: inline-block;}

 .imgtable img {width: 100%; height: auto !important;display: block;}

 table {float: none;}

 .mobileHide {display: none !important; width: 0 !important; max-height: 0 !important; overflow: hidden !important;}

 .desktopHide {display: block !important; width: 100% !important; max-height: unset !important; overflow: unset !important;}

 .noresponsive p {display: table; table-layout: fixed; width: 100%; word-wrap: break-word;}

}

@media only screen and (min-width: 481px) {

 .desktopHide {display: none !important; width: 0 !important; max-height: 0 !important; overflow: hidden !important;}

}

</style>

<!--[if gte mso 9]>

<xml>

  <o:OfficeDocumentSettings>

    <o:AllowPNG></o:AllowPNG>

    <o:PixelsPerInch>96</o:PixelsPerInch>

  </o:OfficeDocumentSettings>

</xml>

<![endif]-->

<title></title>





<table style="BACKGROUND-COLOR: #ffffff" cellspacing="0" cellpadding="0" width="100%">

<tbody><tr>

<td style="FONT-SIZE: 0px; HEIGHT: 0px; LINE-HEIGHT: 0"></td>

</tr>

<tr>

<td valign="top">

<table class="rtable" style="WIDTH: 800px; MARGIN: 0px auto" cellspacing="0" cellpadding="0" width="800" align="center" border="0">

<tbody><tr>

<th class="contenttd" style="BORDER-TOP: medium none; BORDER-RIGHT: medium none; WIDTH: 800px; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0px; BACKGROUND-COLOR: #feffff">

<table style="WIDTH: 100%" cellspacing="0" cellpadding="0" align="left">

<tbody><tr style="HEIGHT: 633px" height="633">

<th class="contenttd" style="BORDER-TOP: medium none; BORDER-RIGHT: medium none; WIDTH: 485px; VERTICAL-ALIGN: top; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 10px; BACKGROUND-COLOR: transparent"><!--[if gte mso 12]>

    <table cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td align="left">

<![endif]-->

<table class="imgtable" style="MARGIN-LEFT: 0px; MARGIN-RIGHT: auto" cellspacing="0" cellpadding="0" border="0">

<tbody><tr>

<td style="PADDING-BOTTOM: 5px; PADDING-TOP: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px" align="center">

<table cellspacing="0" cellpadding="0" border="0">

<tbody><tr>

<td style="BORDER-TOP: medium none; BORDER-RIGHT: medium none; BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BACKGROUND-COLOR: transparent"><img style="BORDER-TOP: medium none; BORDER-RIGHT: medium none; BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; DISPLAY: block" alt="" src="https://mailchef.s3.amazonaws.com/uploads/mailstyler/images/ec635276-9a4c-4c69-9f80-1a4b833119aa/52B8F2BD-4EDB-DAFA-BD7A-6C56CD4B6B80_Image_1_31667196b3e2401fb47cb4222ac01dee.jpg" width="475" hspace="0" vspace="0"></td>

</tr>

</tbody></table>

</td>

</tr>

</tbody></table>

<!--[if gte mso 12]>

    </td></tr></table>

<![endif]-->

<p style="FONT-SIZE: 14px; MARGIN-BOTTOM: 1em; FONT-FAMILY: arial, helvetica, sans-serif; MARGIN-TOP: 0px; COLOR: #203045; TEXT-ALIGN: left; LINE-HEIGHT: 22px; BACKGROUND-COLOR: transparent; mso-line-height-rule: exactly" align="left"><strong><span style="FONT-SIZE: 18px; LINE-HEIGHT: 28px">WHATS ON 1  26TH NOVEMBER 2021 3PM</span></strong><br>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. justo convallis luctus rutrum, erat nulla fermentum diam. nulla fermentum diam.nulla fermentum diam.&nbsp;&nbsp;&nbsp; <a title="" style="TEXT-DECORATION: none; COLOR: #c28607" href="https://agha.com.au/" target="_blank"><strong><span style="COLOR: #9badba">URL&nbsp;here</span></strong></a>&nbsp;&nbsp; <a title="" style="TEXT-DECORATION: none; COLOR: #c28607" href="mailto:[email protected]"><strong><span style="COLOR: #9badba">EMAIL here</span></strong></a></p>

<!--[if gte mso 12]>

    <table cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td align="left">

<![endif]-->

<table class="imgtable" style="MARGIN-LEFT: 0px; MARGIN-RIGHT: auto" cellspacing="0" cellpadding="0" border="0">

<tbody><tr>

<td style="PADDING-BOTTOM: 5px; PADDING-TOP: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px" align="center">

<table cellspacing="0" cellpadding="0" border="0">

<tbody><tr>

<td style="BORDER-TOP: medium none; BORDER-RIGHT: medium none; BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BACKGROUND-COLOR: transparent"><img style="BORDER-TOP: medium none; BORDER-RIGHT: medium none; BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; DISPLAY: block" alt="" src="https://mailchef.s3.amazonaws.com/uploads/mailstyler/images/ec635276-9a4c-4c69-9f80-1a4b833119aa/A1B9D9AF-50E6-E6F5-92B4-EC3DD0A834F7_Image_2_e3d36d747d7342c0bdc0ef828c31e4ff.jpg" width="475" hspace="0" vspace="0"></td>

</tr>

</tbody></table>

</td>

</tr>

</tbody></table>

<!--[if gte mso 12]>

    </td></tr></table>

<![endif]-->

<p style="FONT-SIZE: 18px; MARGIN-BOTTOM: 0px; FONT-FAMILY: arial, helvetica, sans-serif; MARGIN-TOP: 0px; COLOR: #203045; TEXT-ALIGN: left; LINE-HEIGHT: 28px; BACKGROUND-COLOR: transparent; mso-line-height-rule: exactly" align="left"><strong><strong><span style="FONT-SIZE: 18px; LINE-HEIGHT: 28px">WHATS ON 2</span></strong></strong></p>

<p style="FONT-SIZE: 12px; MARGIN-BOTTOM: 1em; FONT-FAMILY: arial, helvetica, sans-serif; MARGIN-TOP: 0px; COLOR: #a7a7a7; TEXT-ALIGN: left; LINE-HEIGHT: 19px; BACKGROUND-COLOR: transparent; mso-line-height-rule: exactly" align="left"><strong><strong><span style="FONT-SIZE: 18px; COLOR: #203045; LINE-HEIGHT: 28px">10TH DECEMBER 2021 1PM - 10PM</span></strong></strong><br>

</p><p style="FONT-SIZE: 12px; MARGIN-BOTTOM: 1em; FONT-FAMILY: arial, helvetica, sans-serif; MARGIN-TOP: 0px; COLOR: #a7a7a7; TEXT-ALIGN: left; LINE-HEIGHT: 19px; BACKGROUND-COLOR: transparent; mso-line-height-rule: exactly" align="left"><span style="FONT-SIZE: 14px; COLOR: #203045; LINE-HEIGHT: 22px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. justo convallis luctus rutrum, erat nulla fermentum diam.</span><br>

<a title="" style="TEXT-DECORATION: none; COLOR: #c28607" href="https://agha.com.au/" target="_blank"><strong><span style="FONT-SIZE: 14px; COLOR: #9badba; LINE-HEIGHT: 22px">URL&nbsp;here</span></strong></a>&nbsp;&nbsp;&nbsp; <strong><span style="FONT-SIZE: 14px; COLOR: #9badba; LINE-HEIGHT: 22px">EMAIL here</span></strong></p>

<!--[if gte mso 12]>

    <table cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td align="left">

<![endif]-->

<table class="imgtable" style="MARGIN-LEFT: 0px; MARGIN-RIGHT: auto" cellspacing="0" cellpadding="0" border="0">

<tbody><tr>

<td style="PADDING-BOTTOM: 5px; PADDING-TOP: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px" align="center">

<table cellspacing="0" cellpadding="0" border="0">

<tbody><tr>

<td style="BORDER-TOP: medium none; BORDER-RIGHT: medium none; BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BACKGROUND-COLOR: transparent"><img style="BORDER-TOP: medium none; BORDER-RIGHT: medium none; BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; DISPLAY: block" alt="" src="https://mailchef.s3.amazonaws.com/uploads/mailstyler/images/ec635276-9a4c-4c69-9f80-1a4b833119aa/A3CEE4A3-6C5A-96A3-BDFF-795B7E59C789_Image_3_93bcc965013b4bb3aa91eca194060d75.jpg" width="475" hspace="0" vspace="0"></td>

</tr>

</tbody></table>

</td>

</tr>

</tbody></table>

<!--[if gte mso 12]>

    </td></tr></table>

<![endif]-->

<p style="FONT-SIZE: 12px; MARGIN-BOTTOM: 1em; FONT-FAMILY: arial, helvetica, sans-serif; MARGIN-TOP: 0px; COLOR: #a7a7a7; TEXT-ALIGN: left; LINE-HEIGHT: 19px; BACKGROUND-COLOR: transparent; mso-line-height-rule: exactly" align="left"><strong><strong><span style="FONT-SIZE: 18px; COLOR: #203045; LINE-HEIGHT: 28px">WHATS ON 3 THE BIGGEST NEPEAN EVENT | 18TH DECEMBER 2021 1PM - 10PM</span></strong></strong><br>

<span style="FONT-SIZE: 14px; COLOR: #203045; LINE-HEIGHT: 22px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. justo convallis luctus rutrum, erat nulla fermentum diam.<br>

<a title="" style="TEXT-DECORATION: none; COLOR: #c28607" href="https://agha.com.au/" target="_blank"><strong><span style="FONT-SIZE: 14px; COLOR: #9badba; LINE-HEIGHT: 22px">URL&nbsp;here</span></strong></a>&nbsp;&nbsp;&nbsp; <strong><span style="FONT-SIZE: 14px; COLOR: #9badba; LINE-HEIGHT: 22px">EMAIL here</span></strong></span></p>

</th>

<th class="contenttd" style="BORDER-TOP: medium none; BORDER-RIGHT: medium none; WIDTH: 300px; VERTICAL-ALIGN: top; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 5px; BORDER-LEFT: medium none; PADDING-RIGHT: 0px; BACKGROUND-COLOR: transparent">

<p style="FONT-SIZE: 14px; MARGIN-BOTTOM: 0px; FONT-FAMILY: arial, helvetica, sans-serif; MARGIN-TOP: 0px; COLOR: #a7a7a7; TEXT-ALIGN: left; LINE-HEIGHT: 22px; BACKGROUND-COLOR: transparent; mso-line-height-rule: exactly" align="left">ADVERTISEMENT</p>

<!--[if gte mso 12]>

    <table cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td align="center">

<![endif]-->

<table class="imgtable" style="MARGIN: 0px auto" cellspacing="0" cellpadding="0" align="center" border="0">

<tbody><tr>

<td style="PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px" align="center">

<table cellspacing="0" cellpadding="0" border="0">

<tbody><tr>

<td style="BORDER-TOP: medium none; BORDER-RIGHT: medium none; BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BACKGROUND-COLOR: transparent"><a href="https://agha.com.au/" target="_blank"><img style="BORDER-TOP: medium none; BORDER-RIGHT: medium none; BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; DISPLAY: block" alt="" src="https://mailchef.s3.amazonaws.com/uploads/mailstyler/images/ec635276-9a4c-4c69-9f80-1a4b833119aa/E8172B39-7DAD-3F1C-4AA0-49F1EB82CFA5_Image_4_eeafaf10da6c43848fc8a7ba8f293cc4.jpg" width="300" hspace="0" vspace="0"></a></td>

</tr>

</tbody></table>

</td>

</tr>

</tbody></table>

<!--[if gte mso 12]>

    </td></tr></table>

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

</tr>

</tbody></table>

</th>

</tr>

</tbody></table>

</td>

</tr>

<tr>

<td style="FONT-SIZE: 0px; HEIGHT: 8px; LINE-HEIGHT: 0">&nbsp;</td>

</tr>

</tbody></table>
 
C

c1lonewolf

Joined
Jul 12, 2020
Messages
89
Reaction score
9
The code you posted is a bunch of garbage it's no wonder that it works at all on anything.
"show 1 image size on desktop and another image size on mobile responsive devices."
most of this is done using the html image tag and attributes then css to handle rest.

I tried figuring out the code you posted and I can't make heads or tails of it!
So here's my response:

This isn't HTML it's a mess and if an app created this I'd get rid of it!
1. You always start with the content! NOT the overall layout!
2. Learn HTML basics, especially table construction.
3. Nested tables do not go inside column headers(<th>..</th>).
4. If you use nested tables always apply comments so you know where the table begins and ends and what it's being used for. Then you can set styling according to the object itself.
5. Validators don't even allow the use of inline styles they convert them to psuedo classes, they're just one of many of the W3C's bs attribute screw ups. Inline styles were meant to get rid of all the layout and styling based attributes, but it actually removed the learning curve and system defaults(see form elements). Not to mention that CSS was really meant to aid document formaters(webmasters) by allowing them to create custom stylesheets for the "visually impaired" for tags such as 'italicized' and 'emphasized' text. Instead they made it a requirement that never should have been. HTML is a unique language unto itself and should not be defined by or depend on any other language!
6. No one uses all caps for styling properties anymore.
7. When using styling properties the last properties to be applied are: background, border and color. These are used for creating themes such as holiday or special occasions or special subjects such as nature or space related themes etc. where images, borders and color schemes are applied accordingly.

there are a lot of other problems with this code, but I'll keep that to myself...wouldn't want to seem like I'm blowin' a gasket again!

c1lonewolf
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with my responsive home page 2
menu bar and banner responsive issues....any guidance is appreciated! 0
I need help fixing my website 2
Help with Visual Lightbox: Scripts 2
Dropdown menu in a fixed navbar 2
Interfering CSS 1
Image shifts to the right when export the page to pdf 4
How to position the *tooltip* comment on these buttons? 9

Members online

No members online now.
Total: 35 (members: 0, guests: 35)
Robots: 444

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,055
Latest member
SlimSparkKetoACVReview

Latest Threads

Top