Help me fix the code

Ok I coded some of this code and some of it was coded by some one else.

.box {
    float: left;
    width: 284px;
    margin-left: 26px;
    margin-top: 10px;
    padding: 5px;
    border: 2px solid black;


<title>St. Peter's Episcopal Church - Weekend Update</title>

<body style="margin:0; padding:0; background:#ffffff; font-size:100%; font-family:Arial,Helvetica,sans-serif;">
<a name="top" id="top"></a>
<table id="main" width="700px" border="0" cellspacing="0" cellpadding="0" style="margin:0 auto; border:1px solid #000000;">
		<td align="center">
			<table id="header" width="700px" border="0" cellspacing="0" cellpadding="0">
					<td class="header" align="center"><img src=""  width="700" height="250" /></td>
			<!-- end header !-->
		<td style="font-size:1em; background:#ffffff; padding:10px;">
			<h1 style="font-size:2em; margin:10px 0 14px 0; padding:0;"><font color="red">May 17, 2018</h1>						<table id="one" border="0" cellpadding="0" width="680px" align="center">

								<th class="event" align="center" valign="top" colspan="2" style="padding:0 0 10px 0;">The Reverend Anne Ellsworth will be giving the message <br>at all Pentecost services this weekend.  Readings are:<br>
Acts 2:1-21<br>
Romans 8:22-27<br>
John 15:26-27; 16:4b-15<br>
Psalm 104:25-35, 37<br>
<b>The Chancel Choir will be singing at the 9:30 service.<br><br><font color="red">The weekend of May 19 and 20 is Pentecost.  Please remember to wear your traditional RED.</b><br><Br>The Celebration of Life for Barbara Thurber will be held on Saturday, May 26 at 10:00AM in the Sanctuary with a light lunch reception to follow in Celebration Hall.




								<th class="event" align="left" valign="top" colspan="2">Thursday Night Live (TNL) - Thursdays from 5:30 - 8:00 PM</th>
								<td colspan="2" valign="top" align="justify" style="padding:0 0 10px 0;">Please note, there will NOT be a youth meeting tonight Thursday, May 17th. Many students are in the middle of finals. Please join us next Thursday, May 24th for our end of year celebration. More details will be sent out early next week! For more information contact Liz Hengst or Selena Guzman.

								<th class="event" align="left" valign="top" colspan="2">SP Kids<br>Saturday at 5:00PM and Sunday at 9:30AM</th>
								<td colspan="2" valign="top" align="justify" style="padding:0 0 10px 0;">Join SP Kids this weekend for fun activities to celebrate Pentecost!
We are currently accepting registration forms for Carnival Kingdom VBS held July 9-13. Please visit the SP Kids table for more information. 


								<th class="event" align="left" valign="top" colspan="2">Renewal of Wedding Vows for Ed and Donna White<br>Sunday, May 27 at the 8:00AM service</th>
								<td colspan="2" valign="top" align="justify" style="padding:0 0 10px 0;">During the 8:00AM service on May 27, Ed and Donna White will renew their wedding vows in celebration of their 50th anniversary.  A continental breakfast reception will follow in Celebration Hall.  All are welcome to join in this glorious celebration.


								<th class="event" align="left" valign="top" colspan="2">Pete's Eats Parish Breakfast<br>1st Sunday of the Month from 8:45  -  11:00 AM</th>
								<td colspan="2" valign="top" align="justify" style="padding:0 0 10px 0;">Don't forget to join in the fellowship the first Sunday of every month for the Pete's Eats Parish Breakfast.  If you would like to be involved in this wonderful ministry they meet the second Wednesday of the month at 6:30PM or see Pat Hoover for more information.





						<h2 style="font-size:1.5em; margin:10px 0 10px 0; padding:0 0 4px 0; border-bottom:1px solid #000000;">Rector search</h2>
						<table id="middle2" border="0" cellpadding="0" style="width:680px;">

                    <div class="box"><font color="black"><b>Notes: </b><br> The Rector Search Committee would like to hear what questions you might have regarding the Rector Search. There are forms in the Narthex to submit and drop in the box. We will be replying with answers in the Messenger and on the Web page</font></div>

<div class="box 2"><font color="black"><b>Dates:  </b><br> May 21, 2018 at 6:30 PM. Next meeting <br> <br> <br><br><br> <br> <br> </font></div>

						<h2 style="font-size:1.5em; margin:10px 0 10px 0; padding:0 0 4px 0; border-bottom:1px solid #000000;">Save the Date</h2>
						<table id="middle2" border="0" cellpadding="0" style="width:680px;">

<tr><th class="event" align="left" valign="top" colspan="2"?>Daughters of the King  -  May 19 at 9:00AM<br></th>
<tr><th class="event" align="left" valign="top" colspan="2"?>Montessori Poker Night  -  May 19 at 5:30PM<br></th>
<tr><th class="event" align="left" valign="top" colspan="2"?>Montessori Graduation  -  May 25 at 10:30AM<br></th>
<tr><th class="event" align="left" valign="top" colspan="2"?>Men's Group Bible Study and Breakfast  -  May 26 at 6:45AM<br></th>
<tr><th class="event" align="left" valign="top" colspan="2"?>Barbara Thurber Celebration of Life  -  May 26 at 10:00AM<br></th>
<tr><th class="event" align="left" valign="top" colspan="2"?>Ed and Donna White Vow Renewal  -  May 27 at 8:00AM<br></th>
<tr><th class="event" align="left" valign="top" colspan="2"?>Family Promise Onsite  -  May 27 - June 2<br></th>
<tr><th class="event" align="left" valign="top" colspan="2"?>Office Closed for Memorial Day -  May 28<br></th>
<tr><th class="event" align="left" valign="top" colspan="2"?>Sacred Circle Dancing  -  June 6 at 8:45AM<br></th>
<tr><th class="event" align="left" valign="top" colspan="2"?>Vacation Bible School  -  July 9 - 13<br></th>

		<td style="font-size:0.6em; background:#ffffff; padding:10px; text-align:center">St. Peter's Episcopal Church<br />400 S. Old Litchfield Road<br />Litchfield Park, AZ 85340<br /><a href=""></a></td>

This is also in email form from a website that lets you customize your emails. its

It is difficult to know where to begin. You could start with the following:

The <style></style> section needs to go before the </head> tag, not after it.

Instead of using inline CSS, use classes (as you’ve done with box.

You have a class named event, but there is no CSS for it.

I shall leave it to someone else to speak of the evils of using tables for layout.

It sounds like this is for emails[quote=“cahengst02, post:1, topic:297845”]
lets you customize your emails

So tables are what’s needed here, maybe add an email tag to the thread title.

1 Like

I will. Html tables should only ever be used on websites for tabular data. That technique is years and years out of date. There are a number of tags you should be using instead, depending on the semantics of the content. And layout should be dealt with using CSS, where there are a number of methods such as grid layout, CSS display: table, flexbox and floats.

This isn’t a huge page so it shouldn’t be too much trouble to start with fixing this issue.

But as it was correctly pointed out, tables are still used for emails. I missed that part.

So are you telling me to leave it or try to fix it?
p.s. im kinda new to all this

I saw you said

but I didn’t realise this was the actual email. If it is an email then sadly you do need to use tables and inline CSS.

That being the case, I’m not clear what code you want to fix.

(Q) How and where is the code supposed to be used? What is it supposed to do?
The answer to that question should have been part of your initial post.

Have you taken an on-line HTML and CSS course? Or a formal class at a community college? If not, please allow me to encourage you to do so. As easy as it looks, HTML and CSS is not “plug-n-play” simple. You’ll save yourself a ton of grief by learning the basics and building on them rather than copying someone else’s code and trying to make it work. That’s why you are here, isn’t it?

From the opening post and the tag, I understand this is for an email.

(As I have no experience of HTML email, I’m not in a position to be of much help.)

I got that. But @cahengst02 doesn’t say what needs to be fixed… or does he want it converted to a web page? How is it “broken”?

If he wants to learn how to write HTML e-mails, then try some of these sites (don’t just copy and paste and expect it to work):

A good guide:

A SitePoint book: “Create Stunning HTML Email That Just Works! = Matthew Patterson”

If this is for email then i would say your quickest and possibly most reliable way is to signup for a free account on a mail provider like MailChimp and use their email builder. You won’t have to code anything as it’s wisiwyg.

Others may disagree but i think you are more likely to end up with a useable product than trying to get to grips with the complexities of email layouts in multiple browsers on multiple email clients. I’ve been doing this a long time and it is still not easy to get emails to behave how you would expect.

Additionally depending on where you are in the world you will have some sort of data protection to be aware of. Sending emails from you own account for example is open to accidentally sending everyones address to everyone else if you forget to BCC. Using something like Mailchimp will prevent this to a certain extent. You can also see stats like how many people opened it and what links they clicked on. People can also manage their subscription etc. MailChimp you can send 2000 email for free a month. Other email providers are out there i just happen to have used that one on occasions.


1 Like

It looks like he is already using a mail provider.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.