My table cells have a font-size of 9pt. Within these table cells there is either a spacer image or text. If it's a spacer image I just want the height of the table, the height of the spacer image (2px in this case). Code below:
<table width="100%" cellspacing="0" cellpadding="2" border="0" class="foo">
<tbody>
<tr valign="top">
<td width="100%" colspan="4" class="foo">
<img width="0" height="1" alt="" src="spacer.gif">
</td>
</tr>
</tbody>
</table>
<table width="100%" cellspacing="0" cellpadding="2" border="0" class="foo">
<tbody>
<tr valign="top">
<td width="100%" colspan="4" class="foo">
bar <span>barbar</span>
</td>
</tr>
</tbody>
</table>
As of right now, whether it's text or a spacer image the height of the cell is 9pt. And if this wasn't bad enough, I CANNOT change the markup. What you see is what I get.
OK, cpara :)
This is not best practice, but if you really cannot change your HTML, you could still use a stylesheet. If the styles in the stylesheet do not overwrite the HTML styles, you can also try to add !important (like width:100% !important;) to any style in your stylesheet...
Well, if the 9pt font-size is not set anywhere but the text is rendered to 9pt, it can be that you do use a separate stylesheet and the 9pt are set in either the div or the body, or your browser's standard font-size (if not font-size is set) is set to 9pt...
But great, if the answer was finally closer than thought and it works now for you :)
Related
Coding inline and with tables, I made a simple HTML e-mail signature that contains two images. When I send it from MacOS Mail several different clients, it works well on desktop. On iOS Mail, it shrinks down the size of the table, which is expected behavior, but it makes it significantly smaller than it needs to be, thus making my font-sizes tiny.
The table has a 3 row, 2 column structure, two colored rows and one white one which has a colspan for full table width.
Things I have tested to no effect:
more or less text content
giving the cells a width in pixels
giving the whole table width:100%
marking images display:block or display:inline
Apparently iOS Mail thinks the table is wider than it is, or at least treats it that way.
When I remove the images the two columns become equally wide and the table fills the whole width. So I'm looking for a solution in how the images are styled; does anyone know if I can add some CSS or HTML attribute to the images to fix this?
Here's the code, stripped of some text styling to keep it legible:
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td valign=top style="background:#f9f2c8;padding:21px 20px 0 20px;vertical-align:top;">
<div style="font-size:13px; ">
<div style="font-size:16px;font-weight:600;">Name of the sender </div>
<div>Description of the role of the sender</div>
</div>
</td>
<td valign=top style="background:#96e7cf;padding:18px 20px 0 16px;vertical-align:top;">
<img src='logo.png' width=124 height=41 alt="Org logo" style="width:124px;height:41px;display:inline;" />
</td>
</tr>
<tr>
<td valign=bottom style="background:#f9f2c8;padding:0 20px 20px 20px;vertical-align:bottom;">
<div><img src='line.png' alt="divider" width=210 height=24 style="width:210px;height:24px;display:inline;" /></div>
<div style="font-size:13px;">06 1234 5678</div>
</td>
<td valign=bottom style="background:#96e7cf;padding:0 20px 20px 20px;vertical-align:bottom;">
<div style="font-size:14px; font-weight:600; white-space:nowrap;">tagline of the org</div>
<div style="font-size:13px;">organisation.nl</div>
</td>
</tr>
<tr>
<td colspan=2 style="padding:20px;">
<p style="font-size:13px;margin:0 0 8px 0; ">Werkzaam op maandag, dinsdag, woensdagmorgen, donderdag en vrijdag</p>
</td>
</tr>
</table>
First, make your table width 100%:
<table border="0" cellspacing="0" cellpadding="0" width="100%">
That will make it fit the full width of its container.
Second, on the text-reduction, this whole table appears to only go down to about 415px. So if your mobile is smaller, it will scale it all as one group. To prevent that, make one or both of your images responsive. Here, I've made the divider responsive:
<div><img src="line.png" alt="divider" width="210" height="24" style="width: 100%;height: auto;display:inline;max-width: 210px!important;"></div>
I've added !important to the max-width because Outlook iOS has a default style that would change it 100% otherwise, potentially bloating your image.
Continue to use the width and height attributes because Outlook Windows desktop uses them.
I'm having trouble with my #media query. When I resize the browser (chrome) it doesn't shrink. I've tried a couple solutions now and can't get it to work. I'm sure it's a simple user error but from the different articles and blogs I have read it seems this is the logical solution and should work.
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="body-table">
<tbody>
<tr align="center">
<td width="100%" class="container" bgcolor="#ffffff" height="100">
And the media query:
#media screen and (max-width: 600px){
*[class="container"] { width:100% !important;}
}
I think the problem is you have a fixed width in your table.
So try changing your fixed width to percentage.
Like this
width="80%"
Your .container table not shrink because it parent is fixed width. So instead of fixed width parent we will add width to the td that hold your main table.
<table border="1" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="600">
<table class="container" width="100%" style="background: peru;">
<tr>
<td>This will shrink when width less than 600 pixels.</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
You can find a more detail answer here or this pen here and I highly recommended you to check out this guide to see which CSS style each email clients support.
Change width="600" to width="50%"
I have three entities in a row, currently I use table to display them:
<table>
<tbody>
<tr>
<td id='td1'>some text</td>
<td id='td2' style='width:600px;'>some text</td>
<td id='td3'>some text</td>
</tr>
</tbody>
</table>
What I need is to resize left and right cells simultaneously when browser resizes. I wonder if it is possible without JS.
I have even tried CSS resize which apparently does not work in IE, played with widths of the cells, but still without any success. I am totally a newbie in CSS.
Is it even possible? Thanks in advance.
Can't verify since I'm on a mobile but have you tried....
<table>
<colgroup>
<col class="first" />
<col />
<col class="last" />
</colgroup>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Then use the col.first and col.last classes to style them with css.
W3C: http://www.w3.org/TR/html-markup/col.html
Oh, and, remove all the css from your html. Having css inline will make the document completely unmaintainable through css files. And remove the IDs also from td:s and always use " to quote html attribute values.
You can also try to add:
table {
table-layout: fixed;
}
To prevent the browser from calculating the initial width of each cell according to their contents and give them all initially an equal width. (height will still expand according to content.) Then override certain columns with css.
try this css
table{
width:100%;
}
it works.
I am working on an HTML email and having some css style issues in Outlook 2007, 2010, 2013.
I have two images in a td cell and 1 of them i want a vertical border divider to separate them. I placed a border right on the first (left image) and it works in all clients/browsers by Outlook 2007, 2010, 2013.
Here is the code i am using:
<tr>
<td bgcolor="#673695" style="color:#ffffff;padding:14px 0 14px 14px;text-align:left;border-collapse: collapse;">
<img src="lowreslogo.png" border="0" width="130" style="border-right:1px solid #a377cd;padding-right:20px;" align="left">
<img src="email_logo.png" border="0" width="150" align="left" style="padding-top:7px;">
</td>
</tr>
I have run this through litmus.com and need some help with these couple of clients that are left. I cant modify the two images to have a border built in just as a side note...
Outlook 2007 does not support CSS border on <img> elements - see the report from the Email Standards Project for Outlook 2007. There is a more detailed example from the same site here.
So it seems that the Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 documentation is incorrect as it states that the <img> element does support border-right.
I suggest wrapping the first image in a <span> and styling that instead. Sorry I can't test as I don't have Outlook.
You are also declaring border=0 in html on the same image. Not sure if that is overriding your css declaration in this case.
You could try setting that to 1 (or removing it altogether). If you set it to 1, you'd have to set the color on the 3 other border sides to match the background so they are effectively invisible.
I think you can wrap those 2 images in a table like below. Some extra code but will fix rendering issue.
<tr>
<td bgcolor="#673695" style="color:#ffffff;padding:14px 0 14px 14px;text-align:left;border-collapse: collapse;">
<table border="0" cellpadding="0" cellspacing="0" width="300" style="color:#ffffff">
<tr>
<td width="130"><img src="lowreslogo.png" border="0" width="130" alt="" style="display: block;" /></td>
<td width="19"></td>
<td width="1" bgcolor="#a377cd"><td>
<td width="150" style="padding-top:7px;"><img src="email_logo.png" border="0" width="150" alt="" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
Is there a standard method for calculating fixed width values for tables in HTML? Right now, I'm working on formatting tables on a web page to be a fixed width, I have a table that's within another table, when testing the page in IE I notice that the alignment of the colon is off as the second picture below illustrates. My intention is to make sure the colons are properly aligned as they are in Firefox and was just curious if the misalignment was due to the settings in the HTML or if it has more to do with how the browser renders the page.
Firefox:
Internet Explorer:
UPDATE:
Sorry for not providing any reference code, here's a snippet of the particular section I'm working with.
<div style="width: 1600px; text-align: center; position: absolute; top: 10%; left: 0%;">
<span id="labelInstructions" style="font-size: xx-large;">PAGE TITLE <br><br></span>
<table style="width: 1000px;" align="Center" border="0">
<tbody>
<tr>
<td style="width: 1000px;"><label for="FileUpload1" style="font-size: x-large;">ENTER: </label><input name="FileUpload1" id="FileUpload1" size="70%" type="file"></td>
</tr>
<tr>
<td style="width: 1000px;"><span id="fileUploadError" style="color: Red; font-size: medium;"><br><br></span></td>
</tr>
<tr>
<td style="width: 1000px;">
<table style="width: 1260px;" border="0">
<tbody>
<tr>
<td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE INSTRUCTIONS:</td>
<td style="font-size: x-large; width: 1800px;" align="left" valign="top">INSTRUCTION 1<br>INSTRUCTION 2<br></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE EXAMPLE:</td>
<td style="font-size: x-large; width: 1800px;" align="left" valign="top">EXAMPLE 1<br>EXAMPLE 2<br><br></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
I know it's ugly, just a note, this is an ASP.Net generated webpage and I'm setting the attributes of the HTML elements pro-grammatically from the code behind. I sorta inherited this and my employer wants to keep major changes to a minimum.
UPDATE 2:
When I adjust the inner table width I can get it to align in IE when set to 1377px. For Firefox, the sweet spot for alignment is 1260px.
All you have to do is make the table columns the same width as each other.
Example of style:
table tr td:first-child { background-color:yellow; width:200px; }
HTML:
<table>
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
<tr><td>Row 3 Cell 1</td><td>Row 3 Cell 2</td></tr>
</table>
Sorry for not directly answering to your question, but...
Stoneage is over! You really shouldn't use Tables for layouting-purposes, as they are hardly-accessible for disabled people and make your HTML-File way too big (in relation to the content).
Seperate Content and Layout, use CSS.
Make sure to place the the parts that you want to align together in one table.
<table id="layout">
<tr><td>HEADER</td>
<tr><td>
<table id="form">
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
</table>
</tr>
<tr><td>FOOTER</td>
</table>
i would create two classes, left and right and apply the left class to the <td> on the left and the right class to the <td> on the right. the left class would be something like
.left{width:100px; text-align:right;}
heres an example