Hi I'm working on an email for a company in HTML. They want me to display a png image with transparency but for some reason when I try it shows up like it can't find or load it. I've made sure to copy the specific source in sublime yet it still doesn't work. Is there a problem with .pngs in html? The .jpg is working fine.
a picture showing my png failing to load
if it's relevant, I'm using the foundation framework.
<body>
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<table class="container">
<table class="row">
<tr>
<th class="small-12 large-12 first columns">
<div class="imgbox">
<img class="mainimage" src= "assets/links/KDIemail1-bg.jpg" />
<div class="ricohtop">
RICOH CUSTOMERS
</div>
<img class= "toplogo" src="/assets/Links/kdi-toplogo.png" >
</div>
</th>
<th class="small-12 large-6 first columns">
</th>
<th class="expander"></th>
</tr>
</table>
</table>
</center>
</td>
</tr>
</table>
</body>
Edit: I'm an idiot. It was being blocked by the red div and there was a sass error I didn't notice. Thanks to everyone who answered I kinda wasted your time though haha!
<img class="mainimage" src= "assets/links/KDIemail1-bg.jpg" />
<img class= "toplogo" src="/assets/Links/kdi-toplogo.png" >
Your second image is missing a / and the src has a extra / at the start. Also Links is capitalized.
Please try this fix
<img class= "toplogo" src="assets/links/kdi-toplogo.png" />
Try removing the leading slash / from the PNG image path.
On Unix-based systems (e.g. macOS, Linux, etc) a leading / indicates a path from the file system root. In your HTML, I believe you need instead a relative path (i.e., one without the leading /).
As correctly noted by NewbLeech, might be a good idea to close your <img> tag as well.
Related
<!DOCTYPE html>
<html>
<head>
<title>Firecore's Profile</title>
</head>
<body>
<div style="background-color:#DC143C; text-align:center">
<p><h1>Firecore Starblade</h1></p>
</div>
<p style="text-align:center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRz83KYRPqRKFLb4rtJdS6JzGL-OZ-OhSVE5nOz1Q7CZ3seOe1-"; width="10%" ; height="10%">
</p>
<div>
<table border="1px" align="center">
<thead style="background-color:#DC143C">
<tr>
<th>Attributes</th>
<th>HP</th>
<th>AP</th>
<th>Dex</th>
<th>Str</th>
<th>Int</th>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color:#DC143C"><strong>Value</strong></td>
<td>100</td>
<td>50</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
</tbody
</table>
</div>
<div style="text-align:center">
Back
</div>
</body>
</html>
Just starting out learning HTML. Making a practice site and ran into this problem. Tried googling it but unable to locate the cause. Not understanding why the "Back" HyperLink is showing above the table instead of below. I thought maybe it was because of the uses of p and div elements but i tried different combos with no luck. Thanks for your help in advance.
This seems like a simple problem, but it's actually really interesting. On a simple level, the problem is that the </tbody> tag is missing the closing >. Put it in and your code works.
But the more interesting question is why?
Well, it turns out that the problem is that you are in fact not closing the table tag. Your missing > essentially means you have a tag that looks like this: </tbody </table>. That's one tag and the browser will think "ah, we're closing the tbody and we've got some other stuff that doesn't make sense here so we're going to ignore it."
So you never actually close the table tag. This means that you now have some invalid markup in your table. To be precise, the following code is now part of your table's code:
</div>
<div style="text-align:center">
Back
</div>
</body>
</html>
This is handled according to the rather obscure rules listed here in the HTML5 specification section "Unexpected markup in tables". The basic meaning of all that specification (which the W3C confesses is "for historical reasons, especially strange") is that all the unexpected/invalid markup inside the table gets put before the beginning of the table.
That's why your link does the surprising thing of moving before the table. A simple mistake (the missing >) has ended up sending your browser down a whole rabbit warren of mistaken parsing.
This is because you have a broken close tag for tbody.
<div style="background-color:#DC143C; text-align:center">
<p>
<h1>Firecore Starblade</h1>
</p>
</div>
<p style="text-align:center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRz83KYRPqRKFLb4rtJdS6JzGL-OZ-OhSVE5nOz1Q7CZ3seOe1-" ; width="10%" ; height="10%">
</p>
<div>
<table border="1px" align="center">
<thead style="background-color:#DC143C">
<tr>
<th>Attributes</th>
<th>HP</th>
<th>AP</th>
<th>Dex</th>
<th>Str</th>
<th>Int</th>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color:#DC143C"><strong>Value</strong>
</td>
<td>100</td>
<td>50</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
<div style="text-align:center">
Back
</div>
Close your
https://jsfiddle.net/Delorian/pygbjfk6/
</tbody>
P.S. using JS Fiddle or a similar tool is a good way to learn HTML & CSS, as is getting to grips with Developer Tool in Chrome for manipulating HTML, CSS & JS on the fly.
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.
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 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