I'm having trouble getting this code to show up correctly in WebKit browsers(chrome/safari). It looks fine in IE6, IE7, and FireFox.
<table width="100%">
<tr>
<td rowspan="2" style="vertical-align:middle;">
<img src="/i/thumbnails/acotgc25sm.gif" alt="Gift Certificate"/>
</td>
<td style="vertical-align:middle;">
Wishlist
</td>
<td style="vertical-align:middle;">
Link to Us
</td>
<td style="vertical-align:middle;">
Affiliate Program
</td>
<td style="vertical-align:middle;">
Privacy
</td>
<td style="vertical-align:middle;">
Guarantee
</td>
<td rowspan="2" style="width:160px;">
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>
</td>
</tr>
<tr>
<td style="vertical-align:middle;">
About Us
</td>
<td style="vertical-align:middle;">
Shipping
</td>
<td style="vertical-align:middle;">
Why Buy From Us
</td>
<td style="vertical-align:middle;">
Contact Us
</td>
<td style="vertical-align:middle;">
Help
</td>
</tr>
</table>
The problem is that WebKit makes the top row very small and the bottom row fill in the rest of the space instead of each row having an equal height.
Anyone have any ideas of how to make it show up how I want it to in WebKit based browsers?
I have a few recommendations for you but I can't answer your question completely because WebKit seems to render your source fine when I try it.
First, maybe you can change width="100%" to style="width:100%;" Perhaps combined with the other markup, it's putting the browser in quirks mode.
Second, make sure you have the correct doctype on and your code validates or AT LEAST comes close. The doctype I used when copying & pasting your code was XHTML Strict.
Otherwise, please post the source code of the whole page or just link to a live demo. Even a screenshot would help.
I could help more with a live example to test on but you could try adding this to your tr tags.
<tr style="height: 50%;">
Assuming you only need two rows this will bring them to equal height.
a proper example to ensure it is not showing correctly in webkit is the following:
<table width="200" border="1">
<tbody>
<tr>
<td rowspan="2" width="15">
this is a very high rowspan 2 row that will thus be split over 2 rows, it prevents the second row from being formatted in height
</td>
<td>
this should be big instead
</td>
</tr>
<tr height="20">
<td height="20">
this row fails to size to 20 height on webkit
</td>
</tr>
</tbody>
</table>
as you can see the left part is rendered fine, but the right part should be different, as in the top row should populate the left over space and the bottom row is set to 20 height (as you can see neither the tr height nor the td height is taken into consideration by webkit). this renders fine in all other browsers
EDIT:
after playing around and tinkering about my problem, I came to the below solution.
completely relying on jquery reading the height attribute property from the row you want to change:
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#pipnorowspan").height(function(){
return $("#rcarowspan").height() - $("#piplowerrow").attr('height') + 2;
});
});
</script>
</head>
<body>
<table width="200" style="border-collapse:collapse; border:1px solid #000;" id="ertable">
<tbody>
<tr style="border:1px solid #000;">
<td rowspan="3" width="15" id="rcarowspan" style="border:1px solid #000;">
this is a very high rowspan 2 row that will thus be split over 2 rows, it prevents the second row from being formatted in height
</td>
<td id="pipnorowspan" style="border:1px solid #000;">
this should be big instead
</td>
</tr>
<tr height="20" id="piplowerrow" style="border:1px solid #000;">
<td height="20" style="border:1px solid #000;">
this row fails to size to 20 height on webkit
</td>
</tr>
</tbody>
</table>
</body>
</html>
Related
I'm trying to make a centralize button in HTML e-mail. The tricky part here is my wish the button to be as wide as its content. The following code works perfect except in Outlook.
Here is the HTML:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td style="width:1%;white-space:nowrap">
<a href="#" style="text-decoration:none">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="margin-top:16px;padding:8px 16px 8px 16px;background-color:#5091cd;border-radius:2px">
<a href="#" style="font-size:15px;letter-spacing:.04em;color:#ffffff;text-transform:uppercase;text-decoration:none;display:block;text-align:center;max-width:600px;overflow:hidden;text-overflow:ellipsis">
Go to platform
</a>
</td>
</tr>
</tbody>
</table>
</a>
</td>
<td></td>
</tr>
</tbody>
</table>
The expected result is:
The actual visualization:
Increasing the width of the td tag will help you adjust the content in one line.
<style="width:20%;white-space:nowrap">
if you want to take the full width of the container, make td width auto.
currently, td tag width is deciding how the content text will wrap.
As per new email rules (thanks Microsoft and Google) all margins are stripped from your HTML. So using margin: 0 auto is out for a solution.
The structure is:
<table>
<tr>
<td align="center">
Button
</td>
</tr>
Now I could add yet another table inside the td but it is already like the 2nd nested table and I'm hoping there is a different solution other then nesting another table. The align="center" doesn't work.
Try this code, I'm using this code to send html email and it works fine for gmail, outlook
<table style="width: 100%;">
<tr>
<td style="text-align: center;">
Button
</td>
</tr>
</table>
Also, you can check allow css property for html email here: https://www.campaignmonitor.com/css/
Cuz CSS in email is dangerous... buh BAM. ;D
<table width="100%">
<tr>
<td align="center">
Button
</td>
</tr>
</table>
Old, school, but why not just use blank td's on each side? Ah, it's the 90's again!
<table>
<tr>
<td width="25%"></td>
<td width="50%">
Button
</td>
<td width="25%"></td>
</tr>
</table>
None of the answers I found helped me so I was hoping that someone will know what to do here.
I have a master page which is designed by a table, I have 3 rows, the first row's height is 20%, the second is 5% and the third is 75%. I want my logo to fill the whole first row which has only one in it, but the original photo is way bigger than the window's size. I tried to make the image's width and height 100% but it still is bigger for some reason and it makes the row about 40%....
<table style="position:absolute; height:100%; width:100%" border="1">
<tr style="text-align:center; height:20%;">
<td colspan="2">
<img style="width:100%; height:100%" src="Pictures/logo.jpg" />
</td>
</tr>
<tr style="text-align:center; height:5%">
<td colspan="2">
<asp:ContentPlaceHolder ID="index" runat="server"></asp:ContentPlaceHolder>
</td>
</tr>
<tr style="height:75%">
<td style="width:20%">
</td>
<td style="width:80%">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
</td>
</tr>
</table>
When I delete the image, it's all good, the page looks fine but when I add the logo, the width is fine but the height looks the same as the third's height.
Is there any was I can fix this?
Thanks in advance!
You can set it as absolute and expand it to full width and height
<tr style="text-align:center; height:20%;">
<td colspan="2" style="position:relative">
<img style="width:100%; height:100%;position:absolute;top:0;left:0;" src="Pictures/logo.jpg" />
</td>
</tr>
Also, the wrapping tr should be set to position:relative so the img positioning will be in relation to the tr.
I have four table cells, two of which have one image each (the other two cells aren't related to my problem, AFAIK). I am trying to vertically align the smaller image at the top of its table cell. I have tried using vertical-align:top for the image within the table cell, and it isn't working. I am unsure as to why, as I cannot see anything that would cause the issue (using Firebug).
<table class="store-table">
<tr>
<td class="merch-name" colspan="2"><a title="Everybody Needs Love" href="http://kunaki.com/Sales.asp?PID=PX00XUQBLL&PP=1" target="_blank">Everybody Needs Love</a></td>
<td class="merch-name" colspan="2"><a title="Jimmy Clanton In Concert" href="http://kunaki.com/Sales.asp?PID=PX00Z59GSX" target="_blank">Jimmy Clanton In Concert</a></td>
</tr>
<tr class="pics">
<td style="width: 25%;"><img class="alignnone size-full wp-image-345" alt="everybody-needs-love" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/02/everybody-needs-love.jpg" /></td>
<td style="width: 25%;">$15.00</td>
<td style="width: 25%;"><img class="alignnone size-medium wp-image-312" alt="Jimmy Clanton In Concert" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/02/In-Concert-Cover-178x300.jpg" width="178" height="300" /></td>
<td style="width: 25%;">$20.00</td>
</tr>
</table>
The demo site in question is here. http://www.josephruscitti.com/clients/jimmyclanton/store/ There are three rows of content all together on the table in this page, the row I'm having trouble in is the second row.
You need to apply the vertical align to the td like so:
<table class="store-table">
<tr>
<td class="merch-name" colspan="2"><a title="Everybody Needs Love" href="http://kunaki.com/Sales.asp?PID=PX00XUQBLL&PP=1" target="_blank">Everybody Needs Love</a></td>
<td class="merch-name" colspan="2"><a title="Jimmy Clanton In Concert" href="http://kunaki.com/Sales.asp?PID=PX00Z59GSX" target="_blank">Jimmy Clanton In Concert</a></td>
</tr>
<tr class="pics">
<td style="width: 25%; vertical-align:top;"><img class="alignnone size-full wp-image-345" alt="everybody-needs-love" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/02/everybody-needs-love.jpg" /></td>
<td style="width: 25%;">$15.00</td>
<td style="width: 25%;"><img class="alignnone size-medium wp-image-312" alt="Jimmy Clanton In Concert" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/02/In-Concert-Cover-178x300.jpg" width="178" height="300" /></td>
<td style="width: 25%;">$20.00</td>
</tr>
</table>
By the way, applying css inline to every table cell is not a great method. You'd be better using separate CSS for some of this. For example:
.store-table td { width: 25%; }
Hotmail does not support margin in HTML emails. Is there an alternative?
I would suggest use tables and play with the width of columns. HTML emails are sometimes better with tables. Also, you can take a look at an email you have in your inbox that does what you want and inspect source code.
As this answer seems a little vague I would also like to point to a very complete answer which covers in more details html emails.
Note:
When it comes to email HTML, note that all best practices from web development goes out the window.
Here is an example using tables,
<table border="0" cellspacing="0" cellpadding="0" align="left" style="width:600px;margin:0 auto;background:#FFF;">
<tr>
<td colspan="5" style="padding:15px 0;">
<h1 style="color:#000;font-size:24px;padding:0 15px;margin:0;">Header</h1>
</td>
</tr>
<tr>
<td style="width:15px;"> </td>
<td style="width:375px;">
Left Column Content
</td>
<td style="width:15px;"> </td>
<td style="width:180px;padding:0 0 0 0;">
Sidebar Content
</td>
<td style="width:15px;"> </td>
</tr>
<tr>
<td colspan="5" style="padding:15px 0;">
<p style="color:#666;font-size:12px;padding:0 15px;margin:0;">Footer</p>
</td>
</tr>
</table>
Live here http://jsfiddle.net/Wr76m/
I was able to get away with transparent horizontal bars, using padding to modify the height. For example:
<hr style="border: transparent; padding: 1px;">