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
Related
I am facing a very annoying issue regarding HTML mails. My mail template is working absolutely fine with all browsers and it is showing perfectly fine in gmail, office mail (web). But with outlook client I am getting 4 pixel extra padding.
I have checked the compute section where I can see the image size which I have defined and actual size in mail are different.
Here I am attaching the problematic part screenshot for your reference.
Could you please help me on it.
HTML Code
<table width="859" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="180"><img src="/sites/default/files/img/report_mail_header.jpg" alt="" /></td>
</tr>
<tr>
<td height="136"><img src="/sites/default/files/img/report_mail_title.jpg" alt="" /></td>
</tr>
<tr>
<td align="center" valign="top">
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#f9f9f9">
<tr>
<td colspan="3" height="58"><img src="/sites/default/files/img/box1.jpg" alt="" /></td>
</tr>
<tr>
<td width="111" height="354"><img src="/sites/default/files/img/box4.jpg" alt="" /></td>
<td valign="top">
<table width="90%" cellspacing="0" cellpadding="5" border="0" align="center">
<tr>
<td align="center" style="font-size:18px;line-height:135%"><br><br>Details of the accounts that are part of our community of ****<br><br>Account status: <font color="#1f6d79">active or inactive institutions</font>
<br>Details of the <font color="#83babc">institutions that are really reporting</font>
<br>The details of the <font color="#1f6d79">accounts that entered to the platform the last month</font>
<br>As you know, "*** **** ****" is an initiative to create value to our customers - Leading our team to gain differentiation and loyalty
<br><strong><font color="#1f6d79">Best Regards,<br>**** ****</font></strong></font>
</td>
</tr>
</table>
</td>
<td width="114" align="right"><img src="/sites/default/files/img/box2.jpg" alt="" /></td>
</tr>
<tr>
<td colspan="3" height="132"><img src="/sites/default/files/img/box3.jpg" alt="" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="120"><img src="/sites/default/files/img/report_mail_footer.jpg" alt="" /></td>
</tr>
</table>
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
I've never come across this problem before but my td's are displaying 3-4x taller in IE compared to Firefox and Chrome.
<tr>
<td align="right" valign="top" style="padding:0px" scope="row"><img src="image.png" width="15" height="15"></td>
<td width="247" height="74" align="left" valign="top" style="padding:0px" scope="row"> </td></tr>
<tr>
<td width="20" align="right" valign="top" style="padding:0px" scope="row"><img src="images.png" width="15" height="15"></td>
<td height="39" align="left" valign="top" style="padding:0px" scope="row"></td></tr>
<tr>
<td width="20" align="right" valign="top" style="padding:0px" scope="row"><img src="image.png" width="15" height="15"></td>
<td height="54" align="left" valign="top" style="padding:0px" scope="row"></td></tr>
<tr>
<td width="20" align="right" valign="top" style="padding:0px" scope="row"><img src="image.png" width="15" height="15"></td>
<td align="left" valign="top" style="padding:0px" scope="row"></td>
</tr>
So, i checked out the the http://jsfiddle.net/Sx6be code.
the problem is that the browser distribute the remaining height differently.
the Firefox and Chrome make the rows the exact height that is defined in the td tags, but the internet explorer tries to distribute the height equally (the same way the table distributes its column widths)
what you have to do is: force the last (empty) row that is within the rowspan to be as high as possible (the row below 'Network of fully qualified...'):
<tr>
<td width="20" align="right" height="240" valign="bottom" style="padding:0px" scope="row"></td>
<td align="left" valign="top" style="padding:0px" scope="row"></td>
</tr>
i put the height to 240 to achieve this.
look at this: http://jsfiddle.net/Sx6be/5/
you can change the height of the td to 0 to see what exactly the problem is
but you can only use this fix if you know the height of the table (because you can only fixed values as height).
a better solution is to use an unsorted list <ul> instead of the table for the Key Benefits part.
table based layout is VERY outdated. you should really avoid using it, by now you should know why.
I have html page with some tables and I need add new table as FIRST table on the page using bash script, I know that it can be done using sed or smt else, but I dont know how it working... Can someone help to find way for it?
example of html page:
<html>
<head></head>
<body>
THERE SHOULD BE ADDED NEW TABLE ROW LIKE BELOW
<tr>
<td rowspan="2" bgcolor="#fff1cc" class="style4"><div align="center">
<h4>2012-07-17</h4>
</div></td>
</tr>
<tr>
<td height="2" bgcolor="#fff1cc" class="style4"><a ref="07_17_ef47efb/index.html">sha1:ef47efb</a></td>
<td bgcolor="#fff1cc" class="style4" align="center"><img src="../Pictures/green.gif" width="35" height="37"></td>
</tr>
<tr>
<td rowspan="2" bgcolor="#fff1cc" class="style4"><div align="center">
<h4>2012-07-17</h4>
</div></td>
</tr>
<tr>
<td height="2" bgcolor="#fff1cc" class="style4">sha1:ef47efb</td>
<td bgcolor="#fff1cc" class="style4" align="center"><img src="../Pictures/green.gif" width="35" height="37"></td>
</tr>
<tr>
<td rowspan="2" bgcolor="#fff1cc" class="style4"><div align="center">
<h4>2012-07-17</h4>
</div></td>
</tr>
<tr>
<td height="2" bgcolor="#fff1cc" class="style4">sha1:ef47efb</td>
<td bgcolor="#fff1cc" class="style4" align="center"><img src="../Pictures/green.gif" width="35" height="37"></td>
</tr>
</body>
</html>
exmaple of Table row that should be added as FIRST in html page:
<tr>
<td rowspan="2" bgcolor="#fff1cc" class="style4"><div align="center">
<h4>$date</h4>
</div></td>
</tr>
<tr>
<td height="2" bgcolor="#fff1cc" class="style4"><a ref="$path/index.html">sha1:$rev</a></td>
<td bgcolor="#fff1cc" class="style4" align="center"><img src="../Pictures/green.gif" width="35" height="37"></td>
</tr>
1) your html has no <table></table> is it right?
2) if the rows you want to add are fixed, you could save them into a file, say rows.txt. then try to replace the <body> tag with <body> and the content of your rows.txt. However, if there are nested <table>s in your foo.html. it could be complicated.
I found a solution - SED: change/insert/append lines after matching a pattern.
I have a table that has worked correctly for many years, but recently the table widths have gone slightly haywire. It's an old HTML site I maintain but didn't write (it should be rewritten in CSS) but the owner doesn't want to do it yet and it's a very large site.
No changes were made to the table structure, yet the width=x % is no longer working correctly on part of it. I know the table is messy and overly complex
I've stared at this and I know I'm missing something easy. There are some errors in the table, but they have not prevented any rendering engine from displaying it properly until recently (client noticed it a few days ago).
The exact problem is that a nested table (see *problem below) is not allocating space on a 25%, x%, 25% basis. The x% is slightly under 50%, but the two outer columns should be 25% each (when the browser is large enough) and they used to scale equally. Now, the left column is always larger than the right proportionally, the middle expands and shrinks with the size of the browser, but the right column is always too small and crowded.
I'm sorry for the code. It's a messy table and I wanted to cut what I thought was extraneous but leave the structure.
I'm stumped. Any help would be appreciated.
CLARIFICATION. This table has 3 nested tables within it. Those 3 tables used to resize as you changed the size of the browser window, but now only 2 of the 3 are scaling. The left-most and the center tables scale and re-size as part of the whole; the right-most nested table no longer scales and has shrunk below the 25% width threshold as specified. This is a new phenomenon, but none of the base code has been changed (I verified from a 1 year old copy of the page).
<table width="100%" height="500" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5" height="54" align="left" valign="top" bgcolor="#FFFFFF"><br /> </td>
</tr>
<tr>
<td colspan="5" height="21" align="left" valign="top" bgcolor="#FFFFFF"><some images><br /> </td>
</tr>
<tr>
<td colspan="5" height="25" align="left" valign="top" bgcolor="#FFFFFF"><br /> </td>
</tr>
<tr>
<td colspan="3" width="100%" height="1" align="left" valign="middle" </td>
</tr>
<tr> ************PROBLEM STARTS HERE ***************
<td colspan="1" width="25%" height="485" valign="middle" align="right" >
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="right" valign="middle">
<p class="x">
<br />
<br />
</p>
</td>
<td width="15" align="right" valign="middle"></td>
</tr>
</table></td>
<td colspan="1" height="450" width="1" valign="top" align="right" </td>
<td colspan="1" height="485" align="center" valign="top">
<table width="100%" border="0" valign="top" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="1" height="485" align="center" valign="middle"></td>
</tr>
</table></td>
<td colspan="1" height="450" width="1" valign="top" align="right" </td>
<td colspan="1" height="485" width="25%" valign="middle" align="right" bgcolor="#84968A"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15" align="right" valign="top"></td>
<td align="left" valign="middle">
<p class="x">
<br />
<br />
</p>
</td>
</tr>
</table></td>
</tr>
</table>
Actually, problem lies in the row above where you have "problem starts here":
<td colspan="3" width="100%" height="1" align="left" valign="middle"> </td>
You are saying that 3 columns are 100% of the width. Then, your next row has 5 cells.