www.webdeveloper.com
Results 1 to 8 of 8

Thread: HTML email nested tables image left space

  1. #1
    Join Date
    May 2011
    Posts
    2

    Unhappy HTML email nested tables image left space

    Hi,

    I created HTML email, including nested tables. Everything works fine except one nested table. Here is my code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>#</title>
    <style media="all" type="text/css">
        table td {
            border-collapse: collapse;
        }
    </style>
    </head>
    <body>
    <table align="center" width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF">
    <tr>
    <td>
    <table width="640" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
    <tr>
    <td>
    <table width="640" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="display: block; border-spacing:0; font-size:0.0em;">
            <tr>
                <td rowspan="3" align="center" bgcolor="#ffffff" width="213" height="91">
                    <img src="http://s16.postimg.org/gm252smud/content_04_01.jpg" alt="content_04_01" border="0" width="213" height="91" style="display:block;" />
                </td>
                <td align="left">
                    <table width="61" border="0" cellpadding="0" cellspacing="0" style="display: block; border-spacing:0; font-size:0.0em;">
                        <tr>
                            <td></td>
                            <td rowspan="2" align="left">
                                <img src="http://s22.postimg.org/h9drw8eal/content_04_02_01.jpg" alt="content_04_02_01" width="61" height="30" style="display:block;" align="left" border="0" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" align="right" style="padding-top: 2px;">
                                <i style="font-family:Arial, Arial, Helvetica, sans-serif; font-size: 14px; color: #919191;">From:</i>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td rowspan="2" align="left">
                                <img src="http://s16.postimg.org/9cgkk389t/content_04_02_02.jpg" alt="content_04_02_02" width="61" height="30" style="display:block;" align="left" border="0" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" align="right" style="padding-top: 2px;">
                                <i style="font-family:Arial, Arial, Helvetica, sans-serif; font-size: 14px; color: #919191;">To:</i>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td rowspan="2" align="left">
                                <img src="http://s16.postimg.org/mungwdkf5/content_04_02_03.jpg" alt="content_04_02_03" width="61" height="31" style="display:block;" align="left" border="0" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" align="right" style="padding-top: 2px;">
                                <i style="font-family:Arial, Arial, Helvetica, sans-serif; font-size: 14px; color: #919191;">CODE:</i>
                            </td>
                        </tr>
                    </table>
                </td>
                <td align="left" valign="top" bgcolor="#ffffff" width="191" height="30">
                    <table width="191" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="display: block; border-spacing:0; font-size:0.0em;">
                        <tr>
                            <td></td>
                            <td rowspan="2">
                                <img src="http://s16.postimg.org/byw310zhh/content_04_03_01.jpg" alt="content_04_03_01" width="191" height="30" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" align="left" style="font-family:Arial, Arial, Helvetica, sans-serif; font-size: 17px; color: #3c3c3c; padding-top: 2px; padding-left: 18px;">Feki</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td rowspan="2">
                                <img src="http://s16.postimg.org/l5edob4px/content_04_03_02.jpg" alt="content_04_03_02" width="191" height="30"/>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" align="left" style="font-family:Arial, Arial, Helvetica, sans-serif; font-size: 17px; color: #3c3c3c; padding-top: 2px; padding-left: 18px;">Bobo</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td rowspan="2">
                                <img src="http://s16.postimg.org/q7vpj3e05/content_04_03_03.jpg" alt="content_04_03_03" width="191" height="31"/>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" align="left" style="font-family:Arial, Arial, Helvetica, sans-serif; font-size: 17px; color: #da3024; padding-top: 2px; padding-left: 18px;">123456789</td>
                        </tr>
                    </table>
                </td>
                <td rowspan="3" align="center" bgcolor="#ffffff" width="175" height="91">
                    <img src="http://s16.postimg.org/5ce0ll76p/content_04_04.jpg" alt="content_04_04" border="0" width="175" height="91" style="display:block;" />
                </td>
            </tr>
        </table>
    </td>
    </tr>
    </table>
    </body>
    </html>
    If you open this code in Safari or Gmail, there is left space near images in nested table. I'm really lost. I spent whole day but still didn't find solution. Can somebody solve this issue?

  2. #2
    Join Date
    Oct 2013
    Posts
    483
    First of all, way too much y2k table nesting.

    Second, I tried like hell to get that white line to disappear. No go. Don't know why. I suspect it has something to do with rowspan and colspan in the next nested table but that may be incorrect.

    Anyhow, this renders EXACTLY as your code (including the white line ) but with a lot less mess:
    HTML Code:
    <!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">
    <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>#</title>
    <style media="all" type="text/css">
        table, td {
            border-collapse: collapse;
    	padding: 0px;
    	margin: 0px;
    	vertical-align: top;
        }
        table {
    	display: block;
        }
        img {
    	border: 0px;
    	display: block;
        }
        #main {
    	width: 640px;
    	margin: auto;
        }
        #labels {
    	width: 61px;
        }
        #content {
    	width: 191px;
        }
        #leftcell {
    	background-image: url('http://s16.postimg.org/gm252smud/content_04_01.jpg');
    	width: 213px;
        }
        #rightcell {
    	background-image: url('http://s16.postimg.org/5ce0ll76p/content_04_04.jpg');
    	width: 175px;
        }
        .labels {
    	font-family: Arial, Helvetica, sans-serif;
    	font-style: italic;
    	font-size: 14px;
    	color: #919191;
    	padding-top: 8px;
    	text-align: right;
        }
        .content {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 17px;
    	color: #3c3c3c;
    	padding-top: 6px;
    	padding-left: 18px;
        }
        .code {
    	color: #da3024;
        }
    </style>
    </head>
    <body>
    
    <table id="main">
            <tr>
                <td id="leftcell"></td>
                <td>
                    <table id="labels">
                        <tr>
                            <td></td>
                            <td rowspan="2">
                                <img src="http://s22.postimg.org/h9drw8eal/content_04_02_01.jpg" alt="content_04_02_01" width="61" height="30" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" class="labels">From:</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td rowspan="2">
                                <img src="http://s16.postimg.org/9cgkk389t/content_04_02_02.jpg" alt="content_04_02_02" width="61" height="30" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" class="labels">To:</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td rowspan="2">
                                <img src="http://s16.postimg.org/mungwdkf5/content_04_02_03.jpg" alt="content_04_02_03" width="61" height="31" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" class="labels">CODE:</td>
                        </tr>
                    </table>
                </td>
                <td>
                    <table id="content">
                        <tr>
                            <td></td>
                            <td rowspan="2">
                                <img src="http://s16.postimg.org/byw310zhh/content_04_03_01.jpg" alt="content_04_03_01" width="191" height="30" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" class="content">Feki</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td rowspan="2">
                                <img src="http://s16.postimg.org/l5edob4px/content_04_03_02.jpg" alt="content_04_03_02" width="191" height="30"/>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" class="content">Bobo</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td rowspan="2">
                                <img src="http://s16.postimg.org/q7vpj3e05/content_04_03_03.jpg" alt="content_04_03_03" width="191" height="31"/>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" class="content code">123456789</td>
                        </tr>
                    </table>
                </td>
                <td id="rightcell"></td>
            </tr>
    </table>
    </body>
    </html>
    Now, what you really need to do to get rid of the white line is use the unsliced/undiced version of the image as the background for the entire table. If you don't have that image, stitch together the images you use in your code to come up with it (no, I absolutely will not do it for you). Then your code becomes very much simpler and the white line disappears. The following code should then work:

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>#</title>
    <style>
        #main {
    	width: 640px;
    	margin: auto;
            border-collapse: collapse;
    	font-family: Arial, Helvetica, sans-serif;
    	background-image: url('unsliced image');
        }
        .labels {
    	font-style: italic;
    	font-size: 14px;
    	color: #919191;
    	padding-top: 6px;
    	text-align: right;
    	width: 274px;
        }
        .content {
    	font-size: 17px;
    	color: #3c3c3c;
    	padding-top: 6px;
    	padding-left: 16px;
        }
        .code {
    	color: #da3024;
        }
    </style>
    </head>
    <body>
    
    <table id="main">
    	<tr>
                    <td class="labels">From:</td>
                    <td class="content">Feki</td>
    	</tr>
    	<tr>
    		<td class="labels">To:</td>
    		<td class="content">Bobo</td>
    	</tr>
    	<tr>
    		<td class="labels">CODE:</td>
    		<td class="content code">123456789</td>
    	</tr>
    </table>
    
    </body>
    </html>
    You will probably have to play around with paddings, etc. to get the text aligned the way you want. Left to right the above is pretty close to original. Top to bottom might need a little work. One of the advantages to this is that it reduces 8 HTTP requests for images to one. That and a lot less code. And it's a lot easier to understand what's happening where.

    In an ideal world you wouldn't even use a table for this. Check this out. It also assumes you have an unsliced version of the background image.
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>#</title>
    <style>
        #main {
    	width: 640px;
    	margin: auto;
    	font-family: Arial, Helvetica, sans-serif;
    	background-image: url('unsliced image');
        }
        #labels {
    	font-style: italic;
    	font-size: 14px;
    	color: #919191;
    	text-align: right;
    	width: 274px;
    	float: left;
    	padding-top: 3px;
    	line-height: 28px;
        }
        #content {
    	font-size: 17px;
    	color: #3c3c3c;
    	padding-left: 16px;
    	float: left;
    	line-height: 28px;
    	padding-top: 4px;
        }
        .code {
    	color: #da3024;
        }
    </style>
    </head>
    <body>
    
    <div id="main">
    	<div id="labels">
                    From:<br>
    		To:<br>
    		CODE:
    	</div>
    	<div id="content">
                    Feki<br>
    		Bobo<br>
    		<span class="code">123456789</span>
    	</div>
    </div>
    
    </body>
    </html>
    Dangerously close to your original (at least in text placement), no? Play with line-heights, margins, paddings, etc. to get an exact fit.

  3. #3
    Join Date
    May 2014
    Posts
    897
    Quote Originally Posted by Kevin2 View Post
    Anyhow, this renders EXACTLY as your code (including the white line ) but with a lot less mess:
    ... and unfortunately completely useless as a HTML e-mail, since most of that CSS is unsupported. The original does have too many tables for what it's doing, AND has all sorts of gaps in IE 6 and 5.5 which means it's GOING to be busted in Outlook (which barely even has HTML 4 support much less CSS even in the latest versions)... Fixing the IE gaps makes the Safari / Chrome ones worse -- but:

    The line exists because webkit and blink inhale the proverbial equine of short stature when it comes to table handling -- bothched CAPTIONS, inability to actually obey empty-cells behavior -- it's a mess.

    The "no difference between empty-cells show and hide" being the problem. The "trick" of using a empty TD next to a rowspan with a colspan after to make a IMG tag go behind the elements creates that 1 pixel gap. Playing with the alignments in a manner to fix legacy IE and make it proper HTML 3.2 (therein making it render 'right' in actual mail clients) just makes things worse in webkit/blink.

    But to be fair, on my machine by default ALL HTML e-mails are a busted mess filled with gaps, since CSS font-size is ignored and <font size=""> obeys the system metric... which alongside that a lot of mail servers use the presence of HTML to mark a mail as spam (like mine does) is why the PROPER answer would be to not use HTML in your e-mails in the first place... as there's no legitimate reason for a legitimate e-mail to need it.

    But, if you insist on doing it, you'll probably need to change how you are trying to style it -- there's a reason most HTML e-mails do NOT put images behind text, they put it AROUND text. It's either that, or live with the gaps. That trick to fake a background image is just not reliable... well, unless you do it for the WHOLE table.

    ... which... hang on, lemme see if I can come up with a better answer for doing that.
    Java is to JavaScript as Ham is to Hamburger.

  4. #4
    Join Date
    Oct 2013
    Posts
    483
    Then where were you yesterday when this was originally posted? I wouldn't have posted my crap code then.
    Last edited by Kevin2; 06-01-2014 at 09:10 PM.

  5. #5
    Join Date
    May 2014
    Posts
    897
    Hah, yeah... best answer? Stop chopping up that image.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en"><head>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    	<meta http-equiv="Content-Language" content="en">
     	<title>#</title>
    </head><body>
    	<table align=center width=640 cellpadding=0 cellspacing=0 border=0  bgcolor="#FFFFFF">
    		<tr>
    			<td></td>
    			<td rowspan=2 align=left valign=top>
    				<img src="images/codeBackground.jpg" alt="" width=640 height=90 border=0>
    			</td>
    		</tr><tr>
    			<td colspan=2 align=left valign=top>
    				<table cellpadding=0 cellspacing=0 border=0>
    					<tr>
    						<td align=right valign=middle height=30 width=280>
    							<i><font face="arial,helvetica,sans-serif" color="#919191" size=2>From:</font></i>
    						</td>
    						<td align=left valign=middle height=30>
    							<font face="arial,helvetica,sans-serif" color="#3C3C3C" size=4>&nbsp; Feki</font>
    						</td>
    					</tr><tr>
    						<td align=right valign=middle height=30 width=280>
    							<i><font face="arial,helvetica,sans-serif" color="#919191" size=2>To:</font></i>
    						</td>
    						<td align=left valign=middle height=30>
    							<font face="arial,helvetica,sans-serif" color="#3C3C3C" size=4>&nbsp; Bobo</font>
    						</td>
    					</tr><tr>
    						<td align=right valign=middle height=30 width=280>
    							<i><font face="arial,helvetica,sans-serif" color="#919191" size=2>CODE:</font></i>
    						</td>
    						<td align=left valign=middle height=30>
    							<font face="arial,helvetica,sans-serif" color="#DA3024" size=4>&nbsp; 123456789</font>
    						</td>
    					</tr>
    				</table>
    			</td>
    		</tr>
    	</table>
    </body></html>
    I put up a live demo here:
    http://www.cutcodedown.com/for_other...666/email.html

    Which needed a new image:
    http://www.cutcodedown.com/for_other...Background.jpg

    Since as a HTML e-mail you have to dial the clock back to HTML 3.2 with proprietary stuff adopted for 4 transitional (like face and bgcolor) I gutted out the 'unneccessary' quotes HTML 3.2 style.

    That should work as a HTML e-mail in just about every mail client and browser; ran a quick check in M2, an old copy of Eudora, Thunderbird and Outlook -- as well as the major current engines, and all the way back to IE 5.5 windows and 5.2 Mac, and it checks out.

    Don't want the gap, don't break up the image. Can't get simpler than that.

    Now if you'll excuse me, I feel like I need a shower after writing code like that... :P
    Java is to JavaScript as Ham is to Hamburger.

  6. #6
    Join Date
    May 2014
    Posts
    897
    Side note, the code could be greatly gutted down if modern browsers still supported BASEFONT. That's kind of a laugh if you think about it.

    That's going to be an issue moving forward that will rear it's ugly head more and more -- a lot of HTML 3.2 stuff no longer works in modern browsers; be fun when HTML 4 transitional starts to be in the same boat.

    Though that's unlikely what with HTML 5 basically being "The new transitional"
    Java is to JavaScript as Ham is to Hamburger.

  7. #7
    Join Date
    Jun 2014
    Posts
    1
    I got your problem is there you need to set col span size which equal to the your first table of column set this it will cover that space

  8. #8
    Join Date
    May 2014
    Posts
    897
    Quote Originally Posted by Rohit012 View Post
    I got your problem is there you need to set col span size which equal to the your first table of column set this it will cover that space
    Actually NO, that will introduce an even bigger GAP as the image will fail to go behind his text; That missing span to TD overlap is what lets IMG tags go behind the content in the first place. You remove that, no background images in pre HTML-4 browsers -- like most mail clients.

    It's a sneaky trick from the pre-CSS days, and technically exploiting a rendering bug.
    Java is to JavaScript as Ham is to Hamburger.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles