SitePoint Sponsor

User Tag List

Results 1 to 16 of 16

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Getting my head around tables...and cells

    I know, tables went the way of html styling, right? Unfortunately, not when you're writing an html email!

    I'm working on an adaptive email newsletter template but I've clearly not understood my tables correctly, because the 'feature story' in the example below isn't aligning with the rest of my articles...what am I doing wrong?

    On a side note (but equally confusing to myself), I'm aware there's no <td> to any of the <table class="contentTable"> on lines 93 or 145. This is basically because when I apply a <td> for the contentTable, the nested tables (class="articles", "asides") stop responding to the media query to form one column when the screen width is less than 480px. Any hand holding through this problem is much appreciated!

    I'm still learning and I'm pretty sure my code isn't as semantic as it ought to be, so feel free to point out any obvious best practice procedures that I've forgotten along the way...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		<!-- Facebook sharing information tags -->
    		<meta property="og:title" content="Illuminate issue X" />
    		<meta name="viewport" content="width=device-width">
    		<title>Illuminate issue X</title>
    		<style type="text/css">
    			/* Client-specific Styles */
    			#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
    			body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
    			body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
    
    			/* Reset Styles */
    			body{margin:0; padding:0;}
    			img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
    			table td{border-collapse:collapse;}
    			#backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}
    			
    			/* Smaller Screen Styles */
    			@media only screen and (max-width: 480px) {
    				table[id=backgroundTable]{
    					max-width:550px !important;
    					width:100% !important;
    			}		
    				table[id=newsletterWrapper],table[class=contentTable], table[class=asides]{ 
                		width:320px !important;
    				}
    				table[class=FollowUs]{
    					display:none;
    				}
    				img[class=hideable]{
    					display:none;
    				}
       			}	
       			.contentTable{
       				border:0;
       				width:550px;
       				padding:0;
       				cellspacing:0;
       			}
       			td{
       				padding:0 0 10px 10px;
       			}
       			.button{
       			background: #49A942;
    			padding-top: 6px;
    			padding-right: 10px;
    			padding-bottom: 6px;
    			padding-left: 10px;
    			color: #fff;
    			font-weight: bold;
    			text-decoration: none;
    			font-family: Helvetica, Arial, sans-serif;
    			}
    			.article img{
    			display: block;
    			}
       		</style>
    	</head>
    	<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
    		<center>
    			<table id="backgroundTable" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
    				<tr>
    					<td align="center" valign="top">
    						<table id="newsletterWrapper" border="0" cellpadding="0" cellspacing="0" height="100" width="550">
    							<tr>
    								<td align="center" valign="top">
    								<!-- // Newsletter Preheader \\ -->
    								<table class="contentTable">
    									<tr>
    										<td class="preheaderContent" valign="top">
    											<p>Use this area to offer a short teaser of the newsletter content. Text here will show in the preview area of some email clients.
    											</p>
    											<a class="button">Subscribe to future issues</a>
    											<a class="button">View&nbsp;online</a>
    											<a class="button">Download as .pdf</a>
    										</td>
    									</tr>
    								</table>
    								<!-- // Newsletter Masthead \\ -->
    								<!-- // Newsletter Call to Action \\ -->						
    								<table class="contentTable">
    									<tr>	
    										<td valign="top">
    											<p>Blurb about us and donation CTA
    											</p>
    											<a class="button">Donate now</a>
    										</td>
    									</tr>
    								</table>
    								<!-- // Newsletter articles \\ -->
    								<table class="contentTable">
    									<tr>
    										<table class="articles" cellpadding="0" cellspacing="0" width="310" align="left">
    											<tr>
    												<td valign="top">
    													<img src="http://placehold.it/120x100" alt="" title="" align="left" style="max-width:120px; max-height:100px; margin-bottom:0px; padding-right:10px;">
    													<h3>Research news 1</h3>
    													<p>At aut eum ut qui ates etur, quam ra quo tetur aperibusda dolore nihil id maiori con prem quossincient aut possusdandis re, occus dolorum et aut aut de voluptas es imus exceatu riatempore explictorit, in con etur soluptas peribus acest, quae volum ipiciet restius cillat ditaturit pos magnitaecea nonsequi rehendipiet moloribus modi officiis idelis plibust laborro corume il estiumet, senimporat.
    													</p>
    													<a class="button">Read more</a>	
    												</td>
    											</tr>
    											<tr>
    												<td valign="top">
    													<img src="http://placehold.it/120x100" alt="" title="" align="right" style="max-width:120px; max-height:100px; margin-bottom:0px; padding-left:10px;">
    													<h3>Community news 1</h3>
    													<p>At aut eum ut qui ates etur, quam ra quo tetur aperibusda dolore nihil id maiori con prem quossincient aut possusdandis re, occus dolorum et aut aut de voluptas es imus exceatu riatempore explictorit, in con etur soluptas peribus acest, quae volum ipiciet restius cillat ditaturit pos magnitaecea nonsequi rehendipiet moloribus modi officiis idelis plibust laborro corume il estiumet, senimporat.
    													</p>
    													<a class="button">Read more</a>	
    												</td>
    											</tr>
    										</table>
    										<table class="asides" cellpadding="0" cellspacing="0" width="220">
    											<tr>	
    												<td valign="top">
    													<h4>From the director</h4>
    													<p>At aut eum ut qui ates etur, quam ra quo tetur aperibusda dolore nihil id maiori con prem quossincient aut possusdandis re, occus dolorum et aut aut de voluptas es imus exceatu riatempore explictorit, in con etur soluptas peribus acest, quae volum ipiciet restius cillat ditaturit pos magnitaecea nonsequi rehendipiet moloribus modi officiis idelis plibust laborro corume il estiumet, senimporat.
    													</p>
    												</td>
    											</tr>
    											<tr>
    												<td valign="top">
    													<table class="FollowUs" cellpadding="0" cellspacing="0" width="220">
    														<tr>
    															<td>
    																<h4>Follow us</h4>
    															</td>
    														</tr>
    														<tr>
    															<td align="left" valign="middle" width="16">
    																<img src="facebook.jpg" alt="Facebook logo" title="Facebook" style="max-width:16px; max-height:16px; margin:0 !important;">
    															</td>
    															<td align="left" valign="middle" width="16">
    																<img src="twitter.jpg" alt="twitter logo" title="Twitter" style="max-width:16px; max-height:16px; margin:0 !important;">
    															</td>
    														</tr>
    													</table>
    												</td>
    											</tr>
    										</table>
    									</tr>
    								</table>
    								<table class="contentTable">
    									<tr>
    										<table class="articles" cellpadding="0" cellspacing="0" width="310" align="left">
    											<tr>
    												<td valign="top">
    													<img src="http://placehold.it/310x200" alt="" title="" align="left" style="max-width:310px; max-height:200px; margin-bottom:0px; padding-right:10px; padding-bottom:10px;">
    													<h3>Feature story</h3>
    													<p>At aut eum ut qui ates etur, quam ra quo tetur aperibusda dolore nihil id maiori con prem quossincient aut possusdandis re, occus dolorum et aut aut de voluptas es imus exceatu riatempore explictorit, in con etur soluptas peribus acest, quae volum ipiciet restius cillat ditaturit pos magnitaecea nonsequi rehendipiet moloribus modi officiis idelis plibust laborro corume il estiumet, senimporat.
    													</p>
    													<a class="button">Read more</a>	
    												</td>
    											</tr>
    										</table>
    										<table class="asides" cellpadding="0" cellspacing="0" width="220">
    											<tr>	
    												<td valign="top">
    													<img class="hideable" src="http://placehold.it/220x150" alt="" title="" align="left" style="max-width:220px; max-height:150px; margin-bottom:0px; padding-right:10px; padding-bottom:10px;">
    													<h4>Staff profile 1</h4>
    													<h5>Position of staff member</h5>
    													<a class="button">Read more</a>
    												</td>
    											</tr>
    											<tr>
    												<td valign="top">
    													<img class="hideable" src="http://placehold.it/220x150" alt="" title="" align="left" style="max-width:220px; max-height:150px; margin-bottom:0px; padding-right:10px; padding-bottom:10px;">
    													<h4>Staff profile 2</h4>
    													<h5>Position of staff member</h5>
    													<a class="button">Read more</a>
    												</td>
    											</tr>
    										</table>
    									</tr>
    								</table>
    								</td>
    							</tr>
    						</table>
    					</td>
    				</tr>
    			</table>
    		</center>
    	</body>
    </html>

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    cheli, you cannot arbitrarily drop the <td> tags. Tables do not function properly without them. They are not optional. Put them back, then approach the media query problem as a media query or other design problem, not a table problem that can be resolved by omitting required tags.

    On a side note, what browser are you using? How are you testing the layout of the newsletter?

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    @ronpat - I understand that the <td> aren't optional, my problem stems from the issue that I can't understand why the inclusion of the <td>s mean the media queries don't enact when the screen size reduces. I have been working from Campaign Monitor's excellent guide on responsive design, however when I try to 'follow at home' I'm not getting the same result. There's this chasm between my understanding of how the example works and applying that principle to my own code. I've found that the explanations people here on sitepoint have given often help me better understand what I ought to be doing to get the result I'm looking for.

    On your side note, I'm previewing my draft code in Chrome on a Mac. My general workflow is to do quick previews in this web browser, then run the code through an inline CSS tool and send out a test email to myself using a php code the IT department at work wrote for me. I've got access to Apple Mail and Outlook for Mac 2011 as well as Gmail in the browser and on an Android phone. For this template, I'm still at the stage of keeping it simple in Chrome though.

    @Stevie D yeah, I've got a lot of bruises from trying to write html emails! I'm likely much more stubborn than I am intelligent I honestly think by biggest problem is that I'm learning and I don't have a coding background so I often try to bridge the gap between my understanding of basic concepts (like how a table works) and the application of that in a relatively complicated layout such as this by reading a lot, trying to copy and then experimenting till I stumble on what works. The mess above is what results :s

    @Paul O'B I agree that designing with a 'desktop first' structure seems to be best for email, and this is how I've tried to code this template. I don't quite understand what you're suggesting in regards to display:block but thank you for the suggestion - I'll have a play with it to see if putting it in practice opens my eyes. I've tried modifying mailchimp's templates in the past but in this case the requirements were specific enough that I thought it might be simpler to just build from scratch (although I'm spending a lot of time analysing and learning from how others have done similar things)

    I'm quite a fan of pre-mailer although I too learnt early on to cut out the media queries before running it!

    ___

    So, let's ignore the issue of the media queries for the time being and concentrate on getting the base two column structure to work first. I'm still flummoxed on why the tables containing the newsletter preview, donation info and initial articles are contained nicely within the <table id="newsletterWrapper"> as I intended, but the table with feature story hasn't nested as I intended.

    Would you help me understand where am I going awry with my markup?

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    As ronpat says, you can't have tables without <td> ... the only things that a <tr> can directly contain are <th> and <td> cells, nothing else.

    I suspect that trying to combine responsive media queries with a table-based layout for email is putting you onto a hiding to nothing. The reason for using table-based layouts for emails is that most email clients have appalling poor support for CSS and there are many that can't cope with simple things like float, background-image, :hover and myriad other things that we just take for granted I would say the odds of software that is 20 years behind the CSS curve supporting media queries is somewhere around nil, and if you try to get media queries giving a consistent responsive design you will probably just end up doing this a lot

    Sorry I can't be more positive than that!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,553
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As Ron said put your td tags back in place and construct the layout as you want it to be for normal email clients but you should design for a fixed width of about 600px as responsive designs for email is not really appropriate.

    However you can then add media queries for smaller devices (mobile etc) as many of the mobile email clients will understand media queries and act accordingly.

    To convert tables into a single column just set the table to display:block and the td to display:block then they will behave just like normal sequential divs and you can style and arrange accordingly.

    I've just done this for a very complicated email and we put secondary content into the side column and then hid it for mobile devices and had a much simplified linear display. This seemed to work well in the iphone but of course there are many other devices out there as well so the simpler you make the design the better.

    If you look at the campaign monitor free templates you will see how they cater for these devices and you can always use their templates as a base and then modify to your needs. Once you have constructed the email then use an inline css tool to convert your styles all to inline styles (apart from the media queries of course).

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    When you say "nested", do you mean that the Feature Story should be in the left column and the two Staff Profiles should be to the right of the Feature Story?

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    @Ronpat, sort of! What I meant is that I've tried to structure the email as follows:

    Code:
    <table id="backgroundTable"> /* provides the background to the email */
       <table id="newsletterWrapper"> /* wraps the entire content of the email */
          <table class="contentTable"> /* this table is repeated as often as needed for each 'level' of content in the email i.e. there's three levels in my first posted code: teaser area + donation intro; research news 1+community news 1+From the director; Feature story + Staff profiles */
             <table class="articles"> </table>/* this is the most important information in the desktop version of the email. It takes precedent over any <table class="asides"> within the same <table class="contentTable"> */  
             <table class="asides"> </table>/* this is less important information in the desktop version of the email, however it's still important and takes precedence over any content below the <table class="contentTable"> it is nested within */ 
          </table>
       </table>
    </table>
    The reason I'm nesting the articles and tables within multiple content tables is so that I can mix up the content in the smaller screen view, instead of alternatives such as dropping the right hand 'column' below the left hand or hiding the right hand completely (I thought this article on intermixing content was good at describing the problem I'm tackling, even though HTML email requires a different approach).

    Is this a better way to explain what I'm trying to do?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,553
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    One of the reasons your layout is different when you add the td tags is that the tables become too wide to fit across the available space because the td elements have padding added so you either need to reduce the inner tables accordingly or enlarge the wrapper.

    Here's a rough version the td tags put back in and the inner tables made smaller.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       		<head>
       		<!-- Facebook sharing information tags -->
       		<meta property="og:title" content="Illuminate issue X" />
       		<meta name="viewport" content="width=device-width">
       		<title>Illuminate issue X</title>
       		<style type="text/css">
    /* Client-specific Styles */
    			#outlook a { padding:0; } /* Force Outlook to provide a "view in browser" button. */
    body { width:100% !important; }
    .ReadMsgBody { width:100%; }
    .ExternalClass { width:100%; } /* Force Hotmail to display emails at full width */
    body { -webkit-text-size-adjust:none; } /* Prevent Webkit platforms from changing default text sizes. */
    /* Reset Styles */
    			body {
    	margin:0;
    	padding:0;
    }
    img {
    	border:0;
    	height:auto;
    	line-height:100%;
    	outline:none;
    	text-decoration:none;
    }
    table td { border-collapse:collapse; }
    #backgroundTable {
    	height:100% !important;
    	margin:0;
    	padding:0;
    	width:100% !important;
    }
    			
    			/* Smaller Screen Styles */
    			@media only screen and (max-width: 480px) {
    table[id=backgroundTable] {
    	max-width:550px !important;
    	width:100% !important;
    }
    table[id=newsletterWrapper], table[class=contentTable], table[class=asides] { width:320px !important; }
    table[class=FollowUs] { display:none; }
    img[class=hideable] { display:none; }
    }
    .contentTable {
    	border:0;
    	width:550px;
    	padding:0;
    	cellspacing:0;
    }
    td { padding:0 0 10px 10px; }
    .button {
    	background: #49A942;
    	padding-top: 6px;
    	padding-right: 10px;
    	padding-bottom: 6px;
    	padding-left: 10px;
    	color: #fff;
    	font-weight: bold;
    	text-decoration: none;
    	font-family: Helvetica, Arial, sans-serif;
    }
    .article img { display: block; }
    </style>
       		</head>
       		<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
    					<center>
    							<table id="backgroundTable" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
    									<tr>
    											<td align="center" valign="top"><table id="newsletterWrapper" border="0" cellpadding="0" cellspacing="0" height="100" width="550">
    															<tr>
    															<td align="center" valign="top"><!-- // Newsletter Preheader \\ -->
    																			
    																			<table class="contentTable">
    																			<tr>
    																							<td class="preheaderContent" valign="top"><p>Use this area to offer a short teaser of the newsletter content. Text here will show in the preview area of some email clients. </p>
    																							<a class="button">Subscribe to future issues</a> <a class="button">View&nbsp;online</a> <a class="button">Download as .pdf</a></td>
    																					</tr>
    																	</table>
    																			
    																			<!-- // Newsletter Masthead \\ --> 
    																			<!-- // Newsletter Call to Action \\ -->
    																			
    																		
    																		<table class="contentTable">
    																			<tr>
    																							<td valign="top"><p>Blurb about us and donation CTA </p>
    																							<a class="button">Donate now</a></td>
    																					</tr>
    																	</table>
    																			
    																			<!-- // Newsletter articles \\ -->
    																			
    																			<table class="contentTable">
    																			<tr>
    																							<td>
    																							<table class="articles" cellpadding="0" cellspacing="0" width="310" align="left">
    																											<tr>
    																											<td valign="top"><img src="http://placehold.it/120x100" alt="" title="" align="left" style="max-width:120px; max-height:100px; margin-bottom:0px; padding-right:10px;" />
    																															<h3>Research news 1</h3>
    																															<p>At aut eum ut qui ates etur, quam ra quo tetur aperibusda dolore nihil id maiori con prem quossincient aut possusdandis re, occus dolorum et aut aut de voluptas es imus exceatu riatempore explictorit, in con etur soluptas peribus acest, quae volum ipiciet restius cillat ditaturit pos magnitaecea nonsequi rehendipiet moloribus modi officiis idelis plibust laborro corume il estiumet, senimporat. </p>
    																															<a class="button">Read more</a></td>
    																									</tr>
    																											<tr>
    																											<td valign="top"><img src="http://placehold.it/120x100" alt="" title="" align="right" style="max-width:120px; max-height:100px; margin-bottom:0px; padding-left:10px;" />
    																															<h3>Community news 1</h3>
    																															<p>At aut eum ut qui ates etur, quam ra quo tetur aperibusda dolore nihil id maiori con prem quossincient aut possusdandis re, occus dolorum et aut aut de voluptas es imus exceatu riatempore explictorit, in con etur soluptas peribus acest, quae volum ipiciet restius cillat ditaturit pos magnitaecea nonsequi rehendipiet moloribus modi officiis idelis plibust laborro corume il estiumet, senimporat. </p>
    																															<a class="button">Read more</a></td>
    																									</tr>
    																									</table>
    																							<table class="asides" cellpadding="0" cellspacing="0" width="200">
    																											<tr>
    																											<td valign="top"><h4>From the director</h4>
    																															<p>At aut eum ut qui ates etur, quam ra quo tetur aperibusda dolore nihil id maiori con prem quossincient aut possusdandis re, occus dolorum et aut aut de voluptas es imus exceatu riatempore explictorit, in con etur soluptas peribus acest, quae volum ipiciet restius cillat ditaturit pos magnitaecea nonsequi rehendipiet moloribus modi officiis idelis plibust laborro corume il estiumet, senimporat. </p></td>
    																									</tr>
    																											<tr>
    																											<td valign="top"><table class="FollowUs" cellpadding="0" cellspacing="0" width="200">
    																															<tr>
    																															<td><h4>Follow us</h4></td>
    																													</tr>
    																															<tr>
    																															<td align="left" valign="middle" width="16"><img src="facebook.jpg" alt="Facebook logo" title="Facebook" style="max-width:16px; max-height:16px; margin:0 !important;" /></td>
    																															<td align="left" valign="middle" width="16"><img src="twitter.jpg" alt="twitter logo" title="Twitter" style="max-width:16px; max-height:16px; margin:0 !important;" /></td>
    																													</tr>
    																													</table></td>
    																									</tr>
    																									</table></td>
    																					</tr>
    																	</table>
    																	<table class="contentTable">
    																			<tr>
    																							<td><table class="articles" cellpadding="0" cellspacing="0" width="310" align="left">
    																											<tr>
    																											<td valign="top"><img src="http://placehold.it/310x200" alt="" title="" align="left" style="max-width:310px; max-height:200px; margin-bottom:0px; padding-right:10px; padding-bottom:10px;" />
    																															<h3>Feature story</h3>
    																															<p>At aut eum ut qui ates etur, quam ra quo tetur aperibusda dolore nihil id maiori con prem quossincient aut possusdandis re, occus dolorum et aut aut de voluptas es imus exceatu riatempore explictorit, in con etur soluptas peribus acest, quae volum ipiciet restius cillat ditaturit pos magnitaecea nonsequi rehendipiet moloribus modi officiis idelis plibust laborro corume il estiumet, senimporat. </p>
    																															<a class="button">Read more</a></td>
    																									</tr>
    																									</table>
    																							<table class="asides" cellpadding="0" cellspacing="0" width="200">
    																											<tr>
    																											<td valign="top"><img class="hideable" src="http://placehold.it/220x150" alt="" title="" align="left" style="max-width:220px; max-height:150px; margin-bottom:0px; padding-right:10px; padding-bottom:10px;" />
    																															<h4>Staff profile 1</h4>
    																															<h5>Position of staff member</h5>
    																															<a class="button">Read more</a></td>
    																									</tr>
    																											<tr>
    																											<td valign="top"><img class="hideable" src="http://placehold.it/220x150" alt="" title="" align="left" style="max-width:220px; max-height:150px; margin-bottom:0px; padding-right:10px; padding-bottom:10px;" />
    																															<h4>Staff profile 2</h4>
    																															<h5>Position of staff member</h5>
    																															<a class="button">Read more</a></td>
    																									</tr>
    																									</table></td>
    																					</tr>
    																	</table></td>
    													</tr>
    													</table>
    													<!-- end newsletter wrapper --></td>
    									</tr>
    							</table>
    					</center>
    </body>
    </html>

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    cheli, Just for fun....

    I did not try to use your basic code. Just played with the idea of tables that can be floated and used very, very basic table construction.

    These tables are floated using css styles, & there is only one align="" and that is on the outer table. No images are floated. Because it was an experiment, there are classes everywhere and no attempt was made to consolidate them or make it into a reusable "template". This was just for fun.

    This example will work in a browser, but unlikely to work in a mail client. I didn't leave enough extra room around things for old mail client weirdness.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1048709-Using-display-block
    Thread: Using display: block
    2013.04.29 01:28
    cheli
    -->
    <head>
        <title>cheli - newsletter2</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    body {
        padding:0;
        margin:20px 0;
    }
    h2 {
        font-size:1.25em;
        font-weight:bold;
    }
    h3 {
        font-size:1.1em;
        font-weight:bold;
        margin:.75em 0;
    }
    table {
        border-spacing:0;
        background-color:#eaf5ff;
    }
    .outer {
        border:2px solid #ccc;
    }
    .donate,
    .newsitem,
    .director,
    .feature,
    .profile {
        border-top:1px dotted #aaa;
    }
    .newsitem,
    .feature {
        border-right:1px dotted #aaa;
    }
    .teaser,
    .donate,
    .newsitem,
    .director,
    .feature,
    .profile {
        border-spacing:4px 4px;
    }
    td {
        padding:0px;
    }
    img {
        display:block;
        background-color:#ddd;
        border:0 none;
    }
    p {
        line-height:1.2em;
        margin:.2em 0;
    }
    .button {
        display:inline-block;
        background:#49A942;
        padding-top:6px;
        padding-right:10px;
        padding-bottom:6px;
        padding-left:10px;
        color:#fff;
        font-weight:bold;
        text-decoration:none;
        font-family:Helvetica, Arial, sans-serif;
        cursor:pointer;
        margin-top:4px;
    }
    .button.readmore {
        display:none;
    }
    a {
        display:inline-block;
    }
    @media only screen and (max-width:570px) {
        .outer,
        .newscol,
        .newsitem,
        .newshead,
        .newstext,
        .director,
        .feature,
        .profiles,
        .profile {
            width:100%;
        }
        .newsitem,
        .feature {
            border-right:0 none;
        }
    }
    @media only screen and (max-width:400px) {
        .button {
            display:inline-block;
        }
        .newscol p,
        .director p,
        .feature p,
        .profiles p {
            display:none;
        }
        .button.readmore {
            display:inline-block;
        }
    }
    
        </style>
    </head>
    <body>
    
    <table class="outer" align="center" width="554">
    <tr>
        <td>
            <table class="teaser" width="100%">
            <tr>
                <td>
                    <p>Use this area to offer a short teaser of the newsletter content. Text here will show in the preview area of some email clients.</p>
                    <a class="button">Subscribe to future issues</a>
                    <a class="button">View online</a>
                    <a class="button">Download as .pdf</a>
                </td>
            </tr>
            </table>
            <table class="donate" width="100%">
            <tr>
                <td>
                    <p>Blurb about us and donation CTA.</p>
                    <a class="button">Donate now</a>
                </td>
            </tr>
            </table>
    
            <table class="newscol" style="float:left">
            <tr>
                <td>
                    <table class="newsitem">
                    <tr>
                        <td>
                            <table class="newshead" width="300">
                            <tr>
                                <td width="1">
                                    <a href="#" target="_blank"><img src="http://placehold.it/120x100" alt="120 x 100" title="" width="120" height="100"></a>
                                </td>
                                <td>
                                    <h2>Research News 1</h2>
                                </td>
                            </tr>
                            </table>
                            <table class="newstext" width="300">
                            <tr>
                                <td>
                                    <a class="button readmore">Read more</a>
                                    <p>At aut eum ut qui ates etur, quam ra quo tetur aperibusda dolore nihil id maiori con prem quossincient aut possusdandis re, occus dolorum et aut aut de voluptas es imus exceatu riatempore explictorit, in con etur soluptas peribus acest, quae volum ipiciet restius cillat ditaturit pos magnitaecea nonsequi rehendipiet moloribus modi officiis idelis plibust laborro corume il estiumet, senimporat.</p>
                                </td>
                            </tr>
                            </table>
                        </td>
                    </tr>
                    </table>
                    <table class="newsitem">
                    <tr>
                        <td>
                            <table class="newshead" width="300">
                            <tr>
                                <td>
                                    <h2>Community News 1</h2>
                                </td>
                                <td width="1">
                                    <a href="#" target="_blank"><img src="http://placehold.it/120x100" alt="120 x 100" title="" width="120" height="100"></a>
                                </td>
                            </tr>
                            </table>
                            <table class="newstext" width="300">
                            <tr>
                                <td>
                                    <a class="button readmore">Read more</a>
                                    <p>At aut eum ut qui ates etur, quam ra quo tetur aperibusda dolore nihil id maiori con prem quossincient aut possusdandis re, occus dolorum et aut aut de voluptas es imus exceatu riatempore explictorit, in con etur soluptas peribus acest, quae volum ipiciet restius cillat ditaturit pos magnitaecea nonsequi rehendipiet moloribus modi officiis idelis plibust laborro corume il estiumet, senimporat.</p>
                                </td>
                            </tr>
                            </table>
                        </td>
                    </tr>
                    </table>
                </td>
            </tr>
            </table>
    
            <table class="director" width="240" style="float:left">
            <tr>
                <td>
                    <h3>From the Director</h3>
                    <a class="button readmore">Read more</a>
                    <p>At aut eum ut qui ates etur, quam ra quo tetur aperibusda dolore nihil id maiori con prem quossincient aut possusdandis re, occus dolorum et aut aut de voluptas es imus exceatu riatempore explictorit, in con etur soluptas peribus acest, quae volum ipiciet restius cillat ditaturit pos magnitaecea nonsequi rehendipiet moloribus modi officiis idelis plibust laborro corume il estiumet, senimporat.</p>
                </td>
            </tr>
            </table>
    
            <table class="feature" width="310" style="clear:left;float:left">
            <tr>
                <td>
                    <a href="#" target="_blank"><img src="http://placehold.it/310x200" alt="310 x 200" title="" width="310" height="200"></a>
                    <h2>Feature Story</h2>
                    <a class="button readmore">Read more</a>
                    <p>At aut eum ut qui ates etur, quam ra quo tetur aperibusda dolore nihil id maiori con prem quossincient aut possusdandis re, occus dolorum et aut aut de voluptas es imus exceatu riatempore explictorit, in con etur soluptas peribus acest, quae volum ipiciet restius cillat ditaturit pos magnitaecea nonsequi rehendipiet moloribus modi officiis idelis plibust laborro corume il estiumet, senimporat.</p>
                </td>
            </tr>
            </table>
    
            <table class="profiles" width="228" style="float:left;">
            <tr>
                <td>
                    <table class="profile">
                    <tr>
                        <td>
                            <a href="#" target="_blank"><img src="http://placehold.it/220x150" alt="220 x 150" title="" width="220" height="150"></a>
                            <h3>Staff profile 1</h3>
                            <a class="button readmore">Read more</a>
                            <p>At aut eum ut qui ates etur, quam ra quo tetur</p>
                        </td>
                    </tr>
                    </table>
                    <table class="profile last">
                    <tr>
                        <td>
                            <a href="#" target="_blank"><img src="http://placehold.it/220x150" alt="220 x 150" title="" width="220" height="150"></a>
                            <h3>Staff profile 1</h3>
                            <a class="button readmore">Read more</a>
                            <p>At aut eum ut qui ates etur, quam ra quo tetur</p>
                        </td>
                    </tr>
                    </table>
                </td>
            </tr>
            </table>
        </td>
    </tr>
    </table>
    </body>
    </html>

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,553
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ronpat View Post

    This example will work in a browser, but unlikely to work in a mail client.
    Good work Ron

    All you need to is change all the float:left rules to align="left" instead and then it should work in most email clients. align="left" will do much the same as float:left and is recognised by email clients as it is old school code. Most email clients don't understand floats and don't understand positioning which is why tables are used to position things rather than using positioning rules or indeed margins.

    If no positioning is needed then tables aren't really required other than to hold the whole thing together. Blocks of text could in fact just be in divs etc.

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Thanks for dropping in, Paul. And thanks very much for the feedback. All that writing... don't know why it didn't dawn on me to replace the float:left with align="left". It works like a charm, just as you said. Of all people, I should remember "old school"

    Take care.

  12. #12
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    @ronpat, I'm sorry I had hoped I would be able to reply to you sooner. Thanks so much for sharing the results of you 'playtime'. It was really helpful just to see a different way of approaching and structuring the code, let alone your simple point that I need to adjust the size of the tables as I nest them. I had noticed they weren't vertically aligned and guessed this was the cause, but it never occurred to me that this would eventually 'break' the layout/nesting, so thank you for teaching me something new!

    I've started looking more carefully over your code and taking what I'm learning on board as I rework my own. Unfortunately this project is not the only one I'm working on so I haven't been able finish yet. I will come back and share once I have done it though.

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    If you want a bit more background on where Paul mentioned the display:block on the tables, Chris Coyier did an interesting experiment in "responsive tables" (I wouldn't actually use it on your production emails, just read it for background and be aware IE pukes on this... so this also means IE on Windows phones): http://css-tricks.com/responsive-data-tables/

  14. #14
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    @Stomme poes, thanks for the article suggestion! I love how well CSS tricks explains things, and it was also cool seeing the alternate solutions people had proposed. Thanks especially though for pointing out that this doesn't work too well on IE - at least a quarter of our readers (probably more, given the way email browsers are tested for) use Outlook 2007 or 2010...and that uses Microsoft Word to render HTML email so it probably pukes on this technique too

  15. #15
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    cheli, here's another resource "just in case" you don't have it bookmarked already...

    This page in the Campaign Monitor web site gives the compatibility of css commands in E-Mail clients.

    http://www.campaignmonitor.com/css/

  16. #16
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks @ronpat - I've seen that page, but I haven't read it yet so I'll make sure to have a look at it today. I tried to post the below last night but couldn't get it to process, perhaps cos it was such a long post with the code included so I've included a link to that below:

    • Thanks to @ronpat's brilliant example, my tables are experiencing less 'muffin top' and the media queries are likewise behaving themselves.
    • I'm a little nonplussed over the irregular distribution of the images in the 'follow us' section and why I can't get any borders to apply (not currently in the code, but I've tried them in a few different ways between articles)
    • I'm going to have to come up with a different solution for multiple buttons on one line as I can't use 'margin' (Outlook doesn't support it) to vertically distribute them nicely once we move down to a smaller screen. I'm thinking a completely different design approach will probably give a nicer user experience anyway.
    • I'm also going to have to rethink the 'Coming events', 'WEHI.TV', and Previous issues tables. I've got them aligning right which is great for content flow between screen sizes, but looks wrong from a styling point of view...
    • I've tried completely unsuccessfully to implement Campaign Monitor's progressive disclosure technique. *scratches head*


    It's a long way from finished, but thanks for helping me jump this hurdle!
    The current code is here.


Bookmarks

Posting Permissions

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