I have an HTML mail which includes a header. It works all fine till the point the images are included. The header is bigger than the relatively sized table. When I then allow Outlook to include the externaly hosted images the header causes the parent object to resize and this screws the whole thing up.
<table width="100%" border="0" cellpadding="0" style="font-family: Calibri;">
<tr>
<td width="28%">
</td>
<td width="44%">
<img src="http://www.domain.com/header.png" style="width: 100%; height: auto;">
I found several websites saying that style="width: 100%; height: auto;" will fix it but it doesn't. How can I fit the image in the parent object instead of resizing the parent object?
with an empty last cell it's works fine for me, it permit to have the 100% width required by the table
<table border="0" cellpadding="0">
<tr>
<td class="one"></td>
<td class="two">
<img src="http://lorempixel.com/500/250" alt="" />
</td>
<td class="empty"></td>
</tr>
</table>
table{
width:100%;
background: grey;
font-size:0;
}
.one{
width:25%;
background: blue;
}
.two{
width:50%;
background: green;
}
img{
width: 100%;
height:auto;
}
https://jsfiddle.net/4822s7w2/
Set the table width to a fixed value (say 250px) instead of 100% which is a relative value. Then you can size it accordingly.
Also I would suggest using <div> instead of tables.
Related
I am aware this type of question has been asked before, but the solutions given there are not giving the resolution for me.
I want the <td> to have 70% width, but the inserted image is pushing the widths for received emails in outlook (I use MS Outlook Pro 2013). I do not want to use unit px because that doesn't work to cover all screen widths. A solution could be to use <div> instead of <td>, but I was told that <div> isn't supported correctly everywhere. Please advise.
HTML
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="template_header" style="background-color: #fee7f3; color: #ffffff; border-radius: 3px 3px 0 0;">
<tbody>
<tr>
<td style="width: 70%;"><img src="/example.jpg" style="width: auto; height: auto; float: left; box-sizing: border-box;"></td>
<td style="width: 30%;"><h1>Example txt</h1></td>
</tr>
</tbody>
</table>
My Attempts
I wrapped the <img> with a <p> tag
I added display: inline-block for <td>
I added attributes width and height for the <td> and <img>
I added width: 100% and height: auto for <img>
The good news is that Outlook doesn't support #media queries so you can override any set values you need to use in email.
Outlook tends to ignore inline styles for image width. Assuming you want 600px-wide email and your image is 400px, code the width like this:
<img src="example.jpg" width="400" style="width: 70%; height: auto;" />
Some other things you should be aware of is that box-sizing doesn't work in most email clients. border-radius does not work with Outlook.
https://www.campaignmonitor.com/css/box-model/box-sizing/
https://www.campaignmonitor.com/css/box-model/border-radius/
Good luck.
I need a 3 column layout in HTML/CSS, but different from anything I can find on here.
What I'm really struggling to achieve:
3 Col table with a fixed width of 740px:
A fluid left column (this should expand/contract with whatever space is left)
A fixed width middle column (130px)
Auto-width right column (which is only as wide as the content, must not wrap text)
Is this even do-able? I've seen exmples of this with a fluid left, fixed right but i didn't know how to then add a 3rd auto-width column
Been driving me nuts for ages!
Added complication: Any CSS style needs to be inline, this is for an HTML email!
Thanks folks.
First of all please see the Help Center article on creating a Minimal, Complete, and Verifiable example. You should be trying out your own solution before posting here for help.
To get you started I created a quick codepen example of what you're looking for. The left section will use whatever space is available. The middle section will always be 130px and the right section will fit the width of whatever content you have. Let me know if you have any questions.
HTML
<table border="1" width="740px">
<tr>
<td>
left
</td>
<td class="middle">
middle
</td>
<td class="right">
right - this will fit to your content
</td>
</tr>
</table>
CSS
.middle {
width: 130px;
}
.right {
width: 1%;
}
Edit:
I just saw your note on making the CSS inline. You would just add the relevant CSS to style tags within the HTML instead of having an external style sheet.
New HTML
<table border="1" width="740px">
<tr>
<td>
left
</td>
<td style="width: 130px;">
middle
</td>
<td style="width: 1%;">
right - this will fit to your content
</td>
</tr>
</table>
Okay i can't beleive i wasted hours trying to get this work, yet I randomly tried this and it DID work!
<table style="width:100%; max-width:740px;" height="65px" cellspacing=0 cellpadding=0>
<tr>
<td height="65px" style="background-color: cyan;">Left</td>
<td height="65px" width="130px" style="min-width:130px; max-width:130px; background-color: yellow;">Middle 130px</td>
<td width="1px" height="65px" style="background-color:green;">dynamic</td>
</tr>
</table>
https://jsfiddle.net/Murdo/5fn1z3g5/
Not sure that setting width to 100% and then limiting it to a max of 740 is the best way...
Or I could put a DIV with a width of 740 and then set the table to 100% width inside the div...
<div style="width:740">
<table style="width:100%" height="65px" cellspacing=0 cellpadding=0>
<tr>
<td height="65px" style="background-color: cyan;">Left</td>
<td height="65px" width="130px" style="min-width:130px; max-width:130px; background-color: yellow;">Middle 130px</td>
<td width="1px" height="65px" style="background-color:green;">dynamic</td>
</tr>
</table>
</div>
UPDATE: This works great in browser.. sadly, outlook does not like DIV width, any max-width or min width either. Back to drawing board!
you can do it easly with CSS flex model.
HTML
<div class="Container">
<div>COL 1
Im taking all the rest
</div>
<div>COL 2</div>
<div>
COL 3
I'm taking excatly what i need
</div>
</div>
CSS
.Container
{
width: 740px;
height: 300px;
display: flex;
background-color: green;
}
.Container div:first-child
{
background-color: red;
flex: 1 0 auto;
}
.Container div:nth-child(2)
{
background-color: yellow;
flex: 0 0 130px;
}
.Container div:nth-child(3)
{
background-color: blue;
flex: 0 0 auto;
}
and here with Inline style (for your mail)
First, I'm new to mobile development, so apologies in advance for what might be a simple question. But I've researched this for a couple of days and just can't seem to get it to work.
I can't get a particular DIV to render at the appropriate height when I switch to a mobile view. All the other divs work fine in both desktop and mobile. The div in question looks fine in the desktop view but not in mobile.
Here's a link to the page: http://echoflyfishing.com/2016
The div in question is the "DOUBLE HAND". I want it the same height as the "SINGLE HAND" above it. No matter what I do, I can't get it to size correctly. I know there's a simple solution but I've tried everything I can think of in terms of height and am stumped.
Here's the relevant HTML:
<div class="sh_container_m">
<table cellpadding="0" cellspacing="0" class="sh_container_table_m">
<tr>
<td style="font-size: 3.5vw;padding-top: 2vw; padding-bottom: 2vw;"><p>Single Hand</p></td>
</tr>
</table>
<div class="sh_images_container_m">
<table cellpadding="0" cellspacing="0">
<tr>
<td>This is where the single hand image carousel will be</td>
</tr>
</table>
<div class="dh_container_m">
<table cellpadding="0" cellspacing="0" class="dh_container_table_m">
<tr>
<td style="font-size: 3.5vw;"><p>Double Hand</p></td>
</tr>
</table>
<div class="dh_images_container_m">
<table cellpadding="0" cellspacing="0">
<tr>
<td>This is where the double hand image carousel will be</td>
</tr>
</table>
</div>
</div>
</div>
</div>
And the CSS:
.dh_container_m
{
display: block;
visibility: hidden;
margin: 0 auto;
width: 100vw;
text-align: center;
}
.dh_container_table_m
{
margin: 0 auto;
width: 100vw;
border: none;
background-color: #fbaa27 !important;
}
Did you mean for your dh_images_container_m div to be nested inside the sh_images_container_m div? It is going to take on it's "parents" properties which may also be contributing to some of your sizing issues.
On a side note, you have your links to the css files in the header as type="text". They should be type="css/text".
use px not vw because it's percentage and define the width of both divs as you want simple one more suggestion is use bootstrap css framework it's better for you you can make responsive site easily with the help of it.
Why does this table height not function?
<table border=1 bgcolor="green" width=80% height="30%">
<tr>
<td rowspan="2" >
This is 1st row 1st column
</td>
<td >
2
</td>
</tr>
</table>
http://jsfiddle.net/zQNS4/
just add the following to your css:
html, body{
height: 100%;
}
As other said, a table doesn't have a height-attriute, but most browsers intrepet that anyway. you can see the result on jsfiddle.
The reason you need to do this is that the parent element of anything that should have a height in % must have a height too (as Shadow Wizard said: "30% of what exactly?" - the parent has to have a height).
The table tag does not contain a height attribute. Try setting the height of the table using CSS styling.
table{
height: 30%;
}
<div style="height: 200px; overflow-y: scroll;">
<table border=1 bgcolor="green">
<tr>
<td rowspan="2" >
This is 1st row 1st column
</td>
<td>
2
</td>
</tr>
</table>
</div>
I just had the same issue.
I have table inside a container ( div config-table ), just setting height didn't work for me. I had to set overflow: auto ( for my case auto was needed ) and now work
.config-table {
height: 350px;
overflow: auto;
}
Here is the code:
<table border="1" cellpadding="2" cellspacing="2" height="250">
<tbody>
<tr>
<td>
<div style="background: url('image path goes here';); width: 300px; height: 250px; position: relative;">
<p style="width: 180px; font-size: 12px; margin-top: 35px; position: absolute;">My TEXT goes here....</p>
</td>
</tr>
</tbody>
</table>
Now, I am i need to increase the width of the image OR need to left-indent the image.
How can I do that ?
I have tried giving the width directly.. But it's not working...
Any advice or suggestion will be thankful and grateful..
You are using image as background of the parent div. If you want to just change the size of image you should use img tag. Something like the example below
<table border="1" cellpadding="2" cellspacing="2" height="250" width="300">
<tbody>
<tr>
<td>
<div >
<img style="float:left;" src="http://www.gravatar.com/avatar/03bc7f86de865926a1cb5036198d00a0?s=32&d=identicon&r=PG" width="150px" height="125px" /></div>
<p style=" display: block; width: 280px; font-size: 12px; margin-top: 35px; position: relative;">We understand you want to choose benefits that suit you and your life. And we regularly review things so we're always offering benefits you say you want to see.</p>
</td>
</tr>
</tbody>
</table>
You could use the CSS3 background-size property.
.myelement {
background-size: 275px 125px; /* input your values here */
}
Alternatively you could make yourimage inline instead of being the background of a DIV and size it using regular width and height that way.
A couple of points about the code you have posted:
Tables should only be used to display tabular data and not for simple layour purposes.
You have no closing DIV tag.