I have just encountered a strange situation. I have some basic html:
<table bgcolor="#FFFFFF" width="774">
<tr>
<td align=center valign="top">
<br />
Click here to see larger view of scorecard<br />
<img src="../../images/back_01.jpg" border="0" /><br />
<img src="../../images/back_02.jpg" border="0" /><br />
<br />
<img src="../../images/front1.jpg" border="0" />
<img src="../../images/front2.jpg" border="0" />
<img src="../../images/front3.jpg" border="0" />
</td>
</tr>
</table>
and for some reason only 1/2 of the front2.jpg image shows up in the browser. When i view it from disk, the image is perfect but for some reason when i upload and view in a browser it only shows 1/2 the image:
Any suggestions?
Try uploading it again. There might have been some problems with the upload.
I would use FireBug as a starting point, to see if there are any CSS styles being applied to the image at runtime.
Other than that, I think it's hard to tell what the problem might be without viewing the live page ourselves.
I downloaded image to disk and I only see 1/2 the image. It gives me gray in the other half. I would check the resolution of what you expect the image to be, checking I get W443 pixels by H192 Pixels. I would re-do the image. I doubt its a HTML problem.
I have also suffered with the problem and have fixed it by adding the image to the images folder, and then updating the src of the <img /> to be; http://localhost:hostno/folder-where-the-website-stored/images/imagename.jpg
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 have written html code in JSP file and it is for showing icon link. It is successfully running in IE browser but not showing image icon in chrome and Firefox browser and even no adblocker is there in my browsers.
<table border="1" width="90%" class="buttons">
<tr>
<td width="25%">PROJECT
</td>
<td width="25%">
<a href="CrunchifyServlet">
<img height="20px" src="C://Users//Downloads//Start-icon.png">
</a>
</td>
</tr>
</table>
Your image URL points to a resource which ist only accessible for browsers if they have permission to read the file system. Also no one but yourself will have access to this URL.
Better change the absolute URL…
<img height="20px" src="C://Users//Downloads//Start-icon.png">
into a relative one:
<img height="20px" src="./YOUR-PATH-HERE/Start-icon.png">
This also helps you in case you want to copy your files to another server.
Also see https://developer.mozilla.org/en-US/Learn/Common_questions/What_is_a_URL for more information on URLs.
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.
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?