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.
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
I am trying to create a "cool" email signature for my company using only text and html with NO images whatsoever. I am trying to recreate our company's logo using only tables since it is basically a four cell table with different bg colors. What seemed easy at first has become quite a nuisance. It obviously looks good in browsers but once I paste it into Outlook 2013 the cells don't retain their height and width values. Any suggestions on how to make this work across most current email clients??
http://codepen.io/anon/pen/wqaLm
Firstly, a good technique is to style your cells inline like:
<td style="width:10px; height:10px;">
Secondly: have a look at this article: "A complete breakdown of the CSS support for every popular mobile, web and desktop email client"
Here is a basic example. Not sure exactly what the logo looks like, so here are a few versions. If you want to have the gap between the cells smaller than 20px, you need to use the 3rd technique. This is because Outlook has a min-height on cells of around 19px which will create a larger gap between the rows.
<table width="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="50" bgcolor="#333333">
</td>
<td width="50" height="50" bgcolor="#555555">
</td>
</tr>
<tr>
<td width="50" height="50" bgcolor="#444444">
</td>
<td width="50" height="50" bgcolor="#666666">
</td>
</tr>
</table>
<br><br>
<table width="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="40" height="40" bgcolor="#333333">
</td>
<td width="20" height="40">
</td>
<td width="40" height="40" bgcolor="#555555">
</td>
</tr>
<tr>
<td width="40" height="20">
</td>
<td width="20" height="20">
</td>
<td width="40" height="20">
</td>
</tr>
<tr>
<td width="40" height="40" bgcolor="#444444">
</td>
<td width="20" height="40">
</td>
<td width="40" height="40" bgcolor="#666666">
</td>
</tr>
</table>
<br><br>
<table width="60" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="30" height="30" align="left" valign="top">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#333333">
</td>
</tr>
</table>
</td>
<td width="30" height="30" align="right" valign="top">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#555555">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30" height="30" align="left" valign="bottom">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#444444">
</td>
</tr>
</table>
</td>
<td width="30" height="30" align="right" valign="bottom">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#666666">
</td>
</tr>
</table>
</td>
</tr>
</table>
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
I am writing an HTML newsletter and for some reason my img width does not extend the full width of the td tag despite having the same pixel width. My image shows up as 180, but the width of the td tag is 186. provided below is my code.
<table width="600" bgcolor="#ffffff" height="30" cellpadding="0" cellspacing="0">
<tr >
<td width="10"></td>
<td width="180" height="30" bgcolor="#000000"><p style="text-align:center; color:#ffffff">ALONSOS</p></td>
<td width="10"></td>
<td width="180" bgcolor="#000000"><p style="text-align:center; color:#ffffff">ZEN WEST</p></td>
<td width="10"></td>
<td width="180" bgcolor="#000000"><p style="text-align:center; color:#ffffff">LUCKIE'S TAVERN</p></td>
<td width="10"></td>
<tr>
<td width="10"></td>
<td width="180" height="30" bgcolor="#ffffff"><img src="zenwest.png" width="180"/></td>
<td width="10"></td>
<td width="180" height="30" bgcolor="#000000"><img src="zenwest.png" width="180"/></td>
<td width="10"></td>
<td width="180" bgcolor="#000000"><img src="magerks.png" width="180" /></td>
<td width="10"></td>
</tr>
<tr>
<td width="10"></td>
<td width="180" ><p><b>Saturday, Feb. 9th</b></p>
<p>$3 Bud Light</p>
<p>$4 Soco & Lime</p>
<p>$3 Bud Light</p>
</td>
<td width="10"></td>
<td width="176"><p><b>Saturday, Feb. 9th</b></p>
<p>$3 Bud Light</p>
<p>$4 Soco & Lime</p>
<p>$3 Bud Light</p>
</td>
<td width="10"></td>
<td width="180"><p><b>Saturday, Feb. 9th</b></p>
<p>$3 Bud Light</p>
<p>$4 Soco & Lime</p>
<p>$3 Bud Light</p>
</td>
<td width="10"></td>
</tr>
</table>
table-cell width is similar to display: inline in that it does not necessarily respect the provided width, and in this case it depends on the table. The table cell widths will increase to fit the width of the entire 600px-wide table, resulting in the seemingly odd behavior you are seeing. You can either increase the in-between <td>s such that the total widths add up to 600, or you can remove the table width and have it be whatever it's going to be (something like 580px).
All the td tags in your markup have '180' width. Try setting the preferred td tag's width to '186'.
If you remove the width on the table the spacing ends up the way you want it.
<table bgcolor="#ffffff" height="30" cellpadding="0" cellspacing="0">
jsFiddle example
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.