background shows through table cells - html

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.

Related

Strange Chrome Issue Table Border Top

I have spotted a strange issue with chrome when rendering table borders. I have four columns and I want the third column to have no borders. In Firefox it displays correctly, so that it looks like the first and second columns are a separate table from the fourth column, as you can see here:
However, in Chrome, the top border of the first columns extends right across all the other columns as you can see here:
This is what the html code is for this:
<tr style="border: none;">
<td style="width: 120px;">Surname</td>
<td style="width: 300px;">Bloggs</td>
<td style="border: none; width: 10px;"> </td>
<td rowspan="3" style="width: 100px;"><div class="studentimg" style="background-image:url('<%=strStudentPhoto%>');"></div></td>
</tr>
I know it is the first column that is cause the issue because I change the code to this:
<tr style="border: none;">
<td style="width: 120px;">Surname</td>
<td style="border-top: none; width: 300px;">Bloggs</td>
<td style="border: none; width: 10px;"> </td>
<td rowspan="3" style="border-top: none; width: 100px;"><div class="studentimg" style="background-image:url('<%=strStudentPhoto%>');"></div></td>
</tr>
and in Chrome it still shows as above, whereas in Firefox it now shows as only the first column have a top border, like this?
Anyone have any ideas how to fix this for Chrome?
Thanks
David
The following code (based on yours) does not show the problem you described in Chrome.
Note: I removed a lot of the inline styles, i removed the inline border from the trs, I applied rowspan="3" to the third cell in the first row and omitted the third cell in the following rows. For the rest of the settings see yourself in the snippet below:
table {
border-collapse: collapse;
}
td {
border: 1px solid #777;
}
<table>
<tr>
<td style="width: 120px;">Surname</td>
<td style="width: 300px;">Bloggs</td>
<td rowspan="3" style="border: none; width: 10px;"> </td>
<td rowspan="3" style="width: 100px;">
<div style="width:100px;height:100px;background:url(https://placehold.it/67x100/fc5) center center no-repeat;background-size:contain;"></div>
</td>
</tr>
<tr>
<td>Surname</td>
<td>Bloggs</td>
</tr>
<tr>
<td>Surname</td>
<td>Bloggs</td>
</tr>
</table>

Email CSS/HTML - Image position

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>

IE8 Standards Mode - weird behavior of table columns - glitchy TD width

The problem itself is only visible in IE8 Standards Mode (I'm using IE8/WinXP VM on VMWare Player), it looks normal in IE9+ and other browsers. Here's how it looks in IE8:
And this is how it SHOULD look:
Here's the code (without the background images, but they don't change anything): http://jsfiddle.net/pe6esnuw/6/
<table class="msgTable" cellspacing="0" cellpadding="0">
<tr>
<td class="msgTableTL"></td>
<td class="msgTableT" colspan="2"></td>
<td class="msgTableTR"></td>
</tr>
<tr>
<td class="msgTableL"></td>
<td class="msgTableContent" colspan="2">Content goes here blabla</td>
<td class="msgTableR"></td>
</tr>
<tr>
<td class="msgTableBL"></td>
<td class="msgTableB"></td>
<td class="msgTableBT"></td>
<td class="msgTableBR"></td>
</tr>
</table>
The arrow (gray block in the fiddle) should stay 42px wide and the TD element to the left should stretch to occupy the rest of the space, but that does not happen. How can that be fixed? The bubble is flexible-width, so hardcoding px values is not an option.
P.S. Why do I have to post the same code from the fiddle here? It's useless without visual representation, same as most other code!
What if you just add a div in the bottom middle section (42px wide and 20px high) and place that in msgTableBT cell (now with colspan of 2)? fiddle here: http://jsfiddle.net/q5wjzwLL/
<tr>
<td class="msgTableBL"></td>
<td class="msgTableBT" colspan="2"><div class="bg"></div></td>
<td class="msgTableBR"></td>
</tr>
And your CSS would change slightly:
.msgTable .msgTableBT {
background: #000000;
width: auto;
}
.bg
{
float: right;
width: 42px;
height: 20px !important;
background: #DDDDDD;
}

How to keep contents inside a cell of a table with some margin

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~

curved bordered CSS for IE8

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?