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>
Related
I have come across an issue with my custom template in mailchimp.
I use absolute positions with top and left and transform to centre a button over an image. Now this works fine when I preview it, but when I send a test email on Gmail, these values are not there when I inspect, meaning the button is not in the centre.
I did some research and gmail does not like some of those attributes like absolute, top, left, transform etc, so what my question is that is there a workaround (another css code) that can centre the button so that it works on gmail?
Below is the code:
.button-td{
background:#FFA06A;
text-align:center;
position:relative !important;
}
.button-a{
background:#FFA06A;
padding:8px 25px;
font-size:16px;
text-decoration:none;
display:block;
position:absolute !important;
text-align:center !important;
top:50% !important;
left:50% !important;
transform:translate(-50%,-50%) !important;
}
<table align="center" border="0" cellpadding="0" cellspacing="0" class="center-on-narrow" role="presentation" style="display:table !important;" mc:edit="imagewithcta">
<tr>
<td class="button-td">
<img src="https://images.unsplash.com/photo-1598257006626-48b0c252070d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1" style="max-width:600px;" alt="photo-1598257006626-48b0c252070d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1">
<a class="button-a" href="*|ARCHIVE3|*">
<span class="button-link">
READ MORE
</span>
</a>
</td>
</tr>
</table>
HTML emails are evil, you get a really small subset of HTML to work with reliably across email clients. background images aren't even reliably supported across everything so you should code for fallbacks see here:
https://www.litmus.com/blog/the-ultimate-guide-to-background-images-in-email/
.tablestyle {
background-image:url('https://images.unsplash.com/photo-1598257006626-48b0c252070d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1');
width:500px;
height:300px;
background-size:cover;
background-repeat:no-repeat;
}
.button-td {
text-align:center;
}
.button-a{
background:#FFA06A;
padding:8px 25px;
font-size:16px;
text-decoration:none;
display:inline-block;
}
<table align="center" border="0" cellpadding="0" cellspacing="0" class="center-on-narrow tablestyle" role="presentation" mc:edit="imagewithcta">
<tr >
<td class="button-td">
<table width="100%" height="100%">
<tr>
<td><a class="button-a">TEST</a></td>
</tr>
</table>
</td>
</tr>
</table>
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 was given some sliced images to put together in an html. I did not slice them myself. I built a table. For each row, I placed 4 images with borders that need to be aligned. The final html should look like a grid with the borders of all the images aligned correctly. However, I noticed that in a specific row, the 4 original images do have the same dimensions. Eg.
I've tried changing the width and the height of all the images, no margin/padding in the table and the cells. But, the borders are not aligned horizontally and vercally. Here's an example of one of the rows with original dimensions of the images. I know that some of the rules might be redundant but I was just trying everything without finding a solution.
Thank you for your quick feedback.
<html>
<head>
<meta charset="utf-8">
<title>No name</title><style type="text/css">
img {vertical-align: top; margin:0 auto 0 auto; padding:0}
table, td {border:0; padding:0; margin:0; border-collapse: collapse; cellpadding:0; cellspacing:0;}
</style>
</head>
<body>
<pre width="" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
<tr>
<td id="imgA"><img src="ImageA" width="187" height="127" alt=""/></td>
<td id="imgB"><img src="ImageB" width="184" height="127" alt=""/></td>
<td id="imgC"><img src="ImageC" width="182" height="126" alt=""/></td>
<td id="imgD"><img src="ImageD" width="187" height="126" alt=""/></td>
</tr>
</pre>
</body>
</html>
you can try this :
table, td img
{
width :100%;
height:100%
}
Apply border in img class
i need to create CSS divs.
one up the top for the header (full width)
one on the left (180px) for the vertical menu
and one to the right for the main content
the menu on the left will be an iframe and then the one on the right will also be an iframe.
I currently have this code:
<style type="text/css">
body,html {
height:98%;
}
#top-bar {
width:100%;
padding:10px 10px 10px 10px;
margin:0 0 10px 0;
border-bottom:solid 1px #000000;
top:0;
left:0;
}
#left-bar {
width:170px;
display:inline;
float:left;
position:fixed;
z-index:999;
}
#right-bar {
margin-left:180px;
width:auto;
display:inline;
}
#space {
width:100px;
height:120px;
}
</style>
<table width="100%" border="0" cellspacing="10" cellpadding="10" style="position:fixed;z-index:999;top:0;left:0;background-color:#fff">
<tr>
<td><img src="http://www.integradigital.co.uk/images/company/logo.png" width="282" height="41" /></td>
<td align="right">Hello <?php echo $_SESSION["forename"]; ?> | Logout</td>
</tr>
<tr>
<td colspan="2"><hr /></td>
</tr>
</table>
<div id="space"></div>
<div id="left-bar"><iframe src="header.php" width="180px" height="480px" frameborder="0" scrolling="auto"></iframe></div>
<div id="right-bar">
<iframe name="rightiframe" src="dash.php" width="100%" height="480px" frameborder="0" scrolling="auto"></iframe>
</div>
but the right content seems to be going under the left menu
i need the top header (currently in the table) to not move when scrolling and the same for the left menu bar and needs to be % so it can all fit on different size screens.
anyone have any ideas what i can do with it?
To start with, move the styles into a separate style sheet and link to this from the <head> of the page. Don't use the <style> element because it's a pain to maintain and results in duplication across pages. The <style> element should not be in the <body> of the page.
Also, don't use tables for layout. It's not semantic.
There's no point making a floated element inline. It won't be inline. If those inline elements weren't floated, the width's you've specified wouldn't be applied. Also, don't use the style attribute on elements - use CSS.
These suggestions probably won't fix your specific issue, but everything's a bit of a mess at the moment, so I think you've got bigger issues to fix at this point...
Try out with the changes below,
<div id="left-bar">
<iframe src="image.png" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
</div>
<div id="right-bar">
<iframe name="rightiframe" src="image.png" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
</div>
#left-bar {
width: 20%;
........
}
#right-bar {
width: 80%;
.......
}
Note: Never use tables for the alignment of contents in a page. Always use divs with the css defined in .css file with the proper 'class' property defined for div tags.
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.