Here's the link, and as seen at the bottom of the pictures in my table is a 5px space that I would like to go away.
RELEVANT HTML
<table border="1" bordercolor="#D88830" style="background-color:#555555;" cellspacing="0">
<tr>
<td>
<img src="../../../images/team_members_dusty_arlia.jpg" alt="Dusty Arlia Picture" border="0" />
</td>
<td style="padding:25px; vertical-align:top;" width="550">
<b>Name</b>: <i>Dusty Arlia</i><br />
<b>Position</b>: <i>Owner</i><br />
<b>Start Date</b>: <i>Founded on April 20, 2010</i><br />
<b>Interests</b>: <i>Loves to snowboard in the winter, play volleyball in the summer, and gives lessons on foosball year round.</i>
</td>
</tr>
I have this problem often when coding HTML emails since you have to use tables.
Put a style of vertical-align:bottom; on the image.
The reason given on this page is that images are inline elements and so space is reserved for typeface decenders... makes sense and works for me.
You can put
style="margin-bottom: -5px" on each of the images, it would be better to declare a class with this attribute and use it on the images.
E.G.
<img src="../../../images/team_members_jacquelyn_buffo.jpg" alt="Jacquelyn Buffo Picture" border="0" style="margin-bottom: -5px">
try this
<img src="../../../images/team_members_dusty_arlia.jpg" alt="Dusty Arlia Picture" border="0" style="margin-bottom:-5px" />
I saw you added the margin-bottom:-5px - just wanted to throw out an alternate solution:
<img style="float:left;" ... />
That fixes the problem as well, might be a better overall solution rather than using negative margins.
I know this question is several years old by now, but I happened upon it while encountering the same issue.
All you need to do is set display: block; on the offending image, whether it be in CSS or inline.
Hope this helps anyone else who finds this answer!
Related
I'm looking for a Quick/Dirty HTML-solution for a one-time problem
I have a lot of images I want to add to a HTML-page, and have them resized to predefined sizes.
For that I at first used :
<img src="1980_cover.jpg" alt="HTML5 Icon" style="width:128px;height:200px;">
<img src="1981_cover.jpg" alt="HTML5 Icon" style="width:128px;height:200px;">
Looks how I want it, but seems I can't add some text over it
So I tried :
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="128px" height="200px" background="1980_cover.jpg" valign="bottom"><font size="+1" color="black">1980</font></td>
<td width="128px" height="200px" background="1981_cover.jpg" valign="bottom"><font size="+1" color="black">1981</font></td>
</tr>
</table>
The problem I have now, and can't find a solution is how to resize the images instead of cropping them.
As said, I just need this once, so it only should do what's needed, as simple as possible, legacy or bad HTML-coding isn't an issue for me
Anyone ?
In case you just want to achieve this with your second attempt, you can use CSS3 background-size property like so:
background-size: 128px 200px;
You can use this property together with your background image in an HTML inline style tag.
I am trying to enhance our old html site (webstore) with schema and am having some difficulties getting started. We have over 1,500 individual html product pages that I would like to start adding Schema to, so getting this correct to begin with is a must.
The biggest issue thus far is how to add the product image code as our site layout is table based with the main product image inserted as a background element. Most of the research examples I have found so far show different implementations, is this possible?
Here is a code example:
<TR>
<TD COLSPAN=2><IMG SRC="images/spacer.gif" WIDTH=122 HEIGHT=10 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2><IMG SRC="images/spacer.gif" WIDTH=122 HEIGHT=18 ALT=""></TD>
</TR>
</TABLE>
</td>
<td valign="top">
<table width="599" border="0" cellpadding="0" cellspacing="0" background="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg" style="background-repeat: no-repeat;">
<tr>
<td width="259" valign="top"><span class="style2 "><IMG SRC="images/spacer.gif" alt="" WIDTH=259 HEIGHT=150 border="0"><br></span>
<table width="238" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><span class="style109 style31">The HOBBIT<br> BILBO'S STING SWORD</span><span class="style117"><br> <span class="style33">UC2892 United Cutlery</span></span></td>
</tr>
From this code, I would like to highlight images/LOTR/BKG_Hobbit-Sting-UC2892.jpg as the product image via Schema.org.
I first tried adding the info to the <HEAD> section, but it does not check out correctly on Google's structured data testing tool:
<div itemscope itemtype="schema.org/Product">; <meta itemprop="image" content="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg"></meta>
Also, testing in Bing Markup tester gives me the result:
We are not seeing any markup on this page. Please ensure the markup has been implemented correctly.
Is it not okay to add the Schema data via <div> to the head area?
Also, should the image link be a complete URL www.example.com/images/LOTR/BKG_Hobbit-Sting-UC2892.jpg?
As your table markup doesn’t seem to be very maintainable, and as the (obsolete) background attribute can’t be used for Microdata, the best way in your case would probably be to duplicate the content and mark it up with meta/link elements.
You can add this markup in the head or in the body, but you can’t use div in the head, so it’s easier to do it in the body.
So in the body, you could simply add this:
<div itemscope itemtype="http://schema.org/Product">
<link itemprop="image" href="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg" />
</div>
You have to use link instead of meta if the value is a URL. And this allows you to specify any kind of URL, absolute or relative (just like in the a element).
(Also note that neither meta nor link have a closing tag, so it’s <meta> or <meta />, but not <meta></meta>.)
That said, Microdata works best if you mark up your existing content, without duplicating it. If you would have to duplicate it, it might work better for your to use JSON-LD instead of Microdata.
I've researched this problem, finding many suggested fixes on the web, but nothing is working.
The problem is the gap between a specific TD element in a table in an HTML email I'm designing. It's displaying this way only in Outlook 2007 and 2010.
Here is a link to a screen grab of the problem
In the sidebar on the right, there should be no gap between "Level 2" and the thin rounded corner box above it.
Here is the code for the nested table that creates the blue box:
<table class="box" width="200" border="0" cellspacing="0" cellpadding="0"><tr><td style='line-height:0;font-size:0'><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_top.gif" style="display:block" width="200" height="10" /></td></tr><tr><td class="box_dark"><h2>Level 2<br /><span class="white">Care Assistants</span></h2><h2>Level 3<br /><span class="white">Senior Carers</span></h2><h2 class="norule">Level 5<br /><span class="white">Managers and Deputy Managers</span></h2></td></tr><tr><td style='line-height:0'><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_bottom.gif" style="display:block" width="200" height="10" /></td></tr></table>
As you can see, I've removed all white space as this was suggested in one of the work-arounds I found. I've also inserted the 'line-height:0;font-size:0' style in the TD element and the 'display:block' style in the image itself, again all suggested work-arounds. None of these has made the slightest difference.
This problem does not appear in any other email client or browser.
Please help!
Using tables is standard practice in html email builds because css support is poor in email clients, particularly Outlook.
Keep your table structure but try these additions:
Add valign="bottom" to the td cell containing box_dark_top.gif and valign="top" to the next two cells
For each image, set the css as style="display:block;margin:0;padding:0"
Use inline css rather than internal
<table class="box" width="200" border="0" cellspacing="0" cellpadding="0">
<tr><td valign="bottom"><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_top.gif" style="display:block;margin:0;padding:0" width="200" height="10" alt="" /></td></tr>
<tr>
<td valign="top" class="box_dark">
<h2>Level 2<br /><span class="white">Care Assistants</span></h2>
<h2>Level 3<br /><span class="white">Senior Carers</span></h2>
<h2 class="norule">Level 5<br /><span class="white">Managers and Deputy Managers</span></h2>
</td>
</tr>
<tr><td valign="top"><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_bottom.gif" style="display:block;margin:0;padding:0" width="200" height="10" alt="" /></td></tr></table>
Outlook 2007 onward uses Word to render HTML. Here's an article about this, with links to more strongly-opinionated articles and websites.
Maybe you could try designing your message in Word (or Outlook itself)? Of course then it may not render properly in a sane email client.
Set the height of the TD as well as any other TD that should have a fixed height:
<td valign="bottom" height="10" width="200">
*You should also be using width on ALL TD's in email.
I've found out that Outlook is wrapping img tags with and styling a margin-top whenever they "feel" like it. You can check the html generated by saving the email as html.
When coding a HTML email newsletter Outlook 2010 is acting up. (surprise surprise)
The following screenshot is the result: http://screencast.com/t/PSZqP7wg
This screenshot shows what's happening (same, but images turned off): http://screencast.com/t/DrbexyHnytJ
Obviously, the middle white column is to narrow. Should be 604px wide, but is a lot less. It seems Outlook is placing extra padding next to the spacer images.
Anyone has an idea why this is happening?
This is the source in the body tag:
<table width="761" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" height="151" style="height: 151px;" style="padding: 0px;"><img width="761" height="151" src="http://www.bothino.be/newsletter/top.jpg" alt="" /></td>
</tr>
<tr>
<td width="77" style="width: 77px;">
<img src="http://www.bothino.be/newsletter/spacer.jpg" width="77" alt="" />
</td>
<td width="604" bgcolor="ffffff">
test sdlkfjhklsdjfhqsdklfh qklsdfh klqsjf lqksjdf lkqsjdhf lkdflkqshdfkl jqhsdlkfj
hqslkdfh qlksjdfh lqskjdhf lkqjshdlfk jqhsldkfh qlsdjfh lqksjdflk qsdflkqshdklfh
klqshdf kqshdklf hqskldfqklsd
</td>
<td width="76" style="width: 76px;"><img src="http://www.bothino.be/newsletter/spacer.jpg" width="76" alt="" /></td>
</tr>
<tr>
<td height="151" colspan="3">
<img width="761" height="151" src="http://www.bothino.be/newsletter/bottom.jpg" alt="" />
</td>
</tr>
</table>
You just need to add a background color to both tags. the widths are displaying correctly.
I'm used to issues with "undefined" blank spaces and line breaks in IE and Outlook. They are usually interpreted as a real, wanted space, formatted by style of the nearest parent (if any).
That's why i prefer writing htm like this:
<tr>
<td height="151" colspan="3"><img
src="http://www.bothino.be/newsletter/bottom.jpg"
width="761" height="151" alt="" /></td>
</tr>
Line breaks inside a tag will make no difference at display time ... but apply a similar structure to the code.
The important part is no blank between TD and IMAGE tag.
Maybe, this doesn't explain and solve that huge indentions in your screenshot.
my experience with Outlook is to never ever never ever use the rowspan and colspan attributes. This is guaranteed to cause trouble. Should a table cell require a different layout/width than the one above/below it, nest another right into it with the correct layout. this way the overall basic grid stays intact. Not nice, but then again: outlook plays dirty and so will you (have to). All tables need to have cellpaddign=0 and cellspacing=0. This helps me to get over similar issues.
sometimes it's better to leave out width for td's eg leave out width=77 and rest of width for all td's. that way it can expand automatically to fill the entire row. or you can also include a table withing that tr.
I'm building a template for an HTML email I'll being sending via .NET. I don't do this often and I know I have to stick to tables and inline CSS. I just sliced up some images and I have two that need to stack. I understand there are issues with this in terms of whitespace in the HTML code. As a result, I've tried it all on one line, e.g.
<td valign="top" style="width: 314px;"><img src="/i/header_logo.jpg" width="314" height="92" alt="Logo" /><br /><img src="/i/woman.jpg" width="314" height="617" alt="Woman" /></td>
I'm previewing this in my browser and the two images are separated by some space. I also have a global line of CSS resets at the top like:
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;}
</style>
Does anyone know how to stack two images in a <td> and have them flush against each other?
Update: It turns out I had a doctype at the top like a normal web page and that caused the issue. It had nothing to do with my HTML/CSS combo.
I figured out the problem. I didn't have a doctype defined and therefore the rendering mode was really messed up.
alternatively try align="left" on your images. Works in some email clients.
You could cheat, and embed another table within the column containing the pics.
<td>
<table>
<tr><td align="left"><img1 ...></td></tr>
<tr><td align="left"><img2 ...></td></tr>
</table>
</td>
Is that what you mean by stacked and flush?