I have been making html emails for a little while via slicing and incur different problems all the time. I can't seem to get my email to align properly in outlook 2010, neither can I get rid of these white spaces. I have inserted the other little fixes before and it hasn't worked for me (style="display:block" and/or a border="0"). I am also sure that I have been entering it in the right place.
Any suggestions on what I can do to fix this? Code is below:
Thank you for your time.
Zolas
<title>Scarlet Email Template flat</title>
<style type="text/css">
body, td, th {
font-size: 13px;
color: #333;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Scarlet Email Template flat.psd) -->
<table width="700" height="934" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="10">
<img src="images/sc_01.jpg" width="700" height="157" alt="">
</td>
</tr>
<tr>
<td>
<img src="images/sc_02.jpg" width="72" height="39" alt="">
</td>
<td>
<img src="images/sc_03.jpg" width="124" height="39" alt="">
</td>
<td colspan="3">
<img src="images/sc_04.jpg" width="159" height="39" alt="">
</td>
<td colspan="2">
<img src="images/sc_05.jpg" width="104" height="39" alt="">
</td>
<td>
<img src="images/sc_06.jpg" width="164" height="39" alt="">
</td>
<td colspan="2">
<img src="images/sc_07.jpg" width="77" height="39" alt="">
</td>
</tr>
<tr>
<td>
<img src="images/sc_08.jpg" width="72" height="196" alt="">
</td>
<td colspan="7">
<table width="500" border="0" align="center" cellpadding="4">
<tr>
<td align="center"><strong>Dear Alexia and Team,</strong>
<br>My name is Ilia Zolas and I provide an outsourced marketing solution to start-ups and small businesses. By implementing the activities I have described below, I believe that I can add value to your business and ultimately increase sales. Please feel free to reply to this email or call me (<strong>0716854983</strong>) should you be interested.
<br> <strong>Sincerely ,<br>
Ilia Zolas - BSc in International Hospitality Management, Major in Marketing</strong>
</td>
</tr>
</table>
</td>
<td>
<img src="images/sc_10.jpg" width="27" height="196" alt="">
</td>
<td>
<img src="images/sc_11.jpg" width="50" height="196" alt="">
</td>
</tr>
<tr>
<td>
<img src="images/sc_12.jpg" width="72" height="49" alt="">
</td>
<td colspan="2">
<img src="images/sc_13.jpg" width="210" height="49" alt="">
</td>
<td colspan="6">
<img src="images/sc_14.jpg" width="368" height="49" alt="">
</td>
<td>
<img src="images/sc_15.jpg" width="50" height="49" alt="">
</td>
</tr>
<tr>
<td>
<img src="images/sc_16.jpg" width="72" height="177" alt="">
</td>
<td colspan="2">
<img src="images/sc_17.jpg" width="210" height="177" alt="">
</td>
<td colspan="6">
<table width="350" border="0" align="center" cellpadding="4">
<tr>
<td><strong>Digital Marketing</strong>
<br>Scarlet needs a website that encompasses the brand's values, has ideal functionality and incurs high volumes of traffic. I can achieve this by creating the desired website and attracting the right kind of traffic with tools such as Adwords and Google Analytic.</td>
</tr>
</table>
</td>
<td>
<img src="images/sc_19.jpg" width="50" height="177" alt="">
</td>
</tr>
<tr>
<td>
<img src="images/sc_20.jpg" width="72" height="45" alt="">
</td>
<td colspan="2">
<img src="images/sc_21.jpg" width="210" height="45" alt="">
</td>
<td colspan="6">
<img src="images/sc_22.jpg" width="368" height="45" alt="">
</td>
<td>
<img src="images/sc_23.jpg" width="50" height="45" alt="">
</td>
</tr>
<tr>
<td>
<img src="images/sc_24.jpg" width="72" height="177" alt="">
</td>
<td colspan="2">
<img src="images/sc_25.jpg" width="210" height="177" alt="">
</td>
<td colspan="6">
<table width="350" border="0" align="center" cellpadding="4">
<tr>
<td><strong>Social Media & Content Creation </strong>
<br>Populating your Social Media with a variety of content is key to convincing customers that your product is the right choice. To achieve this, I need to setup a variety of Social Platforms and populate them with pictures, videos and other types of content based on your product.</td>
</tr>
</table>
</td>
<td>
<img src="images/sc_27.jpg" width="50" height="177" alt="">
</td>
</tr>
<tr>
<td>
<img src="images/sc_28.jpg" width="72" height="62" alt="">
</td>
<td colspan="2">
<img src="images/sc_29.jpg" width="210" height="62" alt="">
</td>
<td>
<img src="images/sc_30.jpg" width="54" height="62" alt="">
</td>
<td colspan="2">
<img src="images/sc_31.jpg" width="34" height="62" alt="">
</td>
<td colspan="3">
<img src="images/sc_32.jpg" width="280" height="62" alt="">
</td>
<td>
<img src="images/sc_33.jpg" width="50" height="62" alt="">
</td>
</tr>
<tr>
<td colspan="10">
<img src="images/sc_34.jpg" width="700" height="31" alt="">
</td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="72" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="124" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="86" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="54" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="19" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="15" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="89" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="164" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="27" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="50" height="1" alt="">
</td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>## Heading ##
You need style="margin: 0; border: 0; padding: 0; display: block;" on all images. Also, you can't start colspans with the first row being spanned, Outlook doesn't know how to handle the widths. See here for more information.
Beyond that, you should NEVER use slices to create entire html emails. It is really bad practice, as:
Images do not load by default in most email clients
Some spam filters will trigger as the ratio of text to image is too low
Long download times resulting in poor usability
You'll find a bunch of information on html email best practices here
Related
I'm currently trying to create new signatures for my company using Photoshop, and when I've sliced the image, the .html file displays properly in Chrome / Firefox but when uploaded to Outlook as a signature, it's full of gaps.
Can anyone help me please as it's driving me crazy?
It seems as though many people have issues with Outlook templates and I'm struggling to find a solution, any help would be very much appreciated!
<table>
<tr>
<td><html></td>
</tr>
</table>
<head>
<title>New Sig Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (New Sig Template.psd) -->
<table id="Table_01" width="555" height="289" border="0" cellpadding="0" cellspacing="0" line-height: 50%>
<tr>
<td colspan="15" style="line-height:0;">>
<img src="https://www.impact-london.com/NewEmails/Hannah_01.png" width="554" height="9" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="1" height="9" alt="">
</td>
</tr>
<tr>
<td colspan="13">
<img src="https://www.impact-london.com/NewEmails/Hannah_02.png" width="407" height="14" alt="">
</td>
<td rowspan="2">
<a href="http://www.impact-london.com" target="New">
<img src="https://www.impact-london.com/NewEmails/Impact-Click.png" width="135" height="28" border="0" alt="">
</a>
</td>
<td rowspan="8">
<img src="https://www.impact-london.com/NewEmails/Hannah_04.png" width="12" height="279" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="1" height="14" alt="">
</td>
</tr>
<tr>
<td colspan="2" rowspan="4">
<img src="https://www.impact-london.com/NewEmails/Hannah_05.png" width="27" height="109" alt="">
</td>
<td colspan="7" rowspan="3">
<a href="https://www.linkedin.com/in/hannah-willmore-580820134/" target="New">
<img src="https://www.impact-london.com/NewEmails/Hannah---LinkedIn.png" width="106" height="106" border="0" alt="">
</a>
</td>
<td colspan="4" rowspan="2">
<img src="https://www.impact-london.com/NewEmails/Hannah_07.png" width="274" height="95" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="1" height="14" alt="">
</td>
</tr>
<tr>
<td rowspan="6">
<img src="https://www.impact-london.com/NewEmails/Hannah_08.png" width="135" height="251" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="1" height="81" alt="">
</td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="https://www.impact-london.com/NewEmails/Hannah_09.png" width="23" height="14" alt="">
</td>
<td rowspan="2">
<img src="https://www.impact-london.com/NewEmails/Hannah_10.png" width="155" height="14" alt="">
</td>
<td rowspan="5">
<img src="https://www.impact-london.com/NewEmails/Hannah_11.png" width="96" height="170" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="1" height="11" alt="">
</td>
</tr>
<tr>
<td colspan="7">
<img src="https://www.impact-london.com/NewEmails/Hannah_12.png" width="106" height="3" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="1" height="3" alt="">
</td>
</tr>
<tr>
<td rowspan="3">
<img src="https://www.impact-london.com/NewEmails/Hannah_13.png" width="26" height="156" alt="">
</td>
<td colspan="2" rowspan="2">
<a href="https://twitter.com/Impact_Recruit" target="New">
<img src="https://www.impact-london.com/NewEmails/Impact-Twitter.png" width="24" height="25" border="0" alt="">
</a>
</td>
<td rowspan="3">
<img src="https://www.impact-london.com/NewEmails/Hannah_15.png" width="4" height="156" alt="">
</td>
<td>
<a href="https://www.instagram.com/impact_recruit/" target="New">
<img src="https://www.impact-london.com/NewEmails/Impact-Instagram.png" width="25" height="24" border="0" alt="">
</a>
</td>
<td rowspan="3">
<img src="https://www.impact-london.com/NewEmails/Hannah_17.png" width="4" height="156" alt="">
</td>
<td>
<a href="https://www.facebook.com/impactcreativerec/" target="New">
<img src="https://www.impact-london.com/NewEmails/Impact-Facebook.png" width="24" height="24" border="0" alt="">
</a>
</td>
<td rowspan="3">
<img src="https://www.impact-london.com/NewEmails/Hannah_19.png" width="5" height="156" alt="">
</td>
<td colspan="2">
<a href="https://www.linkedin.com/company/impact-creative-recruitment-ltd/" target="New">
<img src="https://www.impact-london.com/NewEmails/Impact-LinkedIn.png" width="24" height="24" border="0" alt="">
</a>
</td>
<td colspan="2" rowspan="3">
<img src="https://www.impact-london.com/NewEmails/Hannah_21.png" width="175" height="156" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="1" height="24" alt="">
</td>
</tr>
<tr>
<td rowspan="2">
<img src="https://www.impact-london.com/NewEmails/Hannah_22.png" width="25" height="132" alt="">
</td>
<td rowspan="2">
<img src="https://www.impact-london.com/NewEmails/Hannah_23.png" width="24" height="132" alt="">
</td>
<td colspan="2" rowspan="2">
<img src="https://www.impact-london.com/NewEmails/Hannah_24.png" width="24" height="132" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="1" height="1" alt="">
</td>
</tr>
<tr>
<td colspan="2">
<img src="https://www.impact-london.com/NewEmails/Hannah_25.png" width="24" height="131" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="1" height="131" alt="">
</td>
</tr>
<tr>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="26" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="1" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="23" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="4" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="25" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="4" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="24" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="5" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="21" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="3" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="20" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="155" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="96" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="135" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="12" height="1" alt="">
</td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
write style = "display: block" inline in img tags
Example:
<img src="..." style="display:block">
Will you give information after you try it
I have written an email template, its only a set of images with hyperlinks. Its working good on my browser, but when I send it through email, it gets broken due to unnecessary padding between tds.
This is how it should render. But what I see:
And when I inspected it:
You see the unnecessary padding? Here's the code:
<html><head>
<title>Email Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (594bfefd1385a.jpeg) -->
<table id="Table_01" width="1004" height="577" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68d7e313.gif" width="231" height="173" alt=""></td>
<td colspan="8" rowspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68dbb799.gif" width="411" height="445" alt=""></td>
<td colspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68db1f3f.gif" width="361" height="163" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="163" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68dd8c60.gif" width="361" height="105" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td rowspan="8">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68de43fb.gif" width="231" height="403" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="95" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e02a9f.gif" width="164" height="177" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e23617.gif" width="72" height="73" alt=""></td>
<td rowspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e25d27.gif" width="125" height="244" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="73" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e4689f.gif" width="72" height="171" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="104" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e47c27.gif" width="42" height="131" alt=""></td>
<td rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e6685e.png" width="51" height="52" alt=""></td>
<td colspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e677fe.gif" width="281" height="2" alt=""></td>
<td colspan="2" rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e6685e.png" width="51" height="52" alt=""></td>
<td colspan="2" rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e877be.gif" width="150" height="67" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68ea96be.gif" width="89" height="129" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68eab5fe.gif" width="51" height="50" alt=""></td>
<td rowspan="4">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68ec9295.gif" width="15" height="129" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68ecb9a6.gif" width="50" height="50" alt=""></td>
<td rowspan="4">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68eeadad.gif" width="76" height="129" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="50" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68eebd4d.gif" width="51" height="79" alt=""></td>
<td rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f15f75.gif" width="51" height="79" alt=""></td>
<td rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f16f15.gif" width="50" height="79" alt=""></td>
<td colspan="2" rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f37e75.gif" width="51" height="79" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f36aec.gif" width="62" height="64" alt=""></td>
<td colspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f589ec.gif" width="285" height="25" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="25" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f5a15d.gif" width="285" height="39" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="39" alt=""></td>
</tr>
<tr>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="231" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="42" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="51" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="89" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="51" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="15" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="50" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="76" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="37" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="14" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="62" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="88" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="72" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="125" height="1" alt=""></td>
<td></td>
</tr>
</tbody></table>
<!-- End Save for Web Slices -->
</body></html>
Please help, Thanks in advance.
I take it this is the first email you have built? It is not padding, its the display block that is missing from the images. Use the below code for all images in the html:
style="display:block;" hspace="0" vspace="0" alt="" border="0"
Note: Since you have so many colspan and rowspan the template might not work properly in some email clients. The above code will ensure all your images are sitting flush against each other.
A word of advice not to be taken lightly:
Never do Save for web from Photoshop. It creates table that is not fixable most of the time.
Don't use col span. Some email email clients don't like it.
Only image emails will have delivery problem, general rule is to have 70/30 (some day 60/40) to get best results.
Use media queries or Gmail fix or your emails will look really messed up in Gmail apps.
Let me know if the above fix works.
Cheers
I send newsletters from my Drupal-7 website using Simplenews newsletter module. The newsletters are basic HTML and CSS, and always contain small images, that when added side by side, they create a bigger image.
The newsletter appears fine when you receive it at any browser, but when you receive it on mobile, the images have a big space between them. What should I add in order to fix that?
Here is the code that I already use. It is the table-code generated when you crop the full-image on slices and I made a few css changes:
<table id="Table_01" width="750" height="1636" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<a href="link" target="_blank">
<img src="test.png" width="750" height="319" alt="" style="display:block;"></a></td>
</tr>
<tr>
<td colspan="3">
<a href="link" target="_blank">
<img src="test.png" width="750" height="336" alt="" style="display:block;"></a></td>
</tr>
<tr>
<td colspan="3">
<a href="link" target="_blank">
<img src="test.png" width="750" height="702" alt="" style="display:block;"></a></td>
</tr>
<tr>
<td colspan="3">
<a href="link" target="_blank">
<img src="test.png" width="750" height="71" alt="" style="display:block;"></a></td>
</tr>
<tr>
<td colspan="3">
<a href="link" target="_blank">
<img src="test.png" width="750" height="46" alt="" style="display:block;"></a></td>
</tr>
<tr>
<td colspan="3">
<img src="test" width="750" height="28" alt="" style="display:block;"></td>
</tr>
<tr>
<td>
<a href="link" target="_blank">
<img src="test.png" width="422" height="44" alt="" style="display:block;"></a></td>
<td>
<a href="link" target="_blank">
<img src="test.png" width="29" height="44" alt="" style="display:block;">
</a>
</td>
<td>
<a href="link" target="_blank">
<img src="test.png" width="299" height="44" alt="" style="display:block;">
</a>
</td>
</tr>
<tr>
<td colspan="3">
<img src="link" width="750" height="90" alt="" style="display:block;"></td>
</tr>
I fixed it! What it needed, is to add some spacer.gif images, whom width adds to the total width if the table created.
For example:
<tr>
<td>
<img src="images/spacer.gif" alt="" width="272" height="1">
</td>
<td>
<img src="images/spacer.gif" alt="" width="12" height="1">
</td>
<td>
<img src="images/spacer.gif" alt="" width="6" height="1">
</td>
<td>
<img src="images/spacer.gif" alt="" width="233" height="1">
</td>
<td>
<img src="images/spacer.gif" alt="" width="37" height="1">
</td>
<td>
<img src="images/spacer.gif" alt="" width="35" height="1">
</td>
<td>
<img src="images/spacer.gif" alt="" width="12" height="1">
</td>
<td>
<img src="images/spacer.gif" alt="" width="67" height="1">
</td>
<td>
<img src="images/spacer.gif" alt="" width="286" height="1">
</td>
I have a form that is inside of an iframe and I need to make sure that form submits to the parent of the iframe. Target="_top" and target="_parent" isn't working and I am starting to get a little bit aggravated with myself.
If anyone can point me in the right direction that'd be awesome. :)
I have a normal iframe with the src to an html page - that html page goes has this...
<form action="#" method="post" target="_parent" >
<table id="Table_01" width="308" height="411" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="6">
<img src="index_01.png" width="308" height="163" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="4">
<img src="index_02.png" width="112" height="142" alt=""></td>
<td colspan="3" style="background-image: url('optin_name.png');" width="189" height="40" alt="">
<input type="text" name="name" style="background: transparent;border:0px;font-size:25px;width:185px;height:37px">
</td>
<td rowspan="6">
<img src="index_04.png" width="7" height="247" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="index_05.png" width="189" height="33" alt=""></td>
</tr>
<tr>
<td colspan="2" style="background-image: url('optin_email.png');" width="188" height="40" alt="">
<input type="text" name="email" style="background: transparent;font-size:25px;border:0px;width:185px;height:37px;">
</td>
<td rowspan="4">
<img src="index_07.png" width="1" height="174" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="index_08.png" width="188" height="29" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="index_09.png" width="73" height="105" alt=""></td>
<td colspan="2" style="background-image: url('optin_submit.png');" width="174" height="54" alt="">
<input type="submit" name="submit" value=" " style="background: transparent;border:0px;width:170px;height:50px;">
</td>
<td rowspan="2">
<img src="index_11.png" width="53" height="105" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="index_12.png" width="174" height="51" alt=""></td>
</tr>
<tr>
<td>
<img src="spacer.gif" width="73" height="1" alt=""></td>
<td>
<img src="spacer.gif" width="39" height="1" alt=""></td>
<td>
<img src="spacer.gif" width="135" height="1" alt=""></td>
<td>
<img src="spacer.gif" width="53" height="1" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="spacer.gif" width="7" height="1" alt=""></td>
</tr>
</table>
</form>
I cannot get it to post to the iframes parent windows opposed to in a new windows and/or inside the iframe itself, both are no no's.
Your action attribute in the form seems to be a problem. Which URL do you want to post your data to? Try replace the # in the action attribute with the target URL.
prevent default submit behaviour
using window.parent to access the parent
let the parent to post the form value of the one in iframe
How to do a Jquery Callback after form submit?
$("#myform").submit(function(event) {
event.preventDefault();
var val = $(this).find('input[type="text"]').val();
// I like to use defers :)
deferred = $.post("http://somewhere.com", { val: val });
deferred.success(function () {
// Do your stuff.
});
deferred.error(function () {
// Handle any errors here.
});
});
Sorry I'm completely new to this.
Ive designed a website in photoshop, and exported it 'for use with web and devices', (HTML/IMAGES). And I now want to be able to write and add content over a specific 'content slice' (images/GSGOPSD_13.gif (900px X 756px))
Here is the code i have from photoshop:
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<center>
<body bgcolor="#2c2c2c" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (GSGOPSD.psd) -->
<table id="Table_01" width="1051" height="1235" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="8">
<img src="images/GSGOPSD_01.gif" width="1050" height="359" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="359" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/GSGOPSD_02.gif" width="92" height="2" alt=""></td>
<td rowspan="3">
<img src="images/GSGOPSD_03.gif" alt="" name="Twittr" width="55" height="62" id="Twittr"></td>
<td colspan="2" rowspan="4">
<img src="images/GSGOPSD_04.gif" width="903" height="119" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/GSGOPSD_05.gif" width="13" height="873" alt=""></td>
<td colspan="2">
<img src="images/GSGOPSD_06.gif" alt="" name="Fbook" width="61" height="59" id="Fbook"></td>
<td colspan="2" rowspan="3">
<img src="images/GSGOPSD_07.gif" width="18" height="117" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="59" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/GSGOPSD_08.gif" width="61" height="58" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/GSGOPSD_09.gif" width="55" height="57" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="57" alt=""></td>
</tr>
<tr>
<td>
<img src="images/GSGOPSD_10.gif" alt="" name="thumdown" width="60" height="59" id="thumdown"></td>
<td colspan="2" rowspan="2">
<img src="images/GSGOPSD_11.gif" width="16" height="756" alt=""></td>
<td colspan="3">
<img src="images/GSGOPSD_12.gif" alt="" name="thumup" width="61" height="59" id="thumup"></td>
<td rowspan="2">
<img src="images/GSGOPSD_13.gif" width="900" height="756" alt=""></td>
<td> //------------I WANT TO ADD CONTENT OVER THIS IMAGE.
<img src="images/spacer.gif" width="1" height="59" alt=""></td>
</tr>
<tr>
<td>
<img src="images/GSGOPSD_14.gif" width="60" height="697" alt=""></td>
<td colspan="3">
<img src="images/GSGOPSD_15.gif" width="61" height="697" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="697" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="60" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="55" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="900" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</center>
</html>
I thought that there would be a tut for this somewhere, and it would be a pretty simple thing, thanks for any help!
try going through this tutorial as I think it is what you are trying to aim for. You can relate it to your .psd along the way
You need to remove the image and then you will be able of insert content in the place where the image was.
BUT I would not recommend use tables for designing your layout and also do not use fixed sizes for widht/height. This should be achieved with CSS