I'm having problems with the following code.
<tbody>
<tr align="center">
<td>
<p align="right"><font face="Arial, Helvetica, sans-serif"><strong>Processoren</strong>
<img src="images/IntelPentium4.jpg" align="middle" height="37" width="50"> </font></p>
</td>
<td>
<p align="right"><font face="Arial, Helvetica, sans-serif"><strong>Moederborden
</strong> <img src="images/MB.jpg" align="middle" height="47" width="47"> </font></p>
</td>
</tr>
<tr align="center">
<td height="54" width="50%">
<p align="right"><strong><font face="Arial, Helvetica, sans-serif">Geheugen <img src="images/geh.gif" align="middle" height="47" width="50"></font></strong></p>
</td>
<td height="54" width="50%">
<p align="right"><strong><font face="Arial, Helvetica, sans-serif">Grafische kaarten <img src="images/56326.jpg" align="middle" height="50" width="50"></font></strong></p></td>
</tr>
<br><br><br>
</tbody><tbody>
<tr align="right">
<td align="left"> <img src="images/gamepc1.png" width="140" > </td>
<td align="right"> <img src="images/gamepc2.jpg" width="120"> </td></tr>
</tbody><tr>
<td></td>
<td class="test11"><img src="images/annie2.png" width="140">
</td></tr>
<tbody>
<tr align="right">
<td align="left"> <img src="images/gamepc3.png" width="120"> </td>
<td align="right"> <img src="images/gamepc4.png" width="100"> </td>
</tr>
</tbody></table>
enter image description here
Basicly, I can't figure out how to center the anime picture. Please dont ask me why there is random anyme on this webpage, but the owner of the store wanted me to do that. I've tried so many options to center the picture, they just work. Could someone try to take a look at it and help me out?
I tried centering it with css rules, also tried margin-left shit but I cant figure out why its not reaction on such code.
I've never worked with and before. I'm a first year student who had to make some websites for school that worked out pretty good. My friend asked me if I could fix some stuff for his work's owner's website. This website is designed like 10years ago. I already asked him if I couldn't just make a new one, but he insisted that I need to use this one.
Could someone help me out? Thanks!
Inside your tbody with the image of the anime you are using two <td>.
You can delete the first <td></td> and use colspan="2" for the other td, so you will only need one td. This td will take the full width. Now you can easily center the image.
<td colspan="2" class="test11" style="text-align:center;">
<img src="images/annie2.png" width="140">
</td>
Result look like this (be aware, I have not included the sources of the images).
Related
I have created a html email using tables. It displays fine in browsers but when I view it in outlook.com, gmail and outlook client there are horizontal 'gaps', the table also seems to be wider (on the right) and longer (at the bottom).
I have been searching the internet for a long time for an answer with no success, and have tried many different things ( I am new to html). I have tried putting the table in another table container, I have deleted the gaps between the tds, I have added a paragraph container around the images (which fixed one of the gaps in gmail but created another in outlook client that wasn't there before). All my cells have defined widths and heights, as does my table. I have set the padding, borders etc to 0. I tried adding display:block to each image but it pushed the whole table out horizontally and made it ridiculously wide.
I am out of ideas! Please help as I need to sort this issue out, I have not even added the text yet. I have included my code here. Many thanks.
<!-- Save for Web Slices (AP-MelbourneCup14-4.psd) -->
<table id="table_01" width="100%" height="100%"><table id="Table_02" width="510" height="818" border="0" style="border-spacing:0" cellpadding="0" cellspacing="0" bgcolor="#F0f0f0" align="center">
<tr>
<td colspan="6" width="510" height="19"></td>
</tr>
<tr>
<td width="510" height="75" colspan="6"><p style="margin:0; font-size:0px; line-height:0"><img id="AP_MelbourneCup14_4_02" src="images/AP-MelbourneCup14-4_02.png" width="510" height="75" alt="" border="0"/></td>
</tr>
<tr>
<td colspan="6" width="510" height="76"></td>
</tr>
<tr>
<td rowspan="9" width="22" height="521"></td>
<td rowspan="3" width="355" height="225" bgcolor="#f0f0f0"><p style="margin:0; font-size:0px; line-height:0"><img id="AP_MelbourneCup14_4_05" src="images/AP-MelbourneCup14-4_05.png" width="355" height="225" alt="" border="0"/></td>
<td colspan="4" width="133" height="107"></td>
</tr>
<tr>
<td colspan="3" width="108" height="87" bgcolor="#000000"></td>
<td rowspan="8" width="25" height="414"></td>
</tr>
<tr>
<td colspan="3" rowspan="2" width="108" height="56"></td>
</tr>
<tr>
<td width="355" height="25"></td>
</tr>
<tr>
<td colspan="2" width="398" height="33" bgcolor="#303473"></td>
<td colspan="2" width="65" height="33"></td>
</tr>
<tr>
<td rowspan="4" width="355" height="238"><p style="margin:0; font-size:0px; line-height:0"><img id="AP_MelbourneCup14_4_13" src="images/AP-MelbourneCup14-4_13.png" width="355" height="238" alt="" border="0"/></td>
<td colspan="2" width="57" height="57"><p style="margin:0; font-size:0px; line-height:0"><img id="AP_MelbourneCup14_4_14" src="images/AP-MelbourneCup14-4_14.png" width="57" height="57" alt="" border="0"/></td>
<td rowspan="2" width="51" height"112"></td>
</tr>
<tr>
<td colspan="2" width="57" height="55"></td>
</tr>
<tr>
<td colspan="3" width="108" height="87" bgcolor="#000000"></td>
</tr>
<tr>
<td colspan="3" width="108" height="39"></td>
</tr>
<tr>
<td colspan="6" width="510" height="105"><p style="margin:0; font-size:0px; line-height:0"><img src="images/AP-MelbourneCup14-4_19.png" alt="" width="510" height="105" align="bottom" id="AP_MelbourneCup14_4_19" border="0"/></p></td>
</tr>
<tr>
<td colspan="6" width="510" height="22" bgcolor="#0697d4"></td>
</tr>
</table> </table>
<!-- End Save for Web Slices -->
There is so much wrong with the code. It's overly complex for starters. The images should have style="display:block" if you don't need to have anything inline with them so as to avoid some email clients adding unwanted extra padding around the images. You specify columns and rowspans on lines 24-26 but they don't add up. You have paragraph tags without the closing tag... Since you are new to HTML, you may want to try the new Litmus tool for creating emails: https://litmus.com/email-builder
This works fine in normal clients but as we know Outlook is a pain to work with. It looks ok to me but can someone tell me why this would not render in Outlook?
<table id="contentArea">
<tr>
<td>
<p>Welcome to the TeraTitan family ${user['FirstName']},</p>
<p>Please tell us which services you are interested in currently:</p>
<table align="center">
<tr align="center">
<td><img height="100px" width="100px" src="http://www.yourwealth.co.uk/sites/default/files/titleimage-mortgages.jpg"><p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Mortgages</p></td>
<td><img height="100px" width="100px" src="http://t0.gstatic.com/images?q=tbn:ANd9GcS0BNv0q30KMSumGx6p8Vp0UYwB_3IfBUD3HfKsruNW-qBb5qdUd4UPi1d9"><p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Savings</p></td>
<td><img height="100px" width="100px" src="http://www.clockwise.coop/Clockwise/media/SiteImages/News%20Items/%C2%A35-gift.jpg?width=200&height=200&ext=.jpg"><p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Home Equity</p></td>
</tr>
</table>
<p>You can also visit us on-line at TeraTitan, or call us with any questions you may have at 800-555-1212.</p>
</td>
</tr>
</table>
<!-- End Table for content-->
I'm with R Lacome. What exactly is the rendering issue?
Also, there seems to be a few "sloppy" coding things. Sometimes this doesn't make a difference, but if your code is "sloppy" you won't know where your real issue is.
Below is cleaned up HTML with a few tweaks. Try running that and see if it fixes your rendering issue.
I should also note that without a lot of inline CSS <p> tags don't offer a lot of consistency in email clients.
<table id="contentArea" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<p>Welcome to the TeraTitan family ${user['FirstName']},</p>
<p>Please tell us which services you are interested in currently:</p>
</td>
</tr>
<tr>
<td align="left">
</td>
</tr>
<tr>
<td align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<a href="http://www.teratitan.com/info/mortgage">
<img height="100px" width="100px" src="http://www.yourwealth.co.uk/sites/default/files/titleimage-mortgages.jpg">
<p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Mortgages</p>
</a>
</td>
<td align="center">
<a href="http://www.teratitan.com/info/savings">
<img height="100px" width="100px" src="http://t0.gstatic.com/images?q=tbn:ANd9GcS0BNv0q30KMSumGx6p8Vp0UYwB_3IfBUD3HfKsruNW-qBb5qdUd4UPi1d9">
<p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Savings</p>
</a>
</td>
<td align="center">
<a href="http://www.teratitan.com/info/homeequity">
<img height="100px" width="100px" src="http://www.clockwise.coop/Clockwise/media/SiteImages/News%20Items/%C2%A35-gift.jpg?width=200&height=200&ext=.jpg">
<p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Home Equity</p>
</a>
</td>
</tr>
</table>
</td>
</td>
<tr>
<td align="left">
</td>
</tr>
<tr>
<td align="left">
<p>You can also visit us on-line at TeraTitan, or call us with any questions you may have at 800-555-1212.</p>
</td>
</tr>
</table>
<!-- End Table for content-->
I have a design of an email template, and I am tinkering about the best way to tackle the styling of the following element in HTML/CSS. Note a few things:
Since it's for an HTML email, mainly tables will be used.
Using negative margins will probably not be compatible with different mail clients.
Note the white border around the button
Would you recommend using a background image for this entire block? Or is there an elegant way that will look like this and works across clients.
Here's my set-up: http://jsfiddle.net/ZHkdV/
Here you go - only need a 30x30 image for the top corner:
<table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#F1F1F1">
<tr>
<td width="30" height="30">
<img style="margin: 0; border: 0; padding: 0; display: block;" src="" width="30" height="30" alt="">
</td>
<td width="240" height="30">
</td>
<td width="30" height="30">
</td>
</tr>
<tr>
<td width="30" height="160">
</td>
<td width="240" height="160" valign="top">
<font style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #757575;">
<br>
some text here
</font>
</td>
<td width="30" height="160">
</td>
</tr>
<tr>
<td width="300" height="40" colspan="3" bgcolor="#FFFFFF"><!-- undeclared light gray as Outlook can add spaces at bottom of this td on forwarding (hides unwanted line) -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="20" bgcolor="#F1F1F1">
</td>
<a href="" style="color: #757575; font-weight: bold; text-decoration: none;"><!-- css button, you can lose this and put a href'd image in the cell if you prefer. -->
<td width="200" height="40" bgcolor="#CBBCDC" rowspan="2" valign="middle" align="center">
<font style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #757575;">
BUTTON
</font>
</td>
</a>
<td width="50" height="20" bgcolor="#F1F1F1">
</td>
</tr>
<tr>
<td width="50" height="20" bgcolor="FFFFFF">
</td>
<td width="50" height="20" bgcolor="FFFFFF">
</td>
</tr>
</table>
</td>
</tr>
</table>
This should hold up in all clients...
For e-mail templates, you don't have to worry about validation, so you can use pretty 'hacky' html. One way round client compatibility is to have every row be a table in and of itself, set inside one main 'wrapper' table.
Then you can set as many divisions as you want in each, remembering to reset the borders on each table, row and cell.
Each cell gets it's own image or slice of an image. For the last row you could simply have one image in an anchor tag. Also remember to keep all styling on elements inline.
The html email Boilerplate is pretty much bulletproof.
http://htmlemailboilerplate.com/
<table> <!- Wrapper ->
<tr>
<td>
<table>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
Background images aren't very compatible either:
http://www.campaignmonitor.com/css/
I would just slice the last row into 3 separate images (left, button, right).
If you would rather have one image for the whole row, you can also use an image map to just make the button part a link.
Any help would be much appreciated with the coding on a table of info. The table works great in Chrome and Firefox but NOT in IE8. I have tried various but with no luck. The person who I am doing it wants it as in Chrome/Firefox look, nothing else.
The two rows up from the bottom have different width than the columns above. As in chrome / Firefox. Just need it get it to show the same in IE8. IE8 displays them all in the same width?!
<table width="669" border="1" align="center" cellpadding="5" cellspacing="0">
<tr>
<td width="56" rowspan="18" bgcolor="#E6E6E6" >
<p align="center">
<img src="images/awards.gif" alt="Awards" width="22" height="109" align="absmiddle" /></p></td>
<td width="66" height="44" ><strong>Category</strong></td>
<td ><div align="center">Awards</div></td>
<td colspan="2"><div align="center">Value</div></td>
</tr>
<tr>
<td width="66" rowspan="4" valign="top"><div align="right"><strong>MAIN</strong></div></td>
<td width="154" >1st prize and the title <br />
of the Young Pianist<br />
of the North</td>
<td colspan="2" valign="top" class="style3" >£600.00</td>
</tr>
<tr>
<td width="154" >2nd prize</td>
<td colspan="2" class="style3">£400.00</td>
</tr>
<tr>
<td width="154" >3rd prize</td>
<td colspan="2" valign="top"><span class="style3">£200.00</span> in total value<br />
(<span class="style3">£100.00</span> and WUe* worth <span class="style3">£100.00</span> or more)</td>
</tr>
<tr>
<td width="154" height="26" >Up to 3 Diplomas</td>
<td colspan="2" ><div align="center">-</div></td>
</tr>
<tr>
<td height="16" colspan="4" bgcolor="#E6E6E6"></td>
</tr>
<tr>
The link with HTML table code is here
Post your full code in jsfiddle, your question was unclear.
what i can read from your question is, you have alignment issues in width of row? If so try adding this compatible meta header for Internet explorer
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
Refer this link
After a lot of time I put into researching. I still can't find an answer.
I have a HTML that is showing the wrong width in my tables. Here is a link to the html email: https://tagwebstore.com/email/tag-email-10percentmore.html and here is a screenshot of how it looks in Outlook 2007:
The main problem is the bottom area. The link of the html email displays it correctly. I have no idea what else to do from here. Here is my code for the bottom part I am having trouble with:
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td height="23" colspan="3" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="25"> </td>
<td><table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="https://www.tagwebstore.com/email/testimonial-top.png" width="573" height="36" style="display:block;" /></td>
</tr>
<tr>
<td bgcolor="#f0d7c1" width="573"><table cellpadding="0" cellspacing="0" border="0" width="573">
<tr>
<td width="28"></td>
<td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;" width="517"><table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">We’ve been using TAG for a while and we love TAG – we love the products. When we bring the products to Oklahoma City, nobody else has the products. It’s a big plus here for our market area. I think it would be a great thing for people to get online and see what TAG can do for them.</td>
</tr>
<tr align="right">
<td height="40" valign="bottom" style="font-size:11px; line-height:18px; color:#000000; font-style:normal; font-weight:bold; font-family:Helvetica, Arial, sans-serif;">Sirron Brown, Marketing Director<br />
Excell Home Care and Hospice, Oklahoma</td>
</tr>
</table></td>
<td width="28"></td>
</tr>
</table></td>
</tr>
<tr>
<td><img src="https://www.tagwebstore.com/email/testimonial-bottom.png" width="573" height="57" /></td>
</tr>
</table></td>
<td width="25"> </td>
</tr>
</table>
<!--Testimonial End-->
<!--Footer-->
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td colspan="3" height="20"> </td>
</tr>
<tr>
<td width="25"> </td>
<td width="575"><table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="middle" width="295" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;">info#tagwebstore.com | 866.232.6477</td>
<td width="178" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;" valign="middle" align="right">Follow us on Twitter & YouTube</td>
<td valign="middle" width="102"><img src="https://www.tagwebstore.com/email/twitter.png" width="49" height="17" border="0" /><img src="https://www.tagwebstore.com/email/youtube.png" width="53" height="21" border="0" /></td>
</tr>
</table></td>
<td width="25"> </td>
</tr>
<tr>
<td colspan="3" height="20"> </td>
</tr>
</table>
<!--Footer End-->
The width of the containing table is suppose to be 625px. Any help is appreciated.
oh the joy of html emails
There are many rules you have to obey when dealing with HTML-based email, especially when you have exacting clients and pixel-perfect designs, and I am quite glad that I haven't had to work on such a project for at least two years now... The main reason for my utter dislike of the practice is primarily down to two email-clients. The first and all time worst being Lotus Notes 6.5.4 (to be fair it's over 10 years old now.. but still!), and the all time second worst(s), they're not even the best at being bad, Outlook 2007 and 2010!
Whoever thought it would be a good idea to use the Microsoft Word WYSIWYG HTML Engine to render HTML Emails in Outlook 2007 and 2010, must have been mad, lazy, lost or ever-so-slightly confused (delete as appropriate). It causes no end of rendering problems for developers, usually with random and inexplicable sizing calculations or padding problems.
Taken from my blog http://blog.pebbl.co.uk/2011/06/collapsible-html-email-and-outlook.html
Simply put, I do not envy you :)
I found the best way to help me out with my email troubles was to follow the following rules:
Never use colspans or rowspans.
Always set correct dimensions for your tables and cells.
Use spacer gifs rather than &nbps;.
Always specify correct image sizes and never scale images up or down.
Always add style="display:block;" to images.
Avoid using divs.
If you wish to colour links, put the styling on a span as a child inside the a tag.
Don't use italics.
Don't use BRs for layout, always use tables.
Use BRs in Text, not Ps (to avoid stange margin problems and paragraphing being completely ignored).
Because the sheer number of emails I used to get through ended up being ridiculous, I developed a script to help me with the work of checking dimensions and other possible pitfalls. If you're interested in using it you can find it here:
http://pastie.org/6250834
The script can be added as a usual script tag or enabled using GreaseMonkey or something similar (it was designed to work with Firefox but I see no reason why it shouldn't work elsewhere). Due to the way I used to build my emails, it will only enable itself if either the following conditions are met:
There is an outer wrapping table that has width="100%" set, used to centre the actual email content.
or... there is an outer element (a table or div) that has the id="base".
I've passed your HTML through it and the image below is the resulting output, it makes more sense when you have the actual page because you can hover over each bordered item and it will give you a rough idea of what the problem is (either that or you can just inspect the element directly with Firebug or similar).
So from inspecting the above it seems you have a few problems that need to be fixed, I'd say the most important ones are to get rid of rowspans and colspans (these always cause problems in Outlook) and to make sure all your dimensions tally correctly. Once you've fixed these issues you might see a considerable improvement, but then again you might not, there are no certainties in the hazardous life of HTML email building...
Hope it helps.
Try this for your top table:
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td height="23" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="25"> </td>
<td width="575">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<img src="https://www.tagwebstore.com/email/testimonial-top.png" width="575" height="36" style="display:block;" />
</td>
</tr>
<tr>
<td bgcolor="#f0d7c1" width="575">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="28">
</td>
<td width="519" style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">We’ve been using TAG for a while and we love TAG – we love the products. When we bring the products to Oklahoma City, nobody else has the products. It’s a big plus here for our market area. I think it would be a great thing for people to get online and see what TAG can do for them.
</td>
</tr>
<tr align="right">
<td valign="bottom" style="font-size:11px; line-height:18px; color:#000000; font-style:normal; font-weight:bold; font-family:Helvetica, Arial, sans-serif;">Sirron Brown, Marketing Director<br />
Excell Home Care and Hospice, Oklahoma</td>
</tr>
</table>
</td>
<td width="28">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="https://www.tagwebstore.com/email/testimonial-bottom.png" width="575" height="57" style="display:block;" />
</td>
</tr>
</table>
</td>
<td width="25"> </td>
</tr>
</table>
and this for your bottom:
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td colspan="3" height="20"> </td>
</tr>
<tr>
<td width="25"> </td>
<td width="575">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="middle" width="280" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;">
info#tagwebstore.com | 866.232.6477
</td>
<td width="193" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;" valign="middle" align="right">
Follow us on Twitter & YouTube
</td>
<td valign="middle" width="49">
<img src="https://www.tagwebstore.com/email/twitter.png" width="49" height="17" border="0" style="display:block;" />
</td>
<td valign="middle" width="53">
<img src="https://www.tagwebstore.com/email/youtube.png" width="53" height="21" border="0" style="display:block;" />
</td>
</tr>
</table>
</td>
<td width="25"> </td>
</tr>
<tr>
<td colspan="3" height="20"> </td>
</tr>
</table>
Overall it was coded really well, just changed a few small things, not saying each was a must have, but IF it works you can reverse engineer the changes to find out what busted it. I haven't tested it, so hopefully this works...