On my site I have images in the travel report, some of which you can click on and are therefore between the a tag of a link. This works well on the site. But if a PDF is made of it, the images with links will be placed behind the text.
We received the code, Robin immediately walked over to it and came back with the house key.<img src="/images/pngegg64.png" alt="Receipt” title="click to view the bill" border="0" align="left"> After dinner to the apartment.
On the website: example HTML/PHP - result in html (pic)
On PDF via dompdf: example PDF - result in pdf (pic)
Does anyone know how this can be solved so that the image also appears between the text and not after the text?
Maybe you can set a z-index value for your image's CSS like this:
img {
z-index: 1;
position: relative;
}
Or try putting the
<img src="/images/pngegg64.png" alt="Receipt” title="click to view the bill" border="0" align="left">
in a block-level element. Wrap a <div></div> around it.
Hope it helps!
Related
<html>
<h3> MY FIRST WEBPAGE </h3>
<H1> DESIGNING MY FIRST WEBPAGE </H1>
<title> MY FIRST TAB </title>
<img src="3333.jpg"
width="800"
height="500" >
<style>
body {font:12px Verdana,Arial; color #428bca; background-color:#5bc0de}
</style>
</html>
how to add boundary to image . ineed to knwo like how toadd a red coloured boundary to enclose the image in a table format
Add Borders to a Images using HTML & CSS
Using HTML/CSS to add borders to an image is easier than what you think. Before you add an image to your post in the text module, you need to switch to the text editor. Then, you will add the image and see the HTML code of the picture. This will look like the following images.

After adding the image to the text module, type this style=”border:5px solid #000000; padding:3px; margin:5px” to add the borders to your images. It will look like the next picture.

As result of that code, the image will look similar to the next picture.

Feel free to make any change to the border width, color, padding, and margin to your images. Also, you can change to the visual editor after you are done with the picture to see the changes that you’ve made. Let us know below if you have any comments or questions; we’d love to hear from you.
I've seen this problem touched on in many questions but none have been specific enough to help me. So I hope it offends no one if I simplify it and ask again. Hope springs eternal!
Is it really IMPOSSIBLE to control the width of an image embeded in an email when Outlook renders it? I.e. control the width of an image for which the html code is
<img src="cid:seal">
I.e. when the html code expects an embedded image instead of one stored elsewhere.
[Note: "seal" is the content ID I assigned when creating the MimeBodyPart with the embedded image].
Details:
I use a Javamail application to send a multi-part email message. The body part is an html document. Another MimeBodyPart carries the image used in the html doc. I've simplified the html test to nothing more than a two column table with the left column for the image and the right column for text.
And absolutely NOTHING I have tried has been able to control the size of the image when opened in OUTLOOK.
The image is always what I assume must be some native size for the image ... which is too big ... so it forces the first cell to be more than 15% wide. Or if I give the cell a fixed width the image overflows the box, i.e. get's clipped.
I put the basic code stripped of all font styling colors etc. below.
I have tried every combination of using width attributes and css style properties on the img tag. I've wrapped the image in another table ... or wrapped it in a div block inside the main table cell ... and even wrapped it in a div block inside a table cell inside the parent table cell. And I've tried specifying widths in fixed pixels and %'s.
It would really be nice if we all knew for sure if this is simply IMPOSSIBLE with Outlook.
Or if it is possible possible, to publish sample code that works. [It's hugely attractive to have the email open its images immediately, and not rely on the reader downloading them.]
NOTE: I seem able to control width when I load the image from an outside source afterwards, i.e.
Thanks for any help.
<html>
<head>
<meta name="viewport" content="width=980, initial-scale=1">
<title>Test Email</title>
</head>
<body style="width:100%; border:0;margin:0;padding:0;">
<table align="center"
style="width:980px; border-collapse:collapse;
margin-left:auto; margin-right:auto;">
<tr style="border:0; margin:0; padding:0;">
<td style="width:15%; border:0; margin:0; padding:0;">
<img src="cid:seal"
style="width:6em; height:auto;">
</td>
<td style="width:85%; margin:0; padding:.5em 0em 0em 0em; border:0;">
Some Titles and stuff
</td>
</tr>
<tr>
<td colspan="2" style="border:0; margin:0; padding:1em 1em 0em .5em;">
<p> 1st paragraph
....
<p> last paragraph
</td>
</tr>
</table>
With help from Eugene above, I discovered at least one good solution.
<img src="cid:seal" width="300" or "300px" of "15%"> DOES NOT WORK.
But when I ditched the quotes this worked
<img src="cid:seal" width=300 height=300>
It does of course mean setting width in % is still a problem since it requires quotes.
But I'll take what I can get. Email now pops open with logo without the user needing to download pictures. AND ... this css body selector also works rendering the background with an embedded image. [I stored the background image with a Content ID of"bkg".]
AGAIN ... unlike the img attribute src="cid:id" that uses quotes, url() requires the id w/o quotes.
<body style="background-image:url(cid:bkg);
background-repeat:repeat;
width:100%;
generic-family:Sans-serif;
font-family:Verdana;
border:0;margin:1em 0 1em 0;padding:0;">
Outlook uses Word as an email editor. The following series of articles provides reference documentation related to supported and unsupported HTML elements, attributes, and cascading style sheets properties:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
You can design the page in Word and then save the resulted document as a web page. Thus, you will find the required HTML markup to use.
I have added a picture to my webpage here http://www.backpacks4aussiekids.com.au/Home.html and it works just fine, but when I tried the same thing in an article here http://www.backpacks4aussiekids.com.au/Articles/what-is-needed.html the pix won't load, even though I followed the same proceedure.
I even tried changing the pix from .jpg to .png and back again. The only way the changes can be viewed is if I clear my site and browser cache before I attempt to view the site.
All the text is able to be viewed but there are either empty boxes where the pix should be or nothing at all.
thanks in advance, des
The image definitely exists as I have checked.
The reason why it's not showing is because the picture on the homepage is within an <img> tag where as the picture on the second link you provided is for some reason within an <input> tag as shown below:
<input type="image" style="width: 511px; height: 684px; float: left;" src="http://backpacks4aussiekids.com.au/images/what we need now/clipboard 1.png" alt="">
Open the article in the article manager, click on the little html button which will open a window, find the code above and change to the following:
<img style="width: 511px; height: 684px; float: left;" src="http://backpacks4aussiekids.com.au/images/what we need now/clipboard 1.png" alt="" />
Hope this helps
I haven't been able to figure out why this is happening. I'm using MailChimp to send out a newsletter and in Outlook 2003 am getting a line (similar to a hyphen) to the right of any image, that is a link. (see attached image)
http://clickstream.ie/img/line.png
Here is the code for the logo at the top:
<a href="#">
<img alt="clickstream logo" title="clickstream logo" src="http://gallery.mailchimp.com/0f36ab4eb559a3dd979199c25/images/clickstream_logo.jpg" style="max-width: 250px;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;vertical-align: bottom;" class="mcnImage" width="176">
</a>
Does anyone know why this would be happening, or has had any experience with this issue.
In Gmail and Hotmail (Outlook) it seems to be fine.
That line might not be from the image, but from an <hr> code you might have included in the page somewhere. Now all you do is, try to change the position of each div around that area, to position: absolute; you might see other divs moving and leaving out that line. but if it does not then you have to check in your code and make sure you have the following correctly.
line-height: ;
outline:;
ertical-align:;
You might also undo any borders you have added to the div. but if not works, then it might be from your external stylesheet.
I need to add a text on each of the image and I have the image gallery constructed using img tags. Can't I append div tags under img tags. Similar to the one shown here :
<img id="img1" class="img1_1" src="hello1_1">
<div class="textDesc">HELLO1_1</div>
</img>
Though the div is appended to img tag , but I cant see the text "HELLO1_1" on the image.
Please can anyone help me?
If you need the source code I can share it with you.
Here is the link to test the scenario :
http://jsfiddle.net/XUR5K/9/
An image tag can not have child elements. Instead, you need to position the DIV on top of the image using CSS.
Example:
<div style="position: relative;">
<img />
<div style="position: absolute; top: 10px;">Text</div>
</div>
That's but one example. There's plenty of ways to do this.
The img element has a self closing tag, so you can't give it child elements and expect it to work. Its content model is defined as empty. Source.
I suspect any children you specify won't be rendered because an img element is a replaced element, as mentioned in the W3C spec.
Rules of good tone.
Use null source in IMG tag.
Use CSS content:"" for WebKit browsers.
Insert element through JavaScript. Clear in HTML does not affect.
Also you can use pseudo elements.
Example: https://github.com/Alexei03a/canvas-img