HTML - Border Around Email Body
Hello all,
Having always previously used Concep and Eloqua in design editor versions, I am now starting to need to work in HTML and picking it up as i go. I need to produce an email within our corporate template (email body in white in the centre of the page with grey background) but add a border to the outside of the white area to make it look like a certifiicate. I have set it up using the following code and whilst it looks perfect when i preview it in eloqua, through IE using notepad++ and in the outlook preview window but when it goes full screen in outlook the border moves to the outside of frame (grey area) not just the body of the email. Any help you can offer would be greatly appreciated (I am sure the script is messy as we just tend to copy existing templates and amend, am definitely thinking of booking an HTML course). Thanks in advance! HTML Code: <HTML><HEAD><TITLE>Infosecurity Magazine</TITLE><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <STYLE type=text/css>.ReadMsgBody { WIDTH: 100% } .ExternalClass { WIDTH: 100% } </STYLE> </HEAD> <BODY bgColor=#d7d7d7> <BODY bgColor=#d7d7d7><div <div style="width=600px; border-width: 4px; border-style: double; border-color:#f26722;"> <TABLE cellSpacing=0 cellPadding=0 width=615 align=center border=0> <TBODY> <TR> <TD vAlign=top align=left><A href="http://<elqdomain type=1/>/e/er?s=<span class=eloquaemail>siteid</span>&lid=94&elq=<span class=eloquaemail>recipientid</span>"></A></TD></TR> <TR> <TD vAlign=top align=left bgColor=#ffffff> <TABLE cellSpacing=0 cellPadding=0 width=615 border=0> <TBODY> <TR> <TD vAlign=top align=left> <P align=center><IMG alt=info-security-magazine src="http://www.intercalleurope.com/logos/3637_Infosecurity_image_with_Logo2.JPG" width=340 align=middle></P></TD></TR> <TR> <TD> <P style="TEXT-ALIGN: center" align=center size="2" color="is #F89910" face="arial" FONT><FONT color=#f89910 size=6><STRONG><U>Certificate of </U></STRONG></FONT></P> <P style="TEXT-ALIGN: center" align=center size="2" color="is #F89910" face="arial" FONT><FONT color=#f89910 size=6><STRONG><U>Continuing Professional Education</U></STRONG></FONT></P></TD></TR></TBODY></TABLE> <TABLE width=600> <TBODY> <TR> <TD align=middle> <P><FONT face=Arial></FONT> </P> <P><FONT face=Arial>This is to certify that</FONT></P></TD></TR> <TR> <TD align=middle><FONT face=Arial color=#f89910><I><B><SPAN class=eloquaemail>DC_Service_Notification___First_Name1</SPAN> <SPAN class=eloquaemail>DC_Service_Notification___Last_Name1</SPAN></FONT></SPAN><FONT face=Arial color=#f89910> </FONT><SPAN class=eloquaemail><FONT face=Arial color=#f89910></FONT></SPAN><FONT face=Arial color=#f89910></FONT></B></I></TD></TR> <TR> <TD> </TD></TR> <TR> <TD align=middle> <P><FONT face=Arial>Membership Number</FONT></P></TD></TR> <TR> <TD align=middle><FONT face=Arial color=#f89910><I><B><SPAN class=eloquaemail>DC_Service_Notification___Leader_PIN1</SPAN></FONT></SPAN><FONT face=Arial color=#f89910> </FONT></B></I></TD></TR> <TR> <TD></TD></TR> <TR> <TD> </TD></TR> <TR> <TD align=middle> <P><FONT face=Arial>Participated in the Infosecurity Magazine Webinar on</FONT></P></TD></TR> <TR> <TD align=middle><FONT face=Arial color=#f89910><I><B> <span class=eloquaemail>DC_Service_Notification___Conference_code1</span><TD align=middle color="#f89910" face="Arial" <FONT><I></FONT><FONT face=Arial color=#f89910><STRONG> </STRONG></FONT> <P></P></I></TD></TR> <TR> <TD align=middle> <P><FONT face=Arial>Entitled</FONT><FONT face=Arial><BR></FONT><FONT face=Arial color=#f89910><I><B><SPAN class=eloquaemail>DC_Service_Notification___Toll_dial_in_Number1</SPAN></FONT></SPAN><FONT face=Arial color=#f26722> </FONT></P> <P></P></B></I></TD></TR> <TR> <TD> </TD></TR> <TR> <TD align=middle><FONT face=Arial>As part of the Infosecurity Magazine UK Summer Virtual Conference.</FONT> </TD></TR> <TR> <TD> </TD></TR> <TR> <TD align=middle><FONT color=#f89910><STRONG><FONT face=Arial>Based on attendance at this event, <BR></FONT><FONT face=Arial>the individual named herein </FONT></STRONG></FONT><FONT face=Arial color=#f89910><STRONG>is eligible to earn 1CPE <BR>in compliance with the (ISC)<SUP>2</SUP> continuing education policies.</STRONG></FONT> </TD></TR> <TR> <TD> </TD></TR> <TR> <TD> </TD></TR> <TR> <TD align=middle><A href="http://<elqdomain type=1/>/e/er?s=<span class=eloquaemail>siteid</span>&lid=1924&elq=<span class=eloquaemail>recipientid</span>"><FONT face=Arial color=#666666>infosecurity-magazine.com</A> <DIV></DIV></FONT></TD></TR> <TR> <TD> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></BODY></HTML> Similar TutorialsHi, I am using Dreamweaver CS3 to create a site, by default i have learnt that when you use an image as a link to another page, dreamweaver creates a coloured border around your linked image. I have since been able to get rid of this border by adding border="0" into my img tag however this now has caused my rollover not to work before clicking on the image to take you to the linked page. this is my code; any ideas how i can fix this? <td colspan="4"> <a href="About Us.html"><img src="images/About_Off.jpg" border="0" alt="About Us" name="Aboutus" width="120" height="64" id="Aboutus" onMouseOver="MM_swapImage('Image2','','images/About_On.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></td> <td colspan="6"> Any help would be greatly appreciated. Hi, I want to put in a form to get queries from the user, like so: Name: Email: Comments: 'Send' button and that it will send the information to my email address which is gmail? Thanks I'm new at html and dont understand why you need to use <body> what is the difference between <h1> Title </h1> <p> paragraph </p> and <h1> title </h1> <body <p> paragraph </p> </body> ok i was wondering whats wrong with my background could some1 tell me if thiers something wrong with my code, the problem i have is the background appearing i do everything it says to but it still dosent work <html xmlns="http.thewaywardgamer.com> <head> <title>the way of the gamer</title> </head><body> <html> <body background="image.jpg"> <p align="center"><font size="50"><font color="#cccc80"><b>WELCOME TO GAMERWORLD</b> </font></p> <p> </body> <SCRIPT TYPE="text/javascript"> <!-- function dropdown(mySel) { var myWin, myVal; myVal = mySel.options[mySel.selectedIndex].value; if(myVal) { if(mySel.form.target)myWin = parent[mySel.form.target]; else myWin = window; if (! myWin) return true; myWin.location = myVal; } return false; } //--> </SCRIPT> <FORM ACTION="../cgi-bin/redirect.pl" METHOD=POST onSubmit="return dropdown(this.gourl)"> <SELECT NAME="gourl"> <OPTION VALUE="">Choose a Destination... <OPTION VALUE="http://www.purezc.com" >purezc <OPTION VALUE="http://www.youtube.com" >youtube <OPTION VALUE="http://www.miniclips.com" >miniclips <option VALUE="file:///C:/Documents%20and%20Settings/Owner/Desktop/games.html">bunker </SELECT> <INPUT TYPE=SUBMIT VALUE="Go"> </FORM> <p> <p align="left"><font size="4"><font color="#660066">hello all and welcome to the world of gamers.where nintendo is our god.</font></P> <MULTICOL COLS=3> <UL> <lI><A HREF="links.html">Click Here for My Favorite Links</A> <li><A HREF="games.html">Click Here for Flash Game bunker</a> </UL> </MULTICOL> <br> <br> <br> <br> <body> Our address by FAN mail:<P> <ADDRESS> p.o box 183,perkinsvile vermont </ADDRESS> </body> <body> <!-- Begin Google Search --> <input type="hidden" name="cx" value="partner-pub-6155056320102818mfj3qxh2mm" /> <input type="hidden" name="cof" value="FORID:10" /> <input type="hidden" name="ie" value="ISO-8859-1" /> <input type="text" name="q" size="25" /> <input type="submit" name="sa" value="google search" /> <!--img src="/acustom/google.gif" border="0" alt="Google" style="vertical-align:top;" /--> <!-- END Google Search --> </html I use HTML 4.01 transitional. This code came as part of a templet for a page on one of my websites. The page works OK with these zero margins, but not without them. <body bgcolor="#f5fbfd" text="#42718c" LEFTMARGIN="0" TOPMARGIN="0" RIGHTMARGIN="0" BOTTOMMARGIN="0" onLoad="" link="#0033ff" vlink="#660099" alink="#ff0000"> I suspect it's depricated. Is there a better way to do this? Is the onload="" even needed since it appears empty? Hi, I noticed that if you insert meta tags into html somewhere in the body tags, the browser still recognizes them. I know its bad practice, but do search engines frown on putting meta tags in the body INSTEAD of the head? Cheers, Doug Hey, This has been bugging me for some time and I'm rubbish when it comes to borders and margins etc. Could someone tell me how modify the margin (presuming it's a margin) around the edge of the page? If you look at the attached image, you can see that the table isn't touching the edge of the page, and It does the same with images, text etc. Thanks I have recently taken control of a website (http://www.pitthockey.com/) and am having an issue concerning the body and footer layout. On some pages, such as the "Media" link on the side navigation bar, the footer overlaps the navigation bar if there is not enough text. I have them both set in divisions, but for some reason they still overlap. Any thoughts? this table wont center in IE but its center in firefox can anyone help me with this? http://lilions.com/contact/ I cant fit the hole code so please view page source to see if something offsetting it somewhere else on the page thanks Code: ul.pureCssMenum0 a { padding:8px 10px 0px 10px; } ul.pureCssMenum0 ul a { padding:2px 5px 5px 10px; } ul.pureCssMenum0>li { margin:0px 0px 0px 0px; } ul.pureCssMenum0 li { margin:0px 0px 0px 0px; } ul.pureCssMenum0 li li { margin:2px 0px 0px 2px; } </style> <!-- End PureCSSMenu.com STYLE --> <!-- Start PureCSSMenu.com MENU --> <ul class="pureCssMenu pureCssMenum0"> <li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/home">HOME</a></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/news"><span>NEWS</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/lnews">LATEST NEWS</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/pnews">PAST NEWS</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/calander" target="_blank">CALANDER</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/team"><span>TEAM</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/roster">ROSTER</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/coachingstaff">COACHING STAFF</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/frontoffice">FRONT OFFICE</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/fieldinfo">FIELD INFO</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/gameday"><span>GAMEDAY</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/schedule">SCHEDULE</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/standings">STANDINGS</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/statistics">STATISTICS</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/history">HISTORY</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/fanzone"><span>FANZONE</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/teamstore">TEAM STORE</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/gallery">GALLERY</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/tickets">TICKETS</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/calander" target="_blank">EVENTS CALANDER</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/sponsorship">SPONSORSHIP</a></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>APPLICATIONS</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/frontofficeapp" target="_blank">FRONT OFFICE</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/coachapp" target="_blank">COACH</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/playerapp" target="_blank">PLAYER</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/dancerapp" target="_blank">DANCER</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/contact">CONTACT US</a></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="http://fivestarfootballleague.com/" target="_blank">FSFL</a></li> </ul> </body> <br></br><br></br> <center> <img src="http://lilions.com/home/images/tpc.jpg"></center><center><img src="http://lilions.com/home/images/cnttp.jpg"></center><table style="border-collapse: collapse;" width=1000 height=450> <td id="center-mid"> </center><center><font color="#FFFFFF"><table border="3" bordercolor="FFFFFF" width="630" bgcolor="000000"></center></br><td><p><i><b><center><font color="#FFFF00">donbonacorsa@yahoo.com <donbonacorsa@yahoo.com></center></b></i></p></font> <form action="index.php" method="post"><table width="630" border="0" cellspacing="2" cellpadding="0"> <h4> <center> <p>Have questions or comments? Please feel free to fill in the form below to send me an email.</p> </center> </h4> <center></h4><div id="content"> <p><tr align="center"><center> <td width="29%" class="bodytext">Your Name (required):</td></tr> </center> <tr align="center"><center> <td width="71%"><input name="name" type="text" id="name" size="32"></td></tr> </center> </p> <p><tr align="center"><center> <td class="bodytext">Your Email (required)</td></tr> </center> <tr align="center"><center> <td><input name="email" type="text" id="email" size="32"></td></tr> </center> </p> <p><tr align="center"><center> <td class="bodytext">Subject</td></tr> </center> <tr align="center"><center> <td><input name="subject" type="text" id="subject" size="32"></td></tr> </center> </p> <p><tr align="center"><center> <td class="bodytext">Comment:</td></tr> </center> <tr align="center"><center> <td><textarea name="comment" cols="45" rows="6" id="comment" class="bodytext"></textarea></td></tr> </center> </p> <p><tr align="center"><center> <td class="bodytext"> </td></tr> </center> <tr><center> <td align="center" valign="top"><input type="submit" name="Submit" value="Send"></td></tr> </center> </p></table></tr></td></form></td> </table> </div> </b> </h3> </body> <center> <img src="http://lilions.com/home/images/cntbtm.jpg"></center> <br></br> <center> <table valign="top" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top" class="credit_white1"><font color="#ffffff"><img src="images/spacer.gif" width="30" height="1">Copyright 2011, MajorKillenDesign.com, Inc. All Rights Reserved.</font><br><br></td></center> </tr> </table> <center> <table valign="top" border="0" cellspacing="0" cellpadding="0" width="800" height="2"> <tr> <td width="800" height="2" bgcolor="#D4D601"></td> </tr> </table> <table valign="top" border="0" cellspacing="0" cellpadding="0" width="800" height="15"> <tr> <td width="800" height="15" class="subMenu"><p style="margin-left: 25px; margin-right: 0px; margin-top: 3px; margin-bottom: 5px" align="right"> <i> <a href="http://lilions.com/contact/"> Contact The Lions</a> </i> | <a href="http://majorkillendesign.com/"> Site & Design Sales</a> </p></td> </tr> </table> <script language="JavaScript"> if (document.location.toString().indexOf("home") == -1) { document.write('<table valign="top" border="0" cellspacing="0" cellpadding="0" width="800" height="2"><tr><td width="800" height="2" bgcolor="#D4D601"></td></tr></table>') } </script> </tr> </table></center> </html> Hello everyone first time poster here and this is my first website as well so bear with me. I've been designing my pages in photoshop and then adding content using div tags. It has been working well as long as i put in appropriate box height and widths in a css file. on my last page, which contains my php contact form, I'm having trouble setting the background color to match the rest and also it's not aligning correctly. Internet explorer shows the form on the left while firefox shows in centered. Any help or suggestions would be widely appreciated... heck I'll even take some criticism AZPCPLUS.COM The table on this page views okay in safari but in firefox there is a huge gap between the nav and the text.. http://naruphotography.net/AO/shedule.html any advice would be much appreciated Hello guys, I have just created very simple website with an older Flash 7. Then I had embeded that .swf file on simple html document. (I did input code for black body background): <body bgcolor="000000"> It looks OK on Safari, but for some reason, background color turns white when viewed on FireFox. I dont have Internet Explorer, so I don't know how it looks there. Any idea what I do wrong? Here is the link to that website: http://www.icebergfilms.com Thank you for any advise. Is it possible to declare background image separately and use it in body tag to declare it as background using it's id ???? please reply.... i use the following code to preload my hover images i coded in css... HTML Code: <body onload="MM_preloadImages('images/png/fertz.png','images/png/hardscapez.png','images/png/irrigationz.png','images/png/servicesz.png','images/png/lawnz.png','images/png/pondsz.png','images/png/snowz.png','images/png/upkeepz.png','images/png/homez.png','images/png/servicesz.png','images/png/gift_shopz.png','images/png/floristz.png','images/png/galleryz.png','images/png/contactz.png','images/png/eventsz.png')"> the website....http://www.briangelhaus.com/spencer/services.html and the images still dont preload...is there a better way? Hi every one ♥ Code: <a href="#info" rel="facebox">View the 'info' div in the Facebox</a> on above line, when user click on "View the 'info' div in the Facebox" then "info" div call with rel = "facebox" i want to call "info" div on page load with ref = "facebox" Code: <body onload="window.location.href='http://www.yoursitehere.com'"> i knw how to use href in body tag.. but i didn't know how to use href with ref in body tag please help me i will very thankful to you I'm wondering how I would fill in the left and right side of the body. Right now it's centered at 800px so I have the left and right side just white. *--><body> <div id="page" align="center"> <div id="content" style="width:800px"> I'm not sure what else you'd need to see, so please let me know. For example this news site: www.kstp.com I'm wondering how I would get the blue sides like this site has. Thanks in advance Hi there, I am currently making an iPhone/Touch website, and would like to know how I can make it so the top banner stays at the top, while the main body of the site scrolls up and down below it. Can you help? Josh Hey all. I'm having issues trying to run 2 functions at the same time in onload. <BODY OnLoad="function({ReadRSS('http://rss.news.yahoo.com/rss/science','rssBodyTemplate','rssTitleTemplate'),JSFX_StartEffects()"> I can't seem to get these to work no matter what I do. if I do them individually as in get rid of the other one and just OnLoad one of them, it works great. What's the proper way to run both of these in OnLoad? hello, i have seen on alot of web pages some kind of radial bgcolor of page,where at the top of page it's alot white and as you scroll down the page it gets darker and darker. does anyone knows what is this about? thanks Hi there, I need some help with this page: I can't get the "In this section:" link list to go to the right of the body text of the page and have the body text wrap around it. I'm also having trouble getting all the different headings and paragraphs to work right -- even if I set the CSS to display:block; the different headings display as inline elements. To get around this I've had to assign them all a width of 860 px -- which I think might be contributing to the problem getting the link list to go to the right of the body text, but horizontally aligned with the top heading. Thanks for any help you can give! Michael |