www.webdeveloper.com
Results 1 to 10 of 10

Thread: HTML Table fix spacing

  1. #1
    Join Date
    Mar 2014
    Posts
    25

    HTML Table fix spacing

    Hey there,

    is there any way to fix the spacing between the images and text boxes underneath them on this table layout? Link provided below. It may be a simple fix, just need someone's guidance.

    lifeandstyle.colincowie.com/notes/test-new.asp
    Last edited by jedaisoul; 07-30-2014 at 02:40 PM. Reason: link edited to plain text - so it does not look like you are spamming us.

  2. #2
    Join Date
    Mar 2014
    Posts
    25
    just a note: cellpadding and cellspacing is set to 0.

  3. #3
    Join Date
    Oct 2013
    Posts
    512
    What do you mean by "fix"? Would adding td {vertical-align:top;} to your styles help?

  4. #4
    Join Date
    May 2014
    Posts
    1,020
    Wow, that does a great job of proving what I've been saying about HTML 5's target audience... sorry to say that's not a good thing.

    What makes ANY of that tabular data -- you've got tables for layout, tables for nothing, fixed width design, static style in the markup, gibberish use of numbered headings, content cloaking (great way to get slapped down for abuse by the search engines BTW), images doing padding's job, tags and attributes like FONT, BGCOLOR, BORDER, ALIGN and TARGET that have no business on any website written after 1997 -- and on the whole a laundry list of how not to build a website any time over the past decade and a half.

    Simple fix? Try setting the images to display:block; BUT... just no... No.. Just no... That entire mess should be tossed in the trash and started over from scratch. I'd probably also dial back the clock a notch and skip the HTML 5 "for nothing" garbage so you have validation that actually means something. I mean thanks to the tables for layout the images for subsections aren't even near their associated content.

    Well, unless that's supposed to be an HTML e-mail, in which case all the modern stuff like the STYLE attribute needs to go as that doesn't exist in most mail clients. It's too outdated for a website, too modern for a e-mail.

    I mean, if that's supposed to be a website, this would be far more appropriate a markup for it:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <meta
    	name="viewport"
    	content="width=device-width; height=device-height; initial-scale=1.0"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Colin Cowie Weddings Newsletter
    </title>
    
    </head><body>
    
    <div id="top" class="widthWrapper">
    
    	<h1>
    		Colin Cowie <span>Weddings</span>
    	</h1>
    	
    	<ul class="socialLinks">
    		<li class="faceBook">
    			<a href="https://www.facebook.com/colincowieweddings">
    				Facebook
    			</a>
    		</li>
    		<li class="twitter">
    			<a href="https://twitter.com/colinweddings">
    				Twitter
    			</a>
    		</li>
    		<li class="pinterest">
    			<a href="http://pinterest.com/colinweddings/">
    				pInterest
    			</a>
    		</li>
    		<li class="instagram">
    			<a href="http://instagram.com/colinweddings/">
    				Instagram
    			</a>
    		</li>
    	</ul>
    	
    	<div id="content">
    	
    		<div class="topSection">
    			<h2>
    				<span>Real Wedding:</span>
    				Beaver Creek Colorado Wedding
    			</h2>
    			<img
    				src="images/main-img.jpg"
    				alt="A wedding picture"
    			/>
    			<p>
    				With a wedding hashtag like "Rockin' In The Rockies" you know this bride and groom had an amazing celebration we wish we were invited to. Held at the Ritz at Bachelor Gulch in Beaver Creek, Colorado, this blush pink and white themed wedding was packed with southern charm.
    			</p>
    		<!-- .subSection --></div>
    		
    		<hr />
    		
    		<img
    			src="images/debeers2-ad.jpg"
    			alt="Advertisement"
    			class="plate"
    			width="728"
    		/>
    		
    		<hr />
    		
    		<div class="feature">
    			<h2>Runaway Collection</h2>
    			<img
    				src="images/promo1-new.jpg" 
    				alt="Woman in bridal gown"
    			/>
    			<p>Berta, Fall 2014 Bridal Collection</p>
    		<!-- .feature --></div>
    		
    		<div class="feature">
    			<h2>Ideas &ampl How-To's:</h2>
    			<img
    				src="images/promo2-new.jpg" 
    				alt="A dinner placesetting"
    			/>
    			<p>Cut wedding costs with these 10 clever tips</p>
    		<!-- .feature --></div>
    		
    		<div class="feature">
    			<h2>Ask Colin:</h2>
    			<img
    				src="images/promo3-new.jpg"
    				alt="Couple holding hands with gaudy engagement ring"
    			/>
    			<p>What if i donít like the ring my fiance gave to me?</p>
    		<!-- .feature --></div>
    		
    		<div class="feature">
    			<h2>Ideas &amp; How-to's</h2>
    			<img
    				src="images/promo4-new.png"
    				alt="Poolside Patio with Gazebo and Arabian Lounger"
    			/>
    			<p>Summer Entertaining To-Do List</p>
    		<!-- .feature --></div>
    		
    		<hr />
    		
    		<img
    			src="images/hardrock-ad.jpg"
    			alt="advertisement"
    			class="plate"
    		/>
    		
    		<hr />
    		
    		<div id="footer">
    			<a class="signUp" href="https://cb.sailthru.com/join/1h4/weddingnotessignup?utm_source=CCW&amp;utm_medium=Email&amp;utm_content=signup&amp;utm_campaign=0223">
    				<strong>SIGN UP</strong> FOR THE NEWSLETTER
    			</a>
    			Follow us on:
    			<ul class="socialLinks">
    				<li class="faceBook">
    					<a href="https://www.facebook.com/colincowieweddings">
    						Facebook
    					</a>
    				</li>
    				<li class="twitter">
    					<a href="https://twitter.com/colinweddings">
    						Twitter
    					</a>
    				</li>
    				<li class="pinterest">
    					<a href="http://pinterest.com/colinweddings/">
    						pInterest
    					</a>
    				</li>
    				<li class="instagram">
    					<a href="http://instagram.com/colinweddings/">
    						Instagram
    					</a>
    				</li>
    			</ul>
    		<!-- #footer --></div>
    		
    	<!-- #content --></div>
    
    <!-- #top.widthWrapper --></div>
    
    </body></html>
    EVERYTHING else you were doing in there belonging in the CSS... If I have time later I may take a stab at showing you how that would be done... but there are some design elements like the perfect-width perfect-height content boxes that have no business in a web design in the first place -- they're just asking for trouble. ALSO not even sure that those content sections should even be H2 or headings whatsoever as they don't actually HAVE content. (why I tried to make them H2+P) -- headings are the start of subsections, if there's nothing after them as part of that section, it's not a heading.
    Last edited by deathshadow; 07-30-2014 at 12:43 PM.
    Java is to JavaScript as Ham is to Hamburger.

  5. #5
    Join Date
    Mar 2014
    Posts
    25
    Hi Kevin,

    I've tried the vertical-align: top, and that doesn't resolve the issue. If you see the link I provided, there's a small spacing between the image and the white boxes.

    http://lifeandstyle.colincowie.com/notes/test-new.asp

  6. #6
    Join Date
    Mar 2014
    Posts
    25
    Hi deathshadow,

    Thanks for your well-documented advice. This is being used for an HTML email, and its because of people like yourself that I come to get the best advice. If you believe there is a better practice, or simpler solution to construct this better, I'm all ears.

  7. #7
    Join Date
    May 2014
    Posts
    1,020
    Quote Originally Posted by bacosta13 View Post
    This is being used for an HTML email
    Ok, I was operating on the assumption it was a website, not an e-mail (though I did mention it as it had some of the telltales)

    HTML e-mails are a pain it the ass because CSS often doesn't work so you're better off using it, and most mail clients run browser engines or gutted down versions of same that woefully lag WAY behind even IE6's capabilities. Everything I just said in the previous post? FAGGEDABADDIT.

    You pretty much are restricted to HTML 3.2, and the handful of properties from 4 Tranny that are deprecated in 4 Strict. Everything wrong with writing a website 1997 style? That's what you have to do.

    That said, that's half the reason I don't send and don't advocate HTML in e-mails... the other half being a lot of hosts and server configs auto-flag them as spam since there's no legitimate reason for "real" e-mail to contain HTML in the first place.

    But if you're gonna do it, time to find Mr. Peabody and his boy Sherman... and sadly one of the best ways to see if your HTML e-mail is going to work? Test it in IE 5. (Thankfully IE11's 5 emulation isn't half bad...)

    So.... that typography style? Can't do that... that STYLE in body? Can't do that. Those STYLE attributes you're using? Can't do that. All those tags and attributes I said you shouldn't be using? those are ALL you can use. Hell, one even may end up resorting to using the CENTER tag. It also means there's no point in putting that GA code in there either, since there is no JavaScript in HTML e-mails. Even means those stupid TARGET attributes and images for padding serve a legitimate purpose

    Even so you've got a few more tables than I think are needed -- gimme a few and I'll see if I can't belt out a cleaner/more likely to work version of your mail. Fun times pretending it's 1997 again.

    -- edit -- and since you can't use display:block or vertical-align to fix the gap, the solution is going to be the VALIGN attribute. Also some of those spacer png could be removed if you used cellspacing.
    Last edited by deathshadow; 07-30-2014 at 02:18 PM.
    Java is to JavaScript as Ham is to Hamburger.

  8. #8
    Join Date
    Mar 2014
    Posts
    25
    LOL...Thanks. I must say the way you get into detail is very interesting...it just made my day a lot better.

    Thank you for your help.

  9. #9
    Join Date
    May 2014
    Posts
    1,020
    Ok, took a bit as I went out for dinner with friends first, but here it is:

    http://www.cutcodedown.com/for_other...ta13/mail.html

    That's how I'd code it... for those leery of the link:

    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=utf-8">
    <meta http-equiv="Content-Language" content="en">
    <title>Colin Cowie Weddings Newsletter</title>
    <!-- side note, many mail clients can't do three digit colors :( -->
    </head><body bgcolor="#FFFFFF"><center>
    <basefont face="arial,helvetica,sans-serif">
    <table width="759" cellpadding="0" cellspacing="15" border="0">
    	<tr>
    		<td align="right" width="485">
    			<a href="http://www.colincowieweddings.com/" target="_blank">
    				<img
    					src="http://www.colincowie.com/notes/notes-img/ccw-logo.png"
    					alt="Colin Cowie Weddings"
    					border="0"
    				>
    			</a>
    		</td>
    		<!--
    			oddball formatting here is to deal with our not being able to
    			turn off underlines in html e-mails, so we can't have whitespace
    			between elements!
    		-->
    		<td align="right"><a
    				href="https://www.facebook.com/colincowieweddings"
    				target="_blank"
    			><img
    				src="http://www.colincowie.com/notes/notes-img/facebook.png"
    				alt="Facebook Follow"
    				border="0"
    			></a> <a
    				href="https://twitter.com/colinweddings"
    				target="_blank"
    				border="0"
    			><img
    				src="http://www.colincowie.com/notes/notes-img/twitter.png"
    				alt="Twitter Follow"
    				border="0"
    			></a> <a
    				href="http://pinterest.com/colinweddings/"
    				target="_blank"
    				border="0"
    			><img
    				src="http://www.colincowie.com/notes/notes-img/pinterest.png"
    				alt="Pinterest Follow"
    				border="0"
    			></a> <a
    				href="http://instagram.com/colinweddings/"
    				target="_blank"
    			><img src="http://www.colincowie.com/notes/notes-img/instagram.png"
    				alt="Instagram Follow"
    				border="0"
    			></a></td>
    	</tr>
    </table>
    	
    <table width="759" cellpadding="0" cellspacing="15" border="0" bgcolor="#EBEBEB">
    	<tr>
    		<td align="center" bgcolor="#FFFFFF">
    			<img
    				src="http://www.colincowie.com/notes/notes-img/main-img.jpg"
    				border="0"
    				alt="A Wedding"
    			><br>
    			<br>
    			Real wedding: <b>BEAVER CREEK COLORADO WEDDING</b><br>
    			<br>
    			With a wedding hashtag like "Rockin' In The Rockies" you know this bride and groom had an amazing<br>
    			celebration we wish we were invited to. Held at the Ritz at Bachelor Gulch in Beaver Creek, Colorado,<br>
    			this blush pink and white themed wedding was packed with southern charm.
    			<br>&nbsp;
    		</td>
    	</tr><tr>
    		<td>
    			<img
    				src="http://www.colincowie.com/notes/notes-img/debeers2-ad.jpg"
    				width="728"
    				alt="Advertisement"
    			>
    		</td>
    	</tr><tr>
    		<td>
    			<table width="100%" cellpadding="0" cellspacing="0" border="0">
    				<tr>
    					<td valign="top" bgcolor="#FFFFFF">
    						<img
    							src="http://www.colincowie.com/notes/notes-img/promo1-new.jpg"
    							alt="Woman in Bridal Gown"
    							width="350"
    							border="0"
    						>
    					</td>
    					<td width="29" rowspan="2">&nbsp;</td>
    					<td valign="top" bgcolor="#FFFFFF">
    						<img
    							src="http://www.colincowie.com/notes/notes-img/promo2-new.jpg"
    							width="350"
    							border="0"
    						>
    					</td>
    				</tr><tr>
    					<td align="center" valign="middle" bgcolor="#FFFFFF">
    						<br>
    						RUNWAY COLLECTION:<br>
    						<b>BERTA, FALL 2014 BRIDAL COLLECTION</b>
    						<br>&nbsp;
    					</td>
    					<td align="center" valign="middle" bgcolor="#FFFFFF">
    						<br>
    						IDEA & HOW-TOS:<br>
    						<b>CUT WEDDING COSTS<br>WITH THESE 10 CLEVER TIPS</b>
    						<br>&nbsp;
    					</td>
    				</tr>
    			</table>
    		</td>
    	</tr><tr>
    		<td>
    			<table width="100%" cellpadding="0" cellspacing="0" border="0">
    				<tr>
    					<td valign="top" bgcolor="#FFFFFF">
    						<img
    							src="http://www.colincowie.com/notes/notes-img/promo3-new.jpg"
    							width="350"
    							border="0"
    						>
    					</td>
    					<td width="29" rowspan="2">&nbsp;</td>
    					<td valign="top" bgcolor="#FFFFFF">
    						<img
    							src="http://www.colincowie.com/notes/notes-img/promo4-new.jpg"
    							width="350"
    							border="0"
    						>
    					</td>
    				</tr><tr>
    					<td align="center" valign="middle" bgcolor="#FFFFFF">
    						<br>
    						ASK COLIN:<br>
    						<b>
    							WHAT IF I DON'T LIKE THE RING<br>
    							MY FIANCE GAVE TO ME?
    						</b>
    						<br>&nbsp;
    					</td>
    					<td align="center" valign="middle" bgcolor="#FFFFFF">
    						<br>
    						IDEA & HOW-TOS:<br>
    						<b>SUMMER ENTERTAINING<br>TO-DO LIST</b>
    						<br>&nbsp;
    					</td>
    				</tr>
    			</table>
    		</td>
    	</tr><tr>
    		<td>
    			<img
    				src="http://www.colincowie.com/notes/notes-img/hardrock-ad.jpg"
    				alt="advertisement"
    				width="728"
    				border="0"
    			>
    		</td>
    	</tr><tr>
    		<td>
    			<table width="100%" cellpadding="0" cellspacing="0" border="0">
    				<tr>
    					<td align="left" valign="middle">
    						<a
    							href="https://cb.sailthru.com/join/1h4/weddingnotessignup?utm_source=CCW&amp;utm_medium=Email&amp;utm_content=signup&amp;utm_campaign=0223"
    							target="_blank"
    						>
    							<b>SIGN UP</b> FOR THE NEWSLETTER
    						</a>
    					</td>
    					<td align="right" valign="middle">
    						Follow us on:
    					</td>
    					<td align="right" valign="middle" width="128">
    						<a
    							href="https://www.facebook.com/colincowieweddings"
    							target="_blank"
    						><img
    							src="http://www.colincowie.com/notes/notes-img/facebook.png"
    							alt="Facebook Follow"
    							border="0"
    							align="top"
    						></a> <a
    							href="https://twitter.com/colinweddings"
    							target="_blank"
    						><img
    							src="http://www.colincowie.com/notes/notes-img/twitter.png"
    							alt="Twitter Follow"
    							border="0"
    							align="middle"
    						></a> <a
    							href="http://pinterest.com/colinweddings/"
    							target="_blank"
    						><img
    							src="http://www.colincowie.com/notes/notes-img/pinterest.png"
    							alt="Pinterest Follow"
    							border="0"
    							align="middle"
    						></a> <a
    							href="http://instagram.com/colinweddings/"
    							target="_blank"
    						><img src="http://www.colincowie.com/notes/notes-img/instagram.png"
    							alt="Instagram Follow"
    							border="0"
    							align="middle"
    						></a></td>
    				</tr>
    			</table>
    		</td>
    	</tr>
    </table>
    						
    </center></body></html>
    Which sucks, but that's HTML e-mails in a nutshell. No such thing as CSS, no such thing as most of the new stuff from HTML 4 STRICT onwards... you have to make do with what it gives you. Only reason I gave it a 4 tranny doctype is the handful of in-between proprietary tags that are ... useful and supported in mail clients -- but were deprecated in STRICT.

    I tested it in thunderbird, Opera M2, and a ancient copy of Eudora, as well as Live and GMail, and it checks out.... which it should since it renders fine in IE11's IE5 emulation.

    I have a simple PHP test mailer set up for testing things like this, so I just point it at the content and send.

    Uses a few extra breaks, but gets rid of the spacer images at least so it'll load a hair faster.

    Now excuse me, I feel like I need a shower after that :P

    Hope this helps.
    Java is to JavaScript as Ham is to Hamburger.

  10. #10
    Join Date
    Mar 2014
    Posts
    25
    deathshadow, you are amazing....I gracefully thank you!

    I wish I had a teacher like yourself to teach me good practices like that. I hope I can stay in contact with you to gain knowledge and great advice from you.

    Thank you again and I hope you had a wonderful dinner.

Thread Information

Users Browsing this Thread

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

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