<tbody>
<tr>
<td valign="top" align="center" bgcolor="#3f76bf" style="background-position: center; background-size: cover; border-radius: 6px; background-color: #3f76bf; background-image: url('https://mcusercontent.com/73b8e8571a2f854d4f817a5c8/images/1a986052-d10d-4bf7-890f-133862bc982f.png')" background="https://mcusercontent.com/73b8e8571a2f854d4f817a5c8/images/1a986052-d10d-4bf7-890f-133862bc982f.png">
I would like to make the image in the td tag a hyper link, never imagined I would be spending 5 hours on this simple question. Seems I can not just wrap in tag. So frustrated and appreciative of your help.
I wrote up a more semantic way for doing what you're doing. Of course I don't know what the rest of your code looks like and you may have to tweak things. Generally it's not a good idea to use tables for layout. But I don't know how you're using it so I keep it as is.
(Tables should only be used for tabular data)
From the comments I can see you're using this in an HTML email where using tables for layout is still appropriate due to bad support for modern features. I have in-lined the styles for you in the example
<table>
<tbody>
<tr>
<td style="text-align: center;background-color: #3f76bf;">
<a href="https://yoururl.tld">
<img style="max-width: 100%;" src="https://mcusercontent.com/73b8e8571a2f854d4f817a5c8/images/1a986052-d10d-4bf7-890f-133862bc982f.png" alt="Describe the content of the image for someone who can't see the image">
</a>
</td>
</tr>
</tbody>
</table>
Update
I have since learned why they would use background images (for the images to be an equal grid) and for that I wanted to also add a solution which might be closer to your specific use case. Just a reminder to everyone that below code should not be used anywhere but in emails.
/* Ignore this CSS completely for your example */
/* It's just here for the example in SO to look nice */
td {
width: 100px;
height: 200px;
}
<table>
<tbody>
<tr>
<td
valign="top"
align="center"
bgcolor="#3f76bf"
style="
position: relative;
background-position: center;
background-size: cover;
border-radius: 6px;
background-color: #3f76bf;
background-image: url('https://mcusercontent.com/73b8e8571a2f854d4f817a5c8/images/1a986052-d10d-4bf7-890f-133862bc982f.png');
"
background="https://mcusercontent.com/73b8e8571a2f854d4f817a5c8/images/1a986052-d10d-4bf7-890f-133862bc982f.png"
>
<a href="https://yoururl.tld" style="
position: absolute;
top: 0;
right: 0;
botom: 0;
left: 0;
">
</a>
</td>
</tr>
</tbody>
</table>
Try putting a SPAN element inside the element. It should expand to fill the space. Wrap your link around the Span and put your link-able content inside the span
<td><span>CLICK ME DON KICK ME</span></td>
If span does not work try using a element or a .
Related
I've been dealing with a problem, that I cannot seem to find an answer for. Basically, I have a set of divs, all of the same class, but varying in size depending on the data displayed in them. I'm trying to get them to stagger in a certain way. (excuse my bad drawings)
edit: almost forgot to mention, the divs are using the bootstrap class "col-lg-6".
This is the original result:
original effect
The result I was able to achieve:
achieved effect
And the desired result I am trying to achieve:
desired effect
The css styling I used to achieve the current result is as follows:
.div_class {
position: relative;
vertical-align: top;
text-align: center;
display: inline-block;
margin-top: 10px;
}
How could I achieve the desired effect?
Thanks!
You can always use a table to create this effect. Make sure you use the padding within the cells to create the spacing that you need... Hope this helps
<table style="width: 100%;">
<tbody>
<tr style="height:45%;">
<td style="height: 150px; width: 98px;">Div 1</td>
<td style="height: 225px; width: 118px;" rowspan="3">Div 3</td>
</tr>
<tr style="height: 47px;">
<td style="height: 150px; width: 98px;" rowspan="2">Div 2;</td>
</tr>
</tbody>
</table>
We seem to be having some problem with displaying our newsletter in some Outlook 2013's. This newsletter was a template created by a third party. But when we upload it to an email and send it, it works perfectly in almost all cases.(gmail, hotmail, webmail,...) and even in most outlook versions except in a few 2013 Outlook's but not all. The problem is that an image is justed as header in the newsletter and in some case this doesn't fill the whole are as you can see below. In the second image you can see that there is whitespace on the side of the image that shouldn't be there.
Can anyone tell me how i can fix this? Thnx
Here you can find the code used to display the image on the HTML template:
<body style="margin: 0; background: #e5f1fc;">
<table cellspacing="0" cellpadding="0" style="width: 100%; text-align: center; vertical-align: top; margin: 0; background: #eff7fc;"><tr><td style="width: 100%; text-align: center; background: #e5f1fc;">
<table cellspacing="0" cellpadding="0" style="width: 800px; margin: 0 auto; background: #fff;">
<tr>
<td colspan="5" style="width: 100%; font-size: 0; line-height: 0; vertical-align: top; text-align: left;">
<img alt="Companyname" src="images/header.jpg" style="margin: 0; border: 0; display: inline-block;" />
</td>
</tr>
<tr><td colspan="5" style="width: 800px; height: 30px; font-size: 0; line-height: 0; vertical-align: top;"> </td></tr>
<tr>
EDIT:The problem only seems to appear on our new Dell Lattitude 5540 laptops. Every other 2013 installation shows the email perfectly. Only the laptops have this problem. I can't understand what the problem can be. Does anyone have an idea?
Thnx
It's hard to know without seeing the rest of the code, but I'd bet there is something in the email, below the header, that is wider than 800px. In my experience with HTML emails and Outlook, it's either that or an issue with Outlook misunderstanding colspan. Here's an answer from a previous, similar question:
Outlook has an issue where if you put a colspan in the first row of a table, it will mess up the widths of the subsequent rows. The work around for this is that you need to specify your cell widths in the top row, even if it is an empty row.
You may need to specify the width in your first <table> to fix it.
I've designed a newsletter template and there is a detail I'd like to add. As a divider between two tables/content blocks, I'd like to add an arrow that points towards the coming table. I've added a border-top with color to the table and at the center I'd like the arrow(image) to break the border, but I can only get the image to align to the top not overlap it, which is what I ideally would like to do.
The tables have different background color which span the whole viewport, the divider should do the same. The layout is also responsive.
Here is the code I've used. Is what I'm asking even possible in a newsletter in terms of restrictions and compatibility?
Here is my result:
http://jsfiddle.net/qyzq4bvb/
This is what I'm trying to do:
<table border="0" cellpadding="0" cellspacing="0" width="600" id="divider">
<tr>
<td align="center" valign="top">
<img src="http://img.jpg" alt="arrow" width="49" height="24" />
</td>
</tr>
</table>
#divider{border-top:3px solid; border-color:#63A700; width:100%; background-color:inherit;}
You could try using position: relative on your img as shown below.
You may need to make minor adjustments to your image to clean up the left/right edges for a more seamless overlay. A .png file might work better since the .jpg's color does not quite look right (compression?). However, the idea will work.
You may need to add a white top border to the image. Be aware that this type of pixel precision positioning may be sensitive to cross-browser effects.
#divider {
border-top: 3px solid;
border-color: #63A700;
width: 100%;
background-color: inherit;
}
#divider td {
text-align: center;
}
#divider td img {
display: inline-block;
position: relative;
top: -4px;
border-top: 1px solid white;
}
<table border="0" cellpadding="0" cellspacing="0" width="600" id="divider">
<tr>
<td>
<img src="http://dyreparken-nyhetsbrev.s3.amazonaws.com/ikon/arrow.jpg" alt="arrow" width="49" height="24" />
</td>
</tr>
</table>
I'm trying to style an email for gmail. Most of it displays just fine but Gmail is refusing to display the wrapper div apparently. I had a very similar wrapper working before so I can't figure out where the problem is coming from:
<div style=\"border: 1px solid black; width: 595px; height: 842px; background-color: white; border-radius: 10px; text-align: center; padding-top: 6px;\">AAA</div>
(The \" quotes are for PHP)
Gmail seems to remove the wrapper completely and display and div with no style.
It is best practice to use tables for html-email. Divs and css when applied to divs have inconsistent support across email clients, particularly Gmail, which is probably what is causing issues for you.
Your html code should instead look like this:
<table width="595" height="842" align="right" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style="border: 1px solid black; border-radius: 10px; padding-top: 6px;">
<tr>
<td>
AAA
</td>
</tr>
</table>
Note that in many places I've used the old html methods instead of css. This is the best method for html-email.
Is there anything I can do to make IE display table cells as actual blocks?
Given this style:
table,tbody,tr,td,div {
display: block;
border: 1px solid #0f0;
padding: 4px;
}
And this html:
<table>
<tbody>
<tr>
<td>R1C1</td>
<td>R1C2</td>
<td>R1C3</td>
</tr>
</tbody>
</table>
<div>
<div>
<div>
<div>R1C1</div>
<div>R1C2</div>
<div>R1C3</div>
</div>
</div>
</div>
The table renders exactly the same as the nested divs in both Firefox and Safari/Chrome. But in Internet Explorer (8) the property display: block has no effect. The table renders exactly as if I don't set that property.
My main problem is that the cells don't break; They all render on one line. (The tbody and tr elements don't get any borders nor padding. That is not a problem for me right now, though.)
I haven't found any information on the problem when searching. Compatibility charts on quirksmode and elsewhere states that IE supports display: block since v. 5.5. Any discussion on table display problems seems to be when doing the reverse - giving non-table elements any of the display: table-* properties.
So once again, is there anything I can do to make IE render table cells as block?
(The real table is really a table, with tabular data. I would like to keep it that way, and restyle it unobtrusively.)
I applied float: left to stuff. It kinda works.
Live Demo
The biggest problem is width: 100% combined with the padding is making things too wide.
So:
Live Demo (without the problematic padding)
That looks a bit better, but I'm not sure how you can easily add padding everywhere if you need it.
This fails --> miserably <-- in IE7 (it just won't get over the fact that it's a <table>), and even if you don't care about IE7, it will need tweaking for your use case (if it's usable at all).
IE7:
The following worked for me for IE6+:
tr {
display: block;
position: relative
}
td.col1 {
display: block;
left: 0;
top: 0;
height: 90px;
}
td.col2 {
display: block;
position: absolute;
left: 0;
top: 30px;
}
td.col3 {
display: block;
position: absolute;
left: 0;
top: 60px;
}
Assumptions:
cell height 30px
Drawbacks:
Fixed cell height
Cumbersome specification of top property (maybe generate)
Only works when HTML provides classes for columns
Advantage:
Works in all browsers.
When to use:
When you have no control over HTML, but have control over CSS. Some hosted payment solutions come to mind that display in an IFRAME and offer a custom style sheet.
Just figured it out with a collegue of mine.
ALTHOUGH I STRONGLY RECOMMEND TO NOT SUPPORT IE8 AT ALL ANYMORE!
Since you are facilitating the use of an unsupported and currently unsafe product that is not up to par with current standards and techniques. It would be way better to tell your users to upgrade and give them some browser downloadlinks to choose from.
That being said. The CSS below is the minimum css you need to fix it in Internet Explorer 8.
table {
width: 100%;
}
td {
float: left;
width: 100%;
}
<table>
<tbody>
<tr>
<td>cell-1</td>
<td>cell-2</td>
</tr>
</tbody>
</table>
add this code:
<!DOCTYPE html>
我这里是这么解决的，加上上面那条声明语句，display:block对td就会有效。
you need add this code in the top.
<!DOCTYPE html>
<html>
<head>
<style>
td {
display: block;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Job Title</td>
</tr>
</thead>
<tbody>
<tr>
<td><div>James</div></td>
<td><div>Matman</div></td>
<td><div>Chief Sandwich Eater</div></td>
</tr>
<tr>
<td><div>The</div></td>
<td><div>Tick</div></td>
<td><div>Crimefighter Sorta</div></td>
</tr>
</tbody>
</table>
</body>
</html>
Add this line of code in the top, but use 'float' and 'width' is very good.
sorry, my english so poor.
make it display:table-row; instead of display:block
It will work like it is supposed to