HTML td background image not displaying - html

I have my table with <td>s. This <td> contains a background element which is not displaying.
Below is my HTML table.
<div class="left">
<table cellspacing="0" cellpadding="0" border="0">
<td class="displayroundtable"></td> <!-- for displaying background image -->
<td><img src="<?php echo $this->static_address;?>images/MAX-RATING-100.jpg"></td>
</table>
In the CSS,
.displayroundtable{
background-image:url('<?php echo $this->static_address;?>images/2321.png');
}
I don't know why my background image never gets displayed?

Make sure there is a width set on your empty cell, or else it will end-up at 0px thus not displaying anything. Also make sure that the browser renders the empty cells using the CSS rule empty-cells:show on the table.
http://www.w3schools.com/cssref/pr_tab_empty-cells.asp
The table needs TR to be standard compliant. I don't think it is the reason why your background is not displaying but make sure you surround your lines between <tr> .

Related

Netsuite Advanced PDF footer centering issue

I am customizing forms in NetSuite and have gotten everything to work as I would want, except the footer. For some reason the text-align: center function is working based on the number of characters in the row of the footer, rather than the center of the page. Below are images of my code and print examples that show the error better. The only difference in the code between footer code images 1 and 2 is that I removed the word "number" in row 55 to depict the centering is based on characters.
Footer Code 1
Footer Print 1
Footer Code 2
Footer Print 2
If you were to show the borders on your tds you'd get a better sense of what's going on. Basically you are not providing hints for the td and table sizes so the normal table width processing is happening. ie. the tables will only be wide enough to hold the text so they appear to be text size based.
Also I suspect you have a lot more markup than you need. The following will give you what I think you are looking for. Note that you may want to play with padding to get the correct left and right alignments.
<macro id="nlfooter">
<hr />
<table class="footer" style="width: 100%;">
<tr>
<td align="left" colspan="4">email</td>
<td align="center" colspan="6">Phone</td>
<td align="right" colspan="4">Page info</td>
</tr>
<tr>
<td align="center" colspan="14">
<b>Thank you</b>
</td>
</tr>
</table>
</macro>

Basic HTML table formatting for email

I am making a simple newsletter layout that can only contain basic HTML but am getting caught up on formatting it properly. I have very little html experience, if I could use css I could lay this out but this is meant to be low level html that most e-mail clients can display properly.
This is a bit of code that I've done to get the image and a button (in the position of button 2) looking correct but it's getting the top and bottom buttons sitting there correctly that's the issue.
<table width="100%" style="text-align:center;">
<td>
<img src="http://localhost/temp/leftpic.png"></td>
<td>
<img src="http://localhost/temp/button.png"></td>
</table>
This is my design outcome. With the outter border being a table border centered in the middle of the page.
Is it possible to format something relatively close to this without using css?
I appreciate any help, cheers.
You CAN use css, you just have to avoid third-party files. You need to define the CSS rules inline, that is, in the style attribute, as you are already doing it for table. However, your HTML is invalid. You need to have tr elements outside your td elements and it is healthy to actively wrap your tr elements inside a tbody, which should be the child of your table.
By the way: the reason one should avoid third-party css in this case is that it might mess the design of the page of gmail/yahoo.
Something like this will start you off... This is with no CSS and no styling (other than what you have originally).
Although you state no CSS yet your first line is styling (albeit inline). Did you just mean no external file?
This is how we used to do layout before CSS, so this is using HTML tables:
<table width="100%" style="text-align:center;" border="1">
<tr>
<td width="50%">
<img src="http://localhost/temp/leftpic.png" width="390" height="480" />
</td>
<td>
<table>
<tr>
<td><input type="button" value="bn1" /></td>
</tr>
<tr>
<td><input type="button" value="bn2" /></td>
</tr>
<tr>
<td><input type="button" value="bn3" /></td>
</tr>
</table>
</td>
</tr>
</table>
Since you have a fixed height of your image on left, you can also use
<tr height="160">
Since 160 * 3 = 480 (the height of your image)
See an example here https://jsfiddle.net/on6ytfyn/
You probably want to remove the border in the first line of code too.

Laying Text on Top of a background Image in an HTML table

I am a relative newbee to HTML. Please be gentle!
I am trying to lay some text on top of a background image in am HTML email and am getting lost in the finer syntax. The background image is not showing up. I believe it is in fact getting pulled, but simply not being rendered (I could be very wrong)
<table width="100%">
<tr>
<td style="margin:0; padding:0; margin-top:1px; background-image:url ('http://www.insurehomehealth.com/MM/greenbar.png')";>My Text</td>
</tr>
</table> <!--end table-->
Thanks for teaching me a in advance!
You added a space between url and (
So replace:
background-image:url ('http://www.insurehomehealth.com/MM/greenbar.png');
by
background-image:url('http://www.insurehomehealth.com/MM/greenbar.png');

Html email Template <td> Spaces around images

I am coding html email template , I did slice psd to html because of graphical work in template , now problem is that it looks perfect in my browsers but when I send it to my email id there are some problems that you can see in attached image
now this is <tr> with 3 <td> but problem is that there is gap between left blue image and logo right one is perfectly fine , code for this <tr> is:
<tr>
<td colspan="2">
<img src="left.jpg" alt="top_left" width="220" height="102" border="0">
</td>
<td colspan="2">
<a href="http://www.google.com">
<img src="logo.jpg" width="191" height="102" border="0" alt="Logo"></a>
</td>
<td colspan="3">
<img src="right.jpg" alt="top_right" width="200" height="102" border="0">
</td>
</tr>
Please let me know how I can fix it.
Also, make sure to always use this style on your images : display:block;
Some mail clients will do whatever they want with your code (Looking at you, gmail), and unless you specify that your images are rendered as block elements, it will add white spaces around those.
There are a couple of important fixes for gmail. Black links should always be colored as #000001 (gmail removes the black color on links, as well as on regular text for redundant content in conversations (It will turn this text purple when reposted unless you specify that the text color is #000001) ).
Also, make sure you use inline styling for your TDs height and width, sometimes the regular html value won't do.
Remove whitespace after a tag. Also make sure table have cellspacing, cellpadding and border set to 0. You might need to remove all whitespace in cells.
E-mail browsers are a mess. Much more then IE6 was ;-).
It may be an easier solution to just to use a single image if keeping the line together is important.
Unless you know what e-mail user agent each recipient is going to be using to view the e-mail, it is difficult to target them in the manner that you proposed. Each e-mail client may use a different renderer, causing them to display the whitespace incorrectly. There are times, when using older e-mail clients, that you will need to remove ALL spaces and linebreaks to get table-based formatting to display correctly; this means having all of the HTML on a single line.
Also, keep in mind that if your recipients are viewing the content in HTML5, the border attribute of the img element is obsolete; it is instead correct to add style="border: 0;" to the img element. You may want to try using style="margin: 0; padding: 0; border: 0;" on the table cells and rows.
Make sure that you have your table set to collapse as well, using
<table style="border-collapse: collapse;">

Stacked images in HTML email template have a space between them

I'm building a template for an HTML email I'll being sending via .NET. I don't do this often and I know I have to stick to tables and inline CSS. I just sliced up some images and I have two that need to stack. I understand there are issues with this in terms of whitespace in the HTML code. As a result, I've tried it all on one line, e.g.
<td valign="top" style="width: 314px;"><img src="/i/header_logo.jpg" width="314" height="92" alt="Logo" /><br /><img src="/i/woman.jpg" width="314" height="617" alt="Woman" /></td>
I'm previewing this in my browser and the two images are separated by some space. I also have a global line of CSS resets at the top like:
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;}
</style>
Does anyone know how to stack two images in a <td> and have them flush against each other?
Update: It turns out I had a doctype at the top like a normal web page and that caused the issue. It had nothing to do with my HTML/CSS combo.
I figured out the problem. I didn't have a doctype defined and therefore the rendering mode was really messed up.
alternatively try align="left" on your images. Works in some email clients.
You could cheat, and embed another table within the column containing the pics.
<td>
<table>
<tr><td align="left"><img1 ...></td></tr>
<tr><td align="left"><img2 ...></td></tr>
</table>
</td>
Is that what you mean by stacked and flush?