I am very new to CSS and i am trying to format an email using the cfmail tag. Below is the code:
<cfmail from="ABC#xyz.com"
to="#InvestigatorEmail#"
subject="Reminder #flagReminder#:: Incident Report: #report_number#">
<style>
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: ##fff
}
BODY {
FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
P {
FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
LI {
FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
A {
COLOR: ##0c479d; TEXT-DECORATION: none
}
A:hover {
BACKGROUND-COLOR: ##d3deed
}
table{
width:100%;
border-bottom:1px solid ##eee;
clear:both;
color:##000;
margin-bottom:10px;
FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
td {
padding:3px 4px;
vertical-align:top;
border-right:1px solid ##ddd;
color:##000;
font-weight:bold;
margin:0;
}
tr.odd {
background-color:##ffffcb
}
td.row-header {
width:100px;
font-weight:normal;
}
</style>
The below Incident Report has been assigned to you on #DateFormat(InvestigationAssigned_tms,"dd-mmm-yyyy")#</br></br>
<table width="720">
<tr>
<td>Incident Report #</td>
<td>Person Involved</td>
<td>Incident Description</td>
<td>Incident Location</td>
<td>Status</th>
<td>Investigation Assigned Date</td>
</tr>
<tr>
<td>#report_number#</td>
<td>#NameOfPersonInvolved#</td>
<td>#IncidentDescription#</td>
<td>#IncidentLocationCity#</td>
<td>#reportStatus#</td>
<td>#InvestigationAssigned_tms#</td>
</tr>
</table>
</cfmail>
All the data is coming from a query which i am looping through to send emails to different people. I need the data concerning one person to be displayed in a tabular format. I'm not sure what i am doing wrong here since this is the first time i am trying to use HTML/CSS in an email.
You need to use the type="html" attribute on the CFMAIL tag.
You might also want to consider wrapping your HTML content in the appropriate HTML and Body tags, as you would normally expect from a HTML template.
<cfmail from="ABC#xyz.com"
to="#InvestigatorEmail#"
subject="Reminder #flagReminder#:: Incident Report: #report_number#"
type="html">
<html>
<body>
<style>
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: ##fff
}
BODY {
FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
P {
FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
LI {
FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
A {
COLOR: ##0c479d; TEXT-DECORATION: none
}
A:hover {
BACKGROUND-COLOR: ##d3deed
}
table{
width:100%;
border-bottom:1px solid ##eee;
clear:both;
color:##000;
margin-bottom:10px;
FONT-SIZE: 11px; COLOR: ##595959; LINE-HEIGHT: 14px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
td {
padding:3px 4px;
vertical-align:top;
border-right:1px solid ##ddd;
color:##000;
font-weight:bold;
margin:0;
}
tr.odd {
background-color:##ffffcb
}
td.row-header {
width:100px;
font-weight:normal;
}
</style>
The below Incident Report has been assigned to you on #DateFormat(InvestigationAssigned_tms,"dd-mmm-yyyy")#</br></br>
<table width="720">
<tr>
<td>Incident Report #</td>
<td>Person Involved</td>
<td>Incident Description</td>
<td>Incident Location</td>
<td>Status</th>
<td>Investigation Assigned Date</td>
</tr>
<tr>
<td>#report_number#</td>
<td>#NameOfPersonInvolved#</td>
<td>#IncidentDescription#</td>
<td>#IncidentLocationCity#</td>
<td>#reportStatus#</td>
<td>#InvestigationAssigned_tms#</td>
</tr>
</table>
</body>
Hope this works for you?
Also note, that your issues may be due to the complexities of using CSS in emails...which is always a pain. CSS support in emails is limited and very basic. This isn't a ColdFusion / CFML issue, it's just the way HTML emails are today.
I would recommend moving your CSS to be 'inline' on the HTML tags themselves, as email clients often strip out the STYLE tags.
Mikey.
It's really simple, you just need to add a type to your cfmail tag. It would look something like
<cfmail to="recipient" from="sender" subject="subject" type="html"></cfmail>
Alternatively, you can specify the HTML part using the cfmailpart tag. This also allows you to specify a separate plaintext version for anyone who might be using a mail browser that won't render HTML.
e.g.
<cfmail>
<cfmailpart type="html">... your table here ...</cfmailpart>
<cfmailpart type="text">A plaintext version for everyone else</cfmailpart>
</cfmail>
NB: don't specify both the type="html" on the <cfmail> tag AND the <cfmailpart> tags together. Either do one or the other (it's simpler to just do the type="html" on the <cfmail> but I prefer to do both plaintext and HTML).
Related
eBay listings have a description field with 5000 character limit. It allows some html tags and the style attribute, but a lot of functionality is disabled.
When I insert an image that is too wide, eBay adds horizontal scrolling, which is a terrible user experience. I want an image that automatically resizes to the available width without triggering horizontal scrolling.
It seems the most widely used, and officially recommended method of resizing to different screens, is changing the viewport using the meta tag as described here.
Unfortunately this also changes the text size, and doesn't give the option to only scale one image and not others. Is this the only method? Or is there another way?
Or am I just using the meta tag wrong? (I put <meta name="viewport" content="width=device-width, initial-scale=1"> on the first line and wrote the rest of the description under it.)
This is the old code I've used for a template in the past. Using containers and remotely hosted CSS I was able to constrain images to the container wrapped around the whole template.
Unfortunately, as you know, eBay is a bit rubbish when it comes to responsive CSS, so this doesn't work well when under 1400px (I think).
I think you may be able to add some responsive media queries in order to stack this properly. However, this was created before the days of good responsive design I'm afraid.
CSS
#charset "utf-8";
/* CSS Document */
body {
background:#ffffff;
/*background-image:url(http://www.unbmedia.co.uk/Clients/UNB09029/bg.jpg);*/
background-position:center;
background-repeat:repeat-y;
}
/* Constrain Page Size */
.pagewidth {
width:954px;
text-align: centre;
left: 0;
margin:auto;
}
.pageminwidth {
text-align: left;
left: 0;
}
/* Footer Links with Country Names */
#sFooter {
text-align:center;
font-size:10px;
}
/* Ebay Footer Links */
span.ebay{
text-align:center;
}
#title{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
background:#548101;
color:#FFF;
padding:20px;
color:#777;
font-size:14px;
padding:3px;
font-family: serif;
letter-spacing: 0.5px;
font-weight: 100;
transition: all 0.3s;
}
#left-men-tit{
background: #18213E;
color:white;
font-size:14px;
padding:3px;
font-family: serif;
letter-spacing: 0.5px;
font-weight: 100;
transition: all 0.3s;
padding:10px;
}
#left-men{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#548101;
font-size:14px;
padding-left:12px;
padding-top:3px;
padding-bottom:3px;
}
#desc-title-list{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#548101;
font-size:12px;
}
#desc-desc-list{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif; color:#000000;
font-size:12px;
}
#product-desc-title{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif; color:#fff;
font-size:12px;
background-color:#548101;
padding:10px;
}
#product-desc{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#000000;
font-size:12px;
padding-left:5px;
}
td#product-desc{
border:thin;
border-color:#000;
}
table#desc{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
vertical-align:text-top;
}
#Main{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
vertical-align:top;
}
#main-holder{
font-size:0px;
}
/* Category Links */
a:link{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#777;
font-size:12px;
padding:3px;
text-decoration:none;
font-weight:bold;
}
a:visited{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#777;
font-size:12px;
padding:3px;
text-decoration:none;
font-weight:bold;
}
a:hover{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color: #18213E;
font-size:12px;
/*background:#024873;*/
text-decoration:none;
padding:3px;
font-weight:bold;
padding-left: 7px;
}
a:active{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#548101;
font-size:12px;
/*background:#024873;*/
text-decoration:none;
padding:3px;
font-weight:bold;
}
div#EBdescription{
font-size:0px;
}
/*** NEW LISTING TEMPLATE CSS ***/
.container{ width: 100%; max-width: 1100px; margin:auto;}
.ebayList-MainCol{float: right; width: 79%;}
.ebayList-LeftCol{float: right; width: 21%; margin-top: 162px;}
.ebayList-LeftCol h3{display: block; width: 87%; padding: 10px; margin: 0 0px 0 0; background: #18213E; color: white;
font-size: 16px; font-weight: 100; border: 1px solid black; width: 200px;}
.ebayList-LeftCol ul{ border: 1px solid #CCC; padding: 10px; margin: 0 10px 0 0; }
.ebayList-LeftCol li:before { content: ">"; padding-left: 5px; padding-right: 5px; margin-left: 0px; font-size: 14px;}
.ebayList-LeftCol li{ list-style: none; font-size: 14px; font-weight: 100; color:#777; padding: 10px 0;}
.ebayList-LeftCol li a:link{font-weight: 100; color:#777!important; font-family: serif; font-size: 14px; letter-spacing: 0.5px; transition: all 0.3s;}
.ebayList-LeftCol li a:hover{transition: all 0.3s;}
.ebayList-Header img{ width: 100%;}
.ebayList-ProductImage{width: 100%; text-align: center;}
.ebayList-ProductImage img{width: 100%; margin: auto; position: relative; text-align: center;}
.ebayList-ProductImage h1{ text-align: center; font-weight: 100; letter-spacing: 1px; font-size: 26px; color: #18213E; max-width: 900px; width: 100%; margin: 50px auto; }
.ebayList-Summary--Wrapper{float: left;}
.ebayList-Summary { width: 50%; float: left;}
.ebayList-Summary h2{ font-weight: 100; font-size: 16px; margin-top: 30px; border-bottom: 1px solid #ccc;padding-bottom: 10px;}
.ebayList-Summary p{ font-weight: 100; font-size: 14px; line-height: 22px;}
.ebayList-Spec { width: 48%; float: left; margin-bottom: 20px; margin-top: 0px; padding-left: 2%}
.ebayList-Spec h2{font-weight: 100; font-size: 16px; margin-top: 30px; border-bottom: 1px solid #ccc;padding-bottom: 10px;}
.ebayList-Spec dl{ width: 100%;}
.ebayList-Spec dt{ width: 30%; float: left; font-weight: bold; margin: 0; font-size: 14px; margin-bottom: 5px;}
.ebayList-Spec dd{ width: 70%; float: left; margin: 0; font-size: 14px; margin-bottom: 5px;}
.ebayList-Shipping-Returns { float: left; width: 50%; text-align: left; margin-bottom: 50px;}
.ebayList-Shipping-Returns img{width:98%;}
.ebayList-Shipping-Returns + .ebayList-Shipping-Returns{text-align: right;}
.ebayList-footer{float: left;}
.ebayList-footer img{ width: 100%;}
#media (max-width:1000px) {
.ebayList-LeftCol{ display: none; }
.ebayList-MainCol{ width: 100%; }
}
#media (max-width:700px) {
.ebayList-Spec{ width: 100%; padding-left: 0;}
.ebayList-Summary{ width: 100%; }
.ebayList-Shipping-Returns{ width: 100%; }
}
Listing Description:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://remote.littens.co.uk/listing.css" type="text/css">
<div class="container">
<div class="ebayList-Header"><img src="https://remote.littens.co.uk/header.png" alt=""></div>
<div class="ebayList-MainCol">
<div class="ebayList-ProductImage">
<h1>CHILDREN'S CHARACTER DESIGN BEANBAG BEAN BAG SEAT FILLED JUNIOR KIDS TODDLER</h1>
<img src="https://i.ebayimg.com/00/s/OTIxWDEyMjg=/z/tagAAOSw-vlViACO/$_57.JPG?set_id=880000500F">
</div>
<div class="ebayList-Summary--Wrapper">
<div class="ebayList-Summary">
<h2>Product Summary</h2>
<p>These are official novelty character licensed beanbags. These are filled to a perfect volume of 3 cubic ft, giving it an ideal structure and cushioning for the children to sit and enjoy. These would make an ideal piece of soft furniture in
a child’s room. All our products are fully compliant to the UK Furniture and Furnishings Regulations.</p>
<p>Please select the design you require from the drop down menu at the top.</p>
</div>
<div class="ebayList-Spec">
<h2>Specification</h2>
<dl>
<dt>Product</dt>
<dd>Beanbag</dd>
<dt>Brand</dt>
<dd>Assort</dd>
<dt>Version</dt>
<dd>Kids</dd>
<dt>Colour</dt>
<dd>Assort</dd>
<dt>Size</dt>
<dd>3 Cubic Feet</dd>
<dt>Dimensions</dt>
<dd>50x50x50cm</dd>
<dt>Includes</dt>
<dd>Beanbag & Filling</dd>
<dt>Material</dt>
<dd>100% Cotton / Polystyrene Bead</dd>
<dt>Washable</dt>
<dd>Cover Machine Washable</dd>
<dt>Suitability</dt>
<dd>Over 3 Years Of Age</dd>
</dl>
</div>
</div>
<div class="ebayList-Shipping-Returns">
<img src="https://remote.littens.co.uk/postage-info.png" alt="">
</div>
<div class="ebayList-Shipping-Returns">
<img src="https://remote.littens.co.uk/returns-policy.png" alt="">
</div>
</div>
<div class="ebayList-LeftCol">
<h3>Shop Categories</h3>
<ul>
<li>Duvets</li>
<li>Pillows</li>
<li>Mattress Toppers</li>
<li>Curtains</li>
<li>Duvet Covers Sets</li>
<li>Cushion Covers</li>
<li>Bedding Bundle Sets</li>
<li>Childrens Room</li>
<li>Nursery & Baby</li>
<li>Livingroom</li>
<li>Bed Linen</li>
<li>Bedspreads / Throws</li>
</ul>
</div>
<div class="ebayList-footer">
<img src="https://remote.littens.co.uk/footer.png" alt="footer">
</div>
</div>
Ok someone help me with creating my first website. The problem is that the stylesheet only applies partly.
My body
<div class="top1">
<h1 align="left" class="1logo">La Di Da DI</h1>
<h1 align="left" class="2logo">we likes to party</h1></div>
</body>
My stylesheet
html, body {
margin: 0px;
padding: 0px;
outline-offset: 0px;
background-color: #FFEAE5;
}
.mainTitle{
display: inline;
}
.2logo {
display: inline;
color: #FFEAE5;
font-size: 18px;
font-style: italic;
}
.1logo {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
display: inline;
color: #FFEAE5;
}
.top1 {
padding: 5px;
padding-top: 3px;
padding-left: 25px;
background-color: #F87666;
}
Stylesheet link
<link href="main.css" content"text/css" rel="stylesheet">
Using a number at the starting of the class is not a good practice because it takes a different approach to apply css to that kind of class...
Try to remove the numbers from the starting and put it at end like:
HTML
<div class="top1">
<h1 align="left" class="logo1">La Di Da DI</h1>
<h1 align="left" class="logo2">we likes to party</h1>
</div>
CSS
html,
body {
margin: 0px;
padding: 0px;
outline-offset: 0px;
background-color: #FFEAE5;
}
.mainTitle {
display: inline;
}
.logo2 {
display: inline;
color: #FFEAE5;
font-size: 18px;
font-style: italic;
}
.logo1 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
display: inline;
color: #FFEAE5;
}
.top1 {
padding: 5px;
padding-top: 3px;
padding-left: 25px;
background-color: #F87666;
}
If you are looking for a solution that how to apply css to class that starts from a number see this answer
The text blocks inside my table do not render correctly when viewed in Apple Mail on the iPhone. However, the text appears fine on Outlook 2003, 2007, 2010, and Apple Mail on the desktop. On the iPhone it does not reduce with the rest of the email. The body email appears to render correctly, but not the footer text (both of which are inside tables). The only other place the text does not appear correctly is the date line at the top.
This is the portion of the style sheet affecting the footer:
.FooterText {
font-size: 7pt;
font-family: Verdana, Geneva, sans-serif;
color: #FFFFFF;
vertical-align:top;
line-height: 11pt;
}
a.FooterLink {
font-size: 7ptem;
font-family: Verdana, Geneva, sans-serif;
text-decoration: none;
color: #FFFFFF
}
.RegisteredFooterText {
font-family: Verdana, Geneva, sans-serif;
font-size: 6pt;
font-style: normal;
text-align: center;
}
</style>
</head>
This is the code for the footer area:
<table width="650" border="0" cellspacing=0 cellpadding=0 bgcolor="#0064C8">
<tr>
<td width="2%"> </td>
<td width="19%" style="padding-top: 15px; padding-left: 10px; padding-right: 10px; padding-bottom:25px" class="FooterText"><p class ="FooterText"><strong>Unsubscribe</strong></p>
<p class="FooterText">You are receiving this email because you are a member of NALP.</p>
<p class="FooterText">To unsubscribe from this [email type] related emails, please
<unsubscribe style="text-decoration:none; color:#FFFFFF;">click here</unsubscribe>
.</p></td>
<td width="26%" style="padding-top: 15px; padding-left: 12px; padding-right: 10px; padding-bottom:25px" class ="FooterText"><p class ="FooterText"><strong>Discover NALP</strong></p>
<p>About NALP<br />
Conferences & Events<br />
Member Portal<br />
NALPconnect<br />
<a href="https://netforum.avectra.com/eweb/shopping/shopping.aspx?site=nalp&webcode=shopping&cart=0&shopsearchCat=Merchandise&sort=4&" class="FooterLink" >Bookstore</a><br />
Job Center</p></td>
<td width="28%" style="padding-top: 15px; padding-left: 10px; padding-right: 10px; padding-bottom:25px" class="FooterText"><p class="FooterText"><strong>About NALP</strong></p>
<p class="FooterText">NALP believes in fairness, facts, and the power of a diverse community. We work every day to be the best career services, recruitment, and professional development organization in the world because we want the lawyers and law students we serve to have an ethical recruiting system, employment data they can trust, and expert advisers to guide and support them in every stage of their careers.</p></td>
<td width="24%" style="padding-top: 15px; padding-left: 10px; padding-right: 10px; padding-bottom:25px" class="FooterText"><p class ="FooterText"><strong>Contact Us</strong></p>
<p class="FooterText">NALP<br />
1220 19th Street, NW<br />
Suite 401<br />
Washington, DC 20036</p></td>
</tr>
</table>
I've tried some a media query to reduce the font size but doesn't seem to work either:
#media only screen and (max-device-width: 480px) {
.FooterText {
font-size: 5pt;
font-family: Verdana, Geneva, sans-serif;
color: #FFFFFF;
vertical-align:top;
line-height: 8pt;
}
a.FooterLink {
font-size: 5pt;
font-family: Verdana, Geneva, sans-serif;
text-decoration: none;
color: #FFFFFF
}
.RegisteredFooterText {
font-family: Verdana, Geneva, sans-serif;
font-size: 4pt;
font-style: normal;
text-align: center;
}
}
First of all use text size in pixels, and add this in your style: -webkit-text-size-adjust:none;
ie:
.FooterText {
font-size: 5pt;
font-family: Verdana, Geneva, sans-serif;
color: #FFFFFF;
vertical-align:top;
line-height: 8pt;
-webkit-text-size-adjust:none;
}
I have a site using 2 css : one global, one page specific.
By default, I want to set a font type and size for everything, and adjust it depending on my needs on some pages.
So I have :
global.css
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
html {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
}
p {
text-align:justify;
margin:0px;
margin-bottom:10px;
}
a:link {
color: #993300;
text-decoration: none;
}
a:visited {
color:#993300;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline overline;
}
news.css
div.news{
width: 100%;
}
.news p.reminder {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #848484;
margin:0px;
margin-bottom:20px;
text-align: center;
position: relative;
top: -10px;
text-transform: uppercase;
}
.news p.reminder a:link, .news p.reminder a:visited {
color: #848484;
}
.news p.reminder a:hover {
}
HTML file
<HTML>
<HEAD>
<TITLE>the title</TITLE>
<LINK href="global.css" rel="stylesheet" type="text/css">
<LINK href="news.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<DIV class="news">
<P class="reminder">
some text
</P>
</DIV>
</BODY>
</HTML>
For a reason I don't see, the part :
.news p.reminder {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
is not taken into account.
If I remove the * definition from the global.css, it's OK. But if I keep it, that part does not override it.
How may I do to make this work ?
The reason you don't see it is because, while the paragraph does take on the styles you want, the * selector matches <A href="some_url"> and promptly changes them back.
You could modify the selector to match the a element too, but I'd set the font styling on the body instead of *
I have something like this:
My css is:
td{
font-size: medium;
font-family: Arial, Helvetica, sans-serif;
color: #271D01;
text-align: justify;
line-height: 1.3em;
font-weight: bold;
font-variant: small-caps;
min-width: 100px;
}
And my gsp:
...
<g:each var="it3" in="${program[it2.id]}">
<td id="c1">
<div id="c1_div"><u><g:formatDate format="HH:mm" date="${it3.prog_start}"/> - <g:formatDate format="HH:mm" date="${it3.prog_end}"/></u></div>
<div> </div>
<div>${it3.prog_title}</div>
</td>
</g:each>
...
How can i fix the hour-range in the div, so that no matter what size 'it3.prog_title' takes, the hour will display always in the same position, and also the title starting in same position. I'm expecting to do this via-css.
Have you tried vertical-align on the table cell?
td{
font-size: medium;
font-family: Arial, Helvetica, sans-serif;
color: #271D01;
text-align: justify;
line-height: 1.3em;
font-weight: bold;
font-variant: small-caps;
min-width: 100px;
vertical-align: top;
}
You would want to set vertical-align: top on your TD's, and then just setup classes for your div's to have a margin-top or top style to get the spacing you want between div's. This would also get rid of your spacer div and use CSS to position it how you want. And while I'm at it, removed the <u> tag as well and replaced it with CSS.
CSS:
td {
font-size: medium;
font-family: Arial, Helvetica, sans-serif;
color: #271D01;
text-align: justify;
line-height: 1.3em;
font-weight: bold;
font-variant: small-caps;
min-width: 100px;
vertical-align: top;
}
.time {
margin-top: 10px;
text-decoration: underline;
}
.title {
margin-top: 20px;
}
GSP:
...
<g:each var="it3" in="${program[it2.id]}">
<td id="c1">
<div id="c1_div" class="time"><g:formatDate format="HH:mm" date="${it3.prog_start}"/> - <g:formatDate format="HH:mm" date="${it3.prog_end}"/></div>
<div class="title">${it3.prog_title}</div>
</td>
</g:each>
...
You could make the hour-range relatively positioned to the top of the <td>