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.
Related
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'm experiencing a bit of a frustrating problem with no real means to find solution...
I'm coding an HTML email and I have a particular table that is expanding all the way to the end of the browser. Everything I've tested this in (All browsers, Yahoo, Gmail, Outlook Mac 2011) did nothing of the sort. I received a screenshot from a recipient though that is very out of whack. I'm not sure how I can go about fixing this when everything I try it in looks fine...
Incorrect:
Correct:
As you can see in the screenshot, the center column is expanding as far as it can between the two columns beside it. In the correct screenshot you will see how it should actually appear.
If anyone can give me some kind of direction it would be greatly appreciated.
<!--Container-->
<table cellpadding="0px" cellspacing="0px" width="600px" style="margin:0px auto;border:0px;border-spacing:0px;border-collapse:collapse;display:block;background-color:#1a223e;">
<tr>
<td style="vertical-align:top;">
<!--Left Column-->
<table width="227px" cellpadding="0px" cellspacing="0px" style="border:0px;border-spacing:0px;border-collapse:collapse;margin:0px auto;display:block;padding:0px;">
<tr>
<td><img src="left_image.jpg" width="227" height="932" style="display:block;border:0px;border-spacing:0px;border-collapse:collapse;vertical-align:top;background-color:#1a223e;" /></td>
</tr>
</table>
</td>
<td style="vertical-align:top;">
<!--Content-->
<table width="340px" cellpadding="0px" cellspacing="0px" style="border:0px;border-spacing:0px;border-collapse:collapse;margin:0px auto;display:block;vertical-align:top;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:16px;font-weight:normal;color:#1a1a1a;background-color:#ffffff;">
<tr>
<td style="vertical-align:top;display:block;">
<img src="headline.jpg" width="271" height="85" style="display:block;margin:0px auto;border:0px;border-spacing:0px;border-collapse:collapse;background-color:#ffffff;margin-bottom:20px;padding-top:25px;" />
When using the deprecated width and height attributes rather than CSS, you need to adhere to their semantics. The attributes take either a number value, implying pixels, or a percentage followed by a % as a value. So:
<table width="600"> <!-- correct -->
<table width="60%"> <!-- correct -->
<table width="600px"> <!-- invalid attribute value! -->
Most HTML renderers aren't really pedantic about this, but it would appear your client found one that is. I'm pretty sure changing it to width="600" will fix your problem.
You can actually see on the Incorrect screenshot that this is the solution since it also ignores your cellspacing declarations, defaulting them back to the normal value of 1 because they have the px included. Note that even in CSS this is considered bad form - 0 has no dimension at all, and as such no unit to measure it in, so in CSS you should also always write 0 rather than 0px, 0em or 0%.
when you are coding email templates always prefer to set <td width="600"> instead of <table width="600"> , set width for each <td> and it will be ok , let me know if it does not work
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!
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.