I am trying to put two images side by side inside a <td> (also tried one <td> for each img), but has some white spaces between the images, and do not understand where they come .. I can solve my problem using float, but I'm trying to avoid this. If someone can explain to me why this happens. I took some tips from other questions, but it doesn't work.
Here is my code:
<html>
<head>
<style "text/css">
td, tr, img { padding: 0px; margin: 0px; border: none; }
table { border-collapse: collapse;}
</style>
</head>
<body style="background: black;">
<center>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<img alt="" title="" src="http://i.min.us/ijCTdY.jpg" />
</td>
</tr>
<tr>
<td>
<img alt="" title="" src="http://i.min.us/jj7Yt6.jpg"/>
<img alt="" title="" src="http://i.min.us/ijCo96.jpg"/>
</td>
</tr>
</table>
</center>
</body>
you can notice that the top image has 800 px height, and the other ones has 400px each one, what I need is some kinda square, without any spaces between the images.
imgs are inline elements. The horizontal space between the images is coming from the whitespace between the images in the HTML. The same reason that there's a space between the characters here.
So, to fix that, remove the whitespace: http://jsfiddle.net/xMW7N/2/
The vertical space is also because the images are inline elements. The gap is the space reserved for descenders in letters like g and j.
To fix that, set vertical-align: top on img: http://jsfiddle.net/xMW7N/3/
Although in your case (as mentioned in your question), setting float: left works just fine: http://jsfiddle.net/xMW7N/4/
That works because float: left forces display: block, so all of the problems caused by the images being inline are resolved.
It's the whitespace in your markup itself. If you remove the line-break and the spaces between the two images, the space will go away.
The whitespace is treated as text, as a single space character.
This is easier done without tables: http://jsfiddle.net/feSxA/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background: black;
}
.imgHolder {
width: 800px;
margin: auto;
}
.imgHolder img {
float: left;
}
</style>
</head>
<body>
<div class="imgHolder">
<img alt="" title="" src="http://i.min.us/ijCTdY.jpg" />
<img alt="" title="" src="http://i.min.us/jj7Yt6.jpg" />
<img alt="" title="" src="http://i.min.us/ijCo96.jpg" />
</div>
</body>
</html>
try adding a border="0" in your table element
Add display: block; to your images.
This will remove any gaps caused by the image being inline but you may need to split the cells up to allow them to sit side by side.
You can also remove the whitespace which should get rid of the whitespace.
Related
I am trying to create a HTML Email signature where I place 2 images side by side.
Here is the html code I am using:
https://codepen.io/klodoma/pen/mdeQYrB
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
body{
background-color: white;
margin: 0;
}
img { display: block;}
.row {
white-space: nowrap;
display: flex;
}
</style>
</head>
<body>
<div class="row" style="white-space:nowrap;">
<img src="https://i.postimg.cc/DyCPXxdQ/hair-left.png" alt="Left Image"/>
<img src="https://i.postimg.cc/Mpvbb1dC/hair-right.png" alt="Right Image"/>
</div>
<table border="0" cellspacing="0" cellpadding="0" style="padding:0; margin:0;">
<tr>
<td><img src="https://i.postimg.cc/DyCPXxdQ/hair-left.png" alt="Left Image"/></td>
<td><img src="https://i.postimg.cc/Mpvbb1dC/hair-right.png" alt="Right Image"/></td>
</tr>
</table>
</body>
</html>
I tried:
creating a DIV
creating a TABLE
In Html both look very good, but when I paste this code in an email client (Outlook for example) there are some problems.
If the width of the emails page is not enough, then the div shifts the images(even though word-wrap is disabled).
In the table version there is a vertical space I couldn't get rid of.
Any ideas to solve this? I don't care which solution will work, divs or tables.
There are a few aspects here:
Outlook only reads the height and width numerical values (and if they're outside of the style tag too I think). Here you can see below I've added redundancy to my approach.
<img src="https://imageurl....." alt="alt-text" height="48" width="48" style="display: block; width: 48px; height: 48px;" />
You may also find it helpful to set the width of your initial table at the same point where you have applied the margin and padding resets.
To remove any unwanted vertical space you should also reset the padding to 0 in the <td> elements I believe.
I have tried EVERYTHING I could find. The famous 1px vertical gap on the right side of images still doesn't seem to have a solid fix! Please someone help to to resolve this. I literally have no hair left after pulling them out one by one!
Plesae can someone help?
<style type="text/css">
/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
body{
margin:0;
padding:0;
}
img{
border:0 none;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
}
a img{
border:0 none;
}
.imageFix{
display:block;
}
table, tr, td{
border-collapse:collapse;
}
#bodyTable{
height:100% !important;
margin:0;
padding:0;
width:799px !important;
max-width: 799px !important;
}
</style>
<table bgcolor="red" width="799" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="176" height="115">
<img src="https://www.htref.co.za/signatures/images/img01-01.png" class="imageFix" alt="logo" width="176" height="115">
</td>
<td width="623" height="115">
<img src="https://www.htref.co.za/signatures/images/img01.png" class="imageFix" alt="logo" width="623" height="115">
</td>
</tr>
</tbody>
</table>
Example show of 1px vertical gap on the right side of the image
bgcolor="red"
Is it necessary? Without this the gap disappeared.
On my computer, no border appear !
Put a lightgrey background-color to body, anything at the right of the image.
Why using a table when you can do this with Flexbox, for example ?
Have you tried not put any white space before or after your images? I kind of remember that whitespace in your source code HTML is collapsed but still rendered as a space character in the output. So no space, tab or newline character before or after your img tag.
But if this is all you signature has, you don't need a table (which is a very 90s way to align pictures). You could use directly your imgs (but still without whitespace before or after your tags):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
width: 799px
}
</style>
</head>
<body><img src="https://www.htref.co.za/signatures/images/img01-01.png"
alt="logo" width="176" height="115"
/><img src="https://www.htref.co.za/signatures/images/img01.png"
alt="logo" width="623" height="115"
/></body>
</html>
I'm using tables because I need to send an html email.
any way my trouble is this: I have two images that are stacked one on top of the other. they are both links, meaning inside a tags. The problem is that there a white padding between the two images that I can't get rid of in IE8.
this is the code:
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="http://wwwXXXXXX.com/screening.php" border="0" style="padding:0;margin:0;line-height: 0px">
<img src="http://www.XXXXXXX.com/emails/images/host.jpg" border="0" />
</a>
</td>
</tr>
<tr>
<td>
<a href="mailto:screenings#XXXXXXX.com" border="0" style="padding:0;margin:0;line-height: 0px">
<img src="http://www.XXXXXX.com/emails/images/bottom_all.jpg" border="0" />
</a>
</td>
</tr>
</table>
the space is showing only where theres a tags (tried just images - no problem). originally the padding appears in firefox and IE8, not in chrome. after adding 'line-height' works in firefox, but IE8 still no good....
any ideas?
EDIT: actually, I found out that the problem appears not only in tables, but whenever you have img wrapped in anchors. like this:
<a href="http://wwwXXXXXX.com/screening.php" border="0" style="padding:0;margin:0;line- height: 0px">
<img src="http://www.XXXXXXX.com/emails/images/host.jpg" border="0" />
</a>
<a href="http://wwwXXXXXX.com/screening.php" border="0" style="padding:0;margin:0;line-height: 0px">
<img src="http://www.XXXXXXX.com/emails/images/host.jpg" border="0" />
</a>
Try adding
vertical-align: top;
to your img elements.
This prevents the img from trying to align with the text baseline, which will always leave space underneath for character descenders.
Try to remove the "white space" between the TAGs. open each TAG directly after closing the previous TAG:
<a href="...
><img src="...
/></a>
You should reset all margins & padding in your CSS *{margin:0;padding:0;} it will make your life much easier.
Try adding
a img {
display: block;
}
Maybe IE8 and Firefox have default margins or padding for "a" tags.
Try smth. like:
a {margin:0;padding:0;)
I've deleted all spaces between the tr tags and all their inside elements and it worked
In the following test case, the alt text is horizontally centered, but it's stuck to the top of the box. How do I get it in the middle?
<html>
<body>
<div style="height: 300px; width: 300px; border: solid black 1px;">
<img src="asdfasdf" alt="foo" style="display: block; text-align: center; vertical-align: middle"/>
</div>
</body>
</html>
One advantage of tables is they provide cross-browser vertical centering. DIVs don't. This is once case where I'd bite the bullet and add those ugly TRs and TDs.
<table cellspacing="0" style="width:300px;height:300px;border:1px solid black;">
<tr>
<td style="vertical-align:middle;text-align:center;">
<img src="asdfasdf" alt="foo" />
</td>
</tr>
</table>
It's called a single-celled centering table and ugly as it is, it works.
Try using some spaces at the start of the alt attribute. It was the only thing that seemed to work for me on chrome.
Try with display:table-cell instead of block.
I've been having this problem for awhile now.
Anyways, given this code:
<table>
<tr>
<td><img src="" /></td>
<td valign="middle">Text</td>
</tr>
</table>
This renders a format with an image to the left, and some vertically centered text to the right of it. This works because then I can have multi-line text, and still have the image positioned "nicely".
Now, ideally, tables should only be used for tabular data, yes? So how can I represent this in CSS?
I'm thinking <div> tags? But I encapsulate the entire bit in a <p> box with style="display: table; border: 1px solid black;", and I'm afraid relative positioned divs might end up jutting out of the box, necessitating tweaking, which I am loathe to do in CSS...
Help!
HTML:
<div id="container">
<img src="..." />
<p>text</p>
</div>
CSS:
#container {
width: 200px;
}
#container img, #container img{
width: 100px;
float: left;
}
<div style="vertical-align: middle;">
<img style="float:left;" src="" alt="" />
<p>Your text</p>
</div>
it doesn't matter what tags you are using (especially after a css reset). you just need to set the wrapper tag display: table; and the nested cell tags to display: table-cell; after that you can use the vertical-align you also may need put even more tags around your content to recreate a true table, whit table rows.