I'm currently working on an email template for a project. Basically, I have a table set up, one row contains some stripes, the next a black bar (to match the site's layout).
Question is: Is there a way to place an image in the table, and have it continue into the second row without destroying the formatting of that second row?
Many thanks,
Will
EDIT:
This is the outlook at the moment:
<table style="width: 100%; height:18vh;" cellspacing="0" cellpadding="0" style=" border-collapse: collapse; border-spacing: 0;" background="http://s588191233.websitehome.co.uk/projects/kindle/img/emailwallpaper.jpg">
<tr height="80%">
<td>
</td>
</tr>
<tr style="background: #222; height: 20%;">
<td>
</td>
</tr>
</table>
Trying to have the image appearing on the left hand side. Normally, I would achieve this via absolute positioning, but I can't as its email. We tried to approach of segmenting the image, but getting it to scale between email clients proved nigh on impossible.
You can do this with "rowspan". The code is below and here is a fiddle.
<table style="width: 100%; height:18vh;" cellspacing="0" cellpadding="0" style=" border-collapse: collapse; border-spacing: 0;">
<tr>
<td rowspan="2" style="background: url('https://leadingpersonality.files.wordpress.com/2013/05/smug-smile.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100px;"></td>
<td style="background-image: url('http://s588191233.websitehome.co.uk/projects/kindle/img/emailwallpaper.jpg');">
<div style="height: calc(18vh * .8);"></div>
</td>
</tr>
<tr>
<td style="background: #222;"><div style="height: calc(18vh * .2);"></div></td>
</tr>
</table>
Related
I'm trying to create a table with a decorative border with the content in the middle. So I've created a 3x3 table with images in all the outer cells and content in the middle cell. The code looks like this:
<table cellpadding="0" cellspacing="0" border="0" width="60%">
<tr>
<td style="background:url(box_topleft.png);background-repeat:no-repeat transparent;width: 45px; height: 125px"></td>
<td style="background:url(box_topmiddle.png);repeat-x; height: 125px"></td>
<td style="background:url(box_topright.png);background-repeat:no-repeat transparent;width: 45px; height: 125px"></td>
</tr>
<tr>
<td style="background-image:url(box_middleleft.png);background-repeat:repeat-y;width: 45px;"></td>
<td style="background-color:white">text</td>
<td style="background-image:url(box_middleright.png);background-repeat:repeat-y;width: 45px;"></td>
</tr>
<tr>
<td style="background:url(box_bottomleft.png);background-repeat:no-repeat transparent;width: 45px; height: 125px"></td>
<td style="background:url(box_bottommiddle.png);repeat-x; height: 125px"></td>
<td style="background:url(box_bottomright.png);background-repeat:no-repeat transparent;width: 45px; height: 125px"></td>
</tr>
</table>
Everything lines up and looks great on a white body background. But when there is another color background or a background image for the body, the background color peeks between the cells.
A simpler example, given a blue body background, the following example should just be a white rectangle:
<table cellpadding="0" cellspacing="0" border="0" width="60%">
<tr>
<td style="background-color:blue; width:10px; height:100px"></td>
<td style="background-color:blue; height: 100px">text</td>
<td style="background-color:blue; width:10px; height:100px"></td>
</tr>
</table>
But the browser shows blue lines between the TD.
This happens in Chrome, partially in Firefox and not at all in IE. The cell padding and spacing is already zero, so I don't know why there's any background visible between the cells in Chrome. Is there anything else I need to do?
I've also added the following without success:
table {
border-collapse: collapse;
}
table, th, td {
border: 0px;
}
Thanks. Any help appreciated.
How can I move the rows titled "border one" and "border two" to the top and bottom of the cell they reside in? If I try padding top/bottom, it messes up the structure upon zooming in/out.
Here's a fiddle: http://jsfiddle.net/0uzjyxa5/
<table align="center" border="1" cellpadding="0" cellspacing="0" width="680" height="942" style="border-top: 1px solid white;">
<td style="width: 288px; height:auto;">
</td>
<td>
<table border="1" width="100%">
<tr><td>border top</td></tr>
</table>
<table border="1" width="100%">
<tr><td>venue info</td></tr>
</table>
<table border="1" width="100%">
<tr><td>border bottom</td></tr>
</table>
<td style="width:17px;"></td>
</td>
</table>
You can align your table data using
table td {
vertical-align: bottom;
}
or
table td {
vertical-align: top;
}
I have the following HTML code:
<table width="600px" height="275px" cellspacing="10" cellpadding="0" border="0" align="center" style="background: #ffff00; padding-left:0px; padding-right:0px; text-align: center;">
<tbody>
<tr>
<td colspan="3">Silo'd Doc & Header - "Your doctors wants to connect with you."</td>
</tr>
<tr style="text-align: center;">
<td style="height: 275px; width: 175px; background: url('http://wmed.com/images/email/POLCampaign/BlueBox.png') no-repeat;">STUFF GOES HERE</td>
<td style="height: 275px; width: 175px; background: url('http://wmed.com/images/email/POLCampaign/BlueBox.png') no-repeat;">OTHER STUFF GOEScd HERE</td>
<td style="height: 275px; width: 175px; background: url('http://wmed.com/images/email/POLCampaign/BlueBox.png') no-repeat;">AND FINALLY</td>
</tr>
</tbody>
</table>
Displays the following in IE:
And the following in FF:
I would use SPAN/DIV but only table is allowed in my codebase.
How can I have it so the blue boxes are centered horizontally within the yellow main table and each blue boxes contents stays inside the blue boxes with a 5px padding at the edge in all the browser?
add overflow:auto and word-wrap:break-word to your <td> elements.
CMIIW~
vertical and horizontal alignment and height percentage not working correctly in firefox Although it works fine on IE and Chrome
i set hight and width to 100% in html and body
html,body { heigh:100% ; width:100% }
and i tried all possible solutions like text-align: -moz-center; display:block;
and here's my code
<table cellpadding="0" cellspacing="0" border="0" style="width: 100%; height: 93%;">
<tr style="height: 42px; width: 100%">
<td style="width: 80px; background-image: url(Images/logo.png); background-repeat: no-repeat;
height: 42px;">
</td>
<td style="height: 42px">
</td>
</tr>
<tr align="center" valign="middle">
<td style="height: 196px;" align="center" valign="middle">
<table class="partTable" style="padding-bottom: 20px">
<tr>
<td align="center" style="font-size: xx-large; font-family: Arial Black; color: #C11B17">
<span>
<%=System.Configuration.ConfigurationManager.AppSettings["AppName"]%>
</span>
</td>
</tr>
</table>
<table border="0" style="text-align: -moz-center; vertical-align: middle; display: block;
margin: 0 auto;">
<tr>
<td valign="middle" class="partHolder" style="width: 314px; height: 201px;">
--Content
</td>
</tr>
</table>
</tr>
notice: the table doesn't take the 93% of the page. it takes like an auto .and thats happened when I put <!DOCTYPE html> before html tag
Use style margin:0 auto to center your table.
Make sure all containers for table are height: 100%;
For example:
this will work
this won't work - and here is the fix
And you have some misconvenience in your code:
<tr style="height: 42px; width: 100%">
^^^^^^^^^^^^ this is ok
</tr>
<tr align="center" valign="middle">
<td style="height: 196px;">
^^^^^^^^^^^^^^
This is wrong. you should
remove it to make table auto-risze.
And you should use `height` only to <tr>
it takes like an auto .and thats happened when I put
before html tag
Firefox simply goes mad if you use height:93% and then you use height:42px,height:196px for rows. I believe Firefox is using more strict method to render HTML+CSS when you use <!DOCTYPE html> tag
Also.. don't use text-align for table,tr - because they doesn't contains any text. Use it only for td
I need curved bordered CSS for IE8 and all major browsers. currently I am trying with CSS PIE
jsfiddle demo is here. But I would suggest the answerers to download the PIE.htc file form here and try the HTML as a standalone page to get the real effect in IE8.
My problem is the <td> containing the "Thank you for registering" text is not curving in IE8 in jsfiddle. If I run it as a HTML page, it is curving in IE8 but the blue background is overlapping the "Thank you for registering" <td> (but its background is "#f2f2f2").
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:0px; padding:0px;">
<tr>
<td> </td>
<td style="width: 60%; text-align: center;background: #0067C8;">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="3" style="height: 50px; background-color: #262626; width:100%; text-align: left;">
<img src="twitter_logo.png" width="200" height="50" alt"Twitter" />
</td>
</tr>
<tr>
<td colspan="3" style="height: 25px;"> </td>
</tr>
<tr>
<td style="width:3%;"> </td>
<td style="width: 94%; background-color: #f2f2f2; height: 400px; font-family: arial; font-size: 30px; color: #2DB8ED; text-align: center; border: 2px solid #bcbcbc;text-align: center;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; behavior: url(PIE.htc);">
Thank you for registering
</td>
<td style="width:3%;"> </td>
</tr>
<tr>
<td colspan="3" style="height: 25px;"> </td>
</tr>
</table>
</td>
<td> </td>
</tr>
</table>
I think its mainly because of Problems with z-index.
Check here for more details. general issues encountered when using PIE
Have you tried, http://jquery.malsup.com/corner/ jquery plugin to add curves?
$(function () {
$('table table tr:eq(2) td:eq(1)').corner();
});
Demo : http://jsfiddle.net/bDvRd/4/
Try add
position:relative;
z-index: 0;
by Using CSS3Pie htc for border-radius in IE8
OR CSS3 PIE - Giving IE border-radius support not working?