After reading a number of answers to this problem, it seems none of them have solved the problem. I'm trying to send and email via VerticalResponse and they use html. The message is created stacking multiple images, each with links, but it's supposed to look like one image. Problem is that the preview looks good and so does viewing it in a webpage, but email display shows white space between each image. See http://jsfiddle.net/xMW7N/42/ for code. Please help!
<body>
<div style="text-align: center; ">
<span style="font-size:8pt;"><img align="normal" alt="Facebook - MetricRunFest" border="0" height="126" hspace="-20" name="FB" src="https://141790a61d-custmedia.vresp.com//a091cd9b91/Top.jpg?0.7593426643870771" style="width: 600px; height: 126px;" title="Facebook - MetricRunFest" vspace="0" width="600" /></span><br />
<span style="font-size:8pt;"><a href=website"><img align="normal" alt="Metric Runners - Online Photos" border="0" height="205" hspace="-2" name="MetricRunFest - Online Photos" src="https://141790a61d-custmedia.vresp.com//a091cd9b91/Message%20Blank.jpg?0.8384064519777894" style="width: 600px; height: 205px;" title="Metric Runners - Online Photos" vspace="0" width="600" /><br />
<img align="normal" alt="website" border="0" height="127" hspace="-2" src="https://141790a61d-custmedia.vresp.com//a091cd9b91/Message%20Blank_UpsideDown%209.jpg?0.44395816628821194" style="width: 600px; height: 127px;" title="website" vspace="0" width="600" /></a></span><br />
Different browsers treat white space differently. It's good to write everything on 1 line if possible, with no needless spaces or newlines.You can try like this:-
<span><img src="image1.jpg"></span><span><img src="image2.jpg"></span><span><img src="image3.jpg"></span>
There is a breaking space between every image which is part of the problem. Also, try giving the images display: block style.
http://jsfiddle.net/xMW7N/47/
Everything I have seen on html emails, and from the experience I have in doing them myself, the best option is using tables, unforunately. It can really help with all layout problems.
I'd recommend reading http://24ways.org/2009/rock-solid-html-emails for a lot of tips, including an entire section on images. Especially using img {display:block;} for Hotmail and align such as <img src="image.jpg" align="right"> instead of floats.
Not that you are necessarily doing those parts wrong, but they are good to remember in general.
Related
I'm creating a personal website using Github. In this markdown file, I'm trying to align a photo to the left then have a brief intro of myself right next to the photo. This is my current code.
<img align="left" width="300" height="440" src="image/photo.JPG">
my introduction text goes here
What do I need to do to add some margin to the image so that the text is not bumping into the image? Thank you so much!
You can try this:
<img style="margin-right: 1.5rem" align="left" height="auto" width="300" src="https://thumbs.dreamstime.com/b/introduction-concept-word-cork-board-77226561.jpg" />
<p>Hi, this is the introduction...</p>
Or you can opt to use a multi-column layout and specify a column gap to your liking:
<section id="introWrapper" style="column-count: 2; column-gap: 50px">
<img>
<p></p>
<section>
Being a professional C++ programmer, I'm a very new to HTML :)
The problem is reproducible under Internet Explorer 11 Windows 10.
Other browsers (Edge, Firefox, Chrome) - works fine.
Code:
<table>
<tr>
<td width=500><h1>Free Monitor Manager</h1>
<br>
It's a simple utility.
<br><br>
</td>
<td width=20></td>
<td><img style="vertical-align:top;" src="main_window.png" /></td>
</tr>
</table>
Problem is shown on this screenshot:
Here is how it should be and how it is in non-IE browsers:
Addition:
Here is how it looks using DIV code below :( Image is above the text:
Here's a more simple version. And yes, please avoid use table tags for general layout:
.prod-img {
margin-left: 20px;
float: right;
}
/* this is optional if you want to set an overall width */
.outer-container {
width: 700px;
}
<div class="outer-container">
<img src="http://placehold.it/350x150" class="prod-img">
<h1>Free Monitor Manager</h1>
<p>It's a simple utility.</p>
</div>
Fiddle here:
http://jsfiddle.net/mark47/5mt66fpL/
The CSS "floats" the image to the right side of the parent container. We're adding a margin-left: 20px to it so there's always some space between it and the text.
Setting an overall width is optional. Could also use max-width
Trust me, you still want to do this sort of thing with DIVs rather than a table.
Like this:
<div style="width:350px;float:left">
<h1>Free Monitor Manager</h1>
<br>
It's a simple utility.
</div>
<div style="position:relative">
<img style="vertical-align:top;" src="http://maps.wunderground.com/data/images/ne_rd.gif" />
</div>
In short, this builds two divs, one with your text that is set to the left, and one with the right that is set relative to it.
You can put whatever you want in either side.
But more importantly, this sort of thing is much more cross-browser friendly.
I have a forum # http://forum.banaisbul.com
If you check the site you can see there's a problem with the header background. I want to change the entire header background to the color of the logo background. But I don't know which codes to put where.
Matthew Rath gave you the correct answer to the problem that you wrote. But the bigger problem that you have revealed is that you do not know how to use your resources. Take some time and learn to use your web developer tools (web inspector, etc). Then you can solve these issues quickly by yourself.
It's #404040 - Tested in Photoshop:
HTML:
<div style="background-color: #404040;">
<a href="http://forum.banaisbul.com">
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</a>
</div>
Photoshop Image:
From the looks of it you can simply add some CSS to the div that contains the header image.
<div class="imgheader">
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</div>
Then in your CSS file out could do
.imgHeader{
background-color: #3D3D3D;
}
Alternatively,
<div style="background-color: #3D3D3D">
</div>
The hardest part will likely be matching the CSS color hex code (e.g. #3D3D3D) to your image. You may want to look here to try to get an exact match : Paletton.com
You need to style the container div which currently has no selector assigned to it:
http://puu.sh/blDRr.png
This being the case you could do:
.cnt-container > div {
background-color: "your colour"
}
you could also add it directly in your page-template (this is called 'inline styling'):
a couple of lines below your opening body tag you'll find
<div>
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</div>
and you need to change it to
<div style="background-color:#404040">
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</div>
I have been trying to code fluid images in my HTML emails, and everything I find does not seem to work. I have tried
html
<img src="http://image.e.writersstore.com/lib/fe9b15737567067576/m/2/11569swwheader.jpg" alt="Learn, Market, Network" width="600px" height="274" border="0" style="display:block;" />
css
img {
max-width: 100%;
height: auto !important;
}
and just about every variation of it, inline and everything, but I cannot get it to work. Any suggestions?
I have a few jpeg images on this page that, for some reason, do not show up in either Firefox or Chrome, but fine in IE 8 and 9. If I click the image URL in Firefox browser source, it shows up just fine.
http://www.chemoutsourcing.com/banners.php
The paths are correct, using a mix of both full and relative urls, and am using the IMG tag correctly. I'm very baffled at the simplicity of this.
<div style="margin:5px 0;">
600px by 160px<br />
<img src="http://www.chemoutsourcing.com/images/banner_ads/mainheader_2013_600x160.jpg" border="1" width="600" height="160" alt="" />
</div>
<div style="margin:5px 0;">
600px by 160px<br />
<img src="images/banner_ads/mainheader_Pharma_600x160.jpg" border="1" width="600" height="160" alt="" />
</div>
<div style="margin:5px 0;">
160px by 600px<br />
<img src="images/banner_ads/mainheader_2013_160x600.jpg" border="1" width="160" height="600" alt="" />
</div>
<div style="margin:5px 0;">
160px by 600px<br />
<img src="images/banner_ads/mainheader_Pharma_160x600.jpg" border="1" width="160" height="600" alt="" />
</div>
I used inspect element on chrome, and it shows the following inline styles attached to all the img elements:
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
background-position: 600px 160px;
That can't be right.
The best solutions occur by accident.
I tried viewing this page in Chrome Private mode, and they appeared fine. So that means...
The browser extension AdBlock was reading the images' subfolder "banner_ads" in the source and treating them as 3rd party content to block.
Once I rename the folder, the issue should go away on its own.
Change directory name to ensure the word 'ads' isnt there. For example: if image source is src=images/ads/your_pic.png then rename the folder 'ads' to anything but not 'ads'. for example - src=images/visitor_image/your_pic.png
This should work, if not then its not about browser, its about your re-directions.
p.s. ignore syntax mentioned here, use your own.
Cheers
Had the same problem. Figured out the picture not showing correctly was named .JPG while others were named .jpg. Renaming apparently fixed the problem for me.