Having trouble figuring out how to write HTML code that will work on both mobile and desktop email clients. Right now its working well on desktop, but whenever I open it in mobile it renders oddly - see screenshot below.
I've got it into the Apple Mail signature and it looks perfect when I send it and open via desktop Apple or Gmail.
The main issue is that when it the email is opened on mobile, it has each of the columns (separated through tags) on a different line. When I flip my phone to horizontal, it automatically readjusts... Does this mean the float:left property isn't working on mobile? How would I adjust this? Do I need to specify width? Not sure
I've tried making the whole thing smaller which hasn't worked. I purposely chose to make it 600px width because I saw another signature that resized automatically to fit mobile that was 600px.
When I open in Google Chrome and use the toggle device, it reformats perfectly to fit on a mobile screen.
Thanks in advance for the help!
Example of what it looks like on mobile
Here's the code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Email Signature</title>
</head>
<body>
<div id="container">
<div class="column" style="float:left; margin:0px; font-size:0px;">
<img class="profile" src="http://hamptonyachts.com/uploads/Profile.png" alt="">
</div>
<div class="column" style="float:left; margin:0px; font-size:0px;">
<img class="name" src="http://hamptonyachts.com/uploads/HYG_Robert_Fiala.png" alt="" style="vertical-align:top">
<p class="contact" style="min-height: 60px; background-color: #06243f; font-family: Roboto; color: #FFFFFF; font-size: 15px; font-weight: 400; line-height: 18px; padding-left: 10px; padding-top: 10px; margin: 0px;">
MOBILE: 425.765.7850 <br> OFFICE: 206.623.5200 <br>
<span style=" font-size: 13px;">ROBERT#HAMPTONYACHTGROUP.COM</span></p>
</div>
<div class="column" style="float:left; margin:0px; font-size:0px;">
<div class="news">
<img class="news" src="http://hamptonyachts.com/uploads/Rendezvous.png" alt="">
</div>
<div class="social">
<img src="http://hamptonyachts.com/uploads/Facebook1.png" alt="" style="vertical-align:top">
<img src="http://hamptonyachts.com/uploads/Instagram1.png" alt="" style="vertical-align:top">
<img src="http://hamptonyachts.com/uploads/Web.png" alt="" style="vertical-align:top">
</div>
</div>
</div>
</body>
</html>
I don't suggest divs in email. They don't work with Outlook. Your divs were not configured in the correct manner, so they did not behave as you wanted. For instance, you didn't declare a width on any of your divs or images.
Your social media graphics don't line up in a table cell 226px wide, which is one of the reasons things were not lining up in your signature. I'm not spending time editing them for you, I just made them fit width-wise so that's why they will look wonky.
I tested this in Litmus and it works for Apple, IOS, Android, Gmail, Outlook and others. I turned the background of the table red to show what you still need to fix. You should fill in your ALT information as well.
Try this instead:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Email Signature</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#ff0000">
<tr valign="top">
<td rowspan="2" width="115">
<img class="profile" src="http://hamptonyachts.com/uploads/Profile.png" width="115" height="160" alt="Hampton">
</td>
<td width="259"><img class="name" src="http://hamptonyachts.com/uploads/HYG_Robert_Fiala.png" width="259" height="90" alt="" style="vertical-align:top">
</td>
<td width="226"><img src="http://hamptonyachts.com/uploads/Rendezvous.png" width="226" height="114" alt="">
</td>
</tr>
<tr valign="top">
<td style="font-size: 12px;">MOBILE: 425.765.7850 <br />
OFFICE: 206.623.5200 <br />
ROBERT#HAMPTONYACHTGROUP.COM</td>
<td><img src="http://hamptonyachts.com/uploads/Facebook1.png" width="90" height="46" alt="" style="display:inline-block;" />
<img src="http://hamptonyachts.com/uploads/Instagram1.png" width="43" height="46" alt="" style="display:inline-block;" />
<img src="http://hamptonyachts.com/uploads/Web.png" width="70" height="46" alt="" style="display:inline-block;" /></td>
</tr>
</table>
</body>
</html>
Good luck with the yacht sales.
Related
My client won an award. To display it on a website, they sent the following html:
<a target="_blank" href="https://www.theknot.com/marketplace/redirect-2046979">
<div style="display: inline-block; font-size: 10px; text-align: center;">
<img src="//s3.amazonaws.com/tkpro-assets/bow_2022/section_4_3.png"
width="70" height="70"
alt="The Knot Best of Weddings - 2022 Pick"
border="0"
style="margin:0 auto; display:block;" >
</div>
</a>
This is consistently coming back a broken image. Unsure of how to fix, other images on site work fine
This worked for me:
(note: I put the <div tag on the outside)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body class="mat-typography">
<div style="font-size: 10px; text-align: center; width:200px; margin:0 auto">
<a target="_blank" href="https://www.theknot.com/marketplace/redirect-2046979" style="margin: 0 auto;">
<img src="https://s3.amazonaws.com/tkpro-assets/bow_2022/section_4_3.png"
width="70" height="70"
alt="The Knot Best of Weddings - 2022 Pick"
border="0"
style="margin:0 auto;" >
</a>
<br>
<br>
Some other text
</div>
</body>
</html>
If I use !DOCTYPE html , unwanted borders appear at the lower corners of the header. I used images in order to get these corners. Same issue for Internet explorer and Chrome. How can I remove these borders ? If I use !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN there is not any problem.
The codes are:
body {
font-family : arial, sans-serif;
background-color: #FFFFF0;
margin:0;
}
div.header {
width: 100%;
text-align: center;
background-color: #0000CC;
float: left;
padding:0.001em;
}
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY>
<DIV class="header">
<IMG SRC="http://www.usefulchess.com/kq.gif" BORDER="0" WIDTH="80" HEIGHT="63"
ALT=""> <IMG SRC="http://www.usefulchess.com/useful.gif"
BORDER="0" WIDTH="150" HEIGHT="49" ALT=""> <IMG
SRC="http://www.usefulchess.com/chess.gif" BORDER="0" WIDTH="200" HEIGHT="60" ALT="">
<IMG SRC="http://www.usefulchess.com/sembol.gif" BORDER="0" WIDTH="255" HEIGHT="84"
ALT="" class="sembol">
</DIV>
<DIV class="menudesktop"><!-- menu desktop -->
<!-- BUTTON-->
<TABLE bgcolor="#0000CC" WIDTH="100%" BORDER="0">
<TR><TD> </TD></TR>
</TABLE>
<TABLE bgcolor="#0000CC" WIDTH="100%" BORDER="0" cellpadding="0" cellspacing="0">
<TR>
<TD WIDTH="3%" HEIGHT="25"><IMG SRC="http://www.usefulchess.com/left2.gif"
BORDER="0" WIDTH="60" HEIGHT="25" ALT="">
</TD>
<TD align="center" WIDTH="95%" HEIGHT="25">
<A HREF="../index.html" class=button>Home</A>
Play Chess
Chess Rules
Chess Tactics
Problems
Studies
Books
</TD>
<TD WIDTH="2%" HEIGHT="25"><IMG SRC="http://www.usefulchess.com/right2.gif"
BORDER="0" WIDTH="60" HEIGHT="25" ALT="">
</TD>
</TR>
</TABLE>
</DIV><!-- menu desktop end-->
</BODY>
</HTML>
I fix it by using: display: block; Example: <img style="display:block;" .... Details on stackoverflow.com : Fit image to table cell [Pure HTML]
Using bgcolor with !DOCTYPE html created also this unwanted borders.
I am trying to create an email that is properly visible in both the online version of outlook and gmail. I seem to have it working fine in gmail but have encountered a weird issue when it comes to outlook. I have two identical elements with an image inside. When I view the first one in outlook it strips the entire element of the inline style properties. It then works perfectly fine on the second with identical code. (see screenshot) I know there are weird inconsistencies between email clients but I am not sure what is going on here. If anyone has any ideas please let me know.
I looked around and the only person who seemed to have a similar problem to me was this question but I at least haven't found any stray semicolons like was the issue there.
<table>
<td align="left">
<div id="wrapper" style="width: 600px;background-image: linear-gradient(#15dbff, #6aff90);margin-top: 0px;position: absolute;top: 0px;">
<table height="20px" width="600px">
<tr height="20px" width="600px"></tr>
</table>
<div id="heading" style="width: 452px;height: 131px;background-color: white;margin: auto;margin-top: 20px;border-radius: 25px;">
<img id="headerimg" src="https://kevinuulong.com/images/KLlogocolredcircle.png" style="width: 131px; margin-left: 150px;">
</div>
<div id="body" style="width: 392px;background-color: white;margin: auto;margin-top: 20px;border-radius: 25px;padding: 30px;">
<p id="greeting">Mr. Somebody,</p>
<p id="mainbody">This is some sample text. It should be using the Montserrat font family. This is what a link should look like. Any images should be inside a div like this.
<div class="bodyimage" style="width: 392px;height: 200px;overflow: hidden;border-radius: 25px;margin-bottom: 10px;"><img src="https://source.unsplash.com/random/?colors/392x200"></div>
<div class="bodyimage" style="width: 392px;height: 200px;overflow: hidden;border-radius: 25px;margin-bottom: 10px;"><img src="https://source.unsplash.com/random/?colors/392x200"></div>
</p>
<p id="signature">Thanks,<br>Kevin Long</p>
</div>
<div id="contact" style="width: 452px;background-color: white;margin: auto;margin-top: 20px;margin-bottom: 20px;border-radius: 25px;">
<table>
<th style="width: 50%;"> <img id="contactimg" src="https://kevinuulong.com/images/KLlogocolredcircle.png" style="width: 120px;"></th>
<th style="width: 50%;">kevinuulong.com<br><br>
<a
id="btn" href="mailto:someone#example.com" style="text-decoration: none;background: #5284ff;background-repeat: repeat-x;background-size: 100% 2px;background-position: 0 95%;color: white;padding-left: 50px;padding-right: 50px;padding-top: 10px;padding-bottom: 10px;border-radius: 20px;">Contact Me</a>
</th>
</table>
</div>
<table height="20px" width="600px">
<tr height="20px" width="600px"></tr>
</table>
</div>
</td>
</table>
The basic requirements for Outlook are, for each image, to have the width and height attributes, i.e.:
<img width="392" height="200" src="https://source.unsplash.com/random/?colors/392x200">
Div's don't tend to play well with Outlook; that's why we're still using tables for layout.
If you need the image to be responsive, add this in the style:
<img width="392" height="200" style="width:100%;height:auto;max-width:392px" src="https://source.unsplash.com/random/?colors/392x200">
I'm trying to get a link to a page working correctly when an image is clicked. On this jsFiddle you'll see three circular images. When the mouse is hovered over any of them, a background shadow image is rendered. When you click on the 'law firms' image, a short HTML page with some text should be displayed. What happens is that the link to the law firm text is rendered not as the image itself, but as a '>' character - see screenshot below.
Can anyone guide me how to make the image act as the link, please? Also ensuring that the background image continues to be centred over the law firms image when the mouse is hovered over it.
CSS:
.center {text-align: center;}
#sfimages {padding:15px;}
#sfimages:hover {
background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
background-repeat: no-repeat;
background-position:center;
}
HTML:
<body>
<table style="width: 100%">
<tr>
<td class="center">
<div id="sfimages">
<a href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG"> >
<object type="image/svg+xml"
data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
<img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
</object>
</a>
</div>
</td>
<td class="center">
<div id="sfimages">
<object type="image/svg+xml"
data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
<img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
</object>
</div>
</td>
<td class="center">
<div id="sfimages">
<object type="image/svg+xml"
data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
<img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
</object>
</div>
</td>
</tr>
</table>
Sorry for taking a while, its been a busy day for me and I just had enough time to come back around to your question. Here is what I recommend. It looks like the code you are working with is produced from inkscape? When it runs the source code is a nuts, especially inside the object area. But have no fear if you want links. Simply make the following slight adjustments, and you should be on your way with links!
The CSS:
.center {
text-align: center;
}
#sfimages {
padding:15px;
position:relative;
width:380px;
height:273px;
}
#sfimages:hover {
background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
background-repeat: no-repeat;
background-position:center;
}
#ext-site {
display:block;
width:380px;
height:273px;
position:absolute;
z-index:9999;
}
The HTML:
<table style="width: 100%">
<tr>
<td class="center">
<div id="sfimages">
<a id="ext-site" href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG"></a>
<object type="image/svg+xml"
data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
<img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
</object>
</div>
</td>
<td class="center">
<div id="sfimages">
<object type="image/svg+xml"
data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
<img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
</object>
</div>
</td>
<td class="center">
<div id="sfimages">
<object type="image/svg+xml"
data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
<img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
</object>
</div>
</td>
</tr>
</table>
This is classic trick, involving an asbolute positioned anchor link, inside of a relative display block element. As long as the anchor stretches to the size of it's parent's size, it acts as an invisible button on top of the entire section.
Check out my new Fiddle
There was spare character:
please check following code (in a comment there is a link to the full code):
<table style="width: 100%">
<tr>
<td class="center">
<div id="sfimages">
<a href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG">
<object type="image/svg+xml"
data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
<img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
</object>
</a>
</div>
</td>
<td class="center">
<div id="sfimages">
<object type="image/svg+xml"
data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
<img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
</object>
</div>
</td>
<td class="center">
<div id="sfimages">
<object type="image/svg+xml"
data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
<img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
</object>
</div>
</td>
</tr>
</table>
Line 6:
<a href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG"> >
Remove the extra closing bracket.
How is it possible to align several images in a vertical order one below the other on the left hand side of the screen?
Thanks
Add display: block on all of them and they will behave like DIVs and align like you want them to by default.
A simple example:
<!DOCTYPE html>
<html>
<body>
<style>
img.block{
display: block;
}
</style>
<img class="block" src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt="Google logo" />
<img class="block" src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt="Google logo" />
<img class="block" src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt="Google logo" />
<img class="block" src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt="Google logo" />
</body>
Example? Do you have a URL we can look at? I mean, this can easily be done, it all depends in what context you need to do it.
The following CSS should do it
display: block; float: left; clear: both;
This would be the easiest and quickest. (not the best method)
<h4>This table has no borders:</h4>
<table>
<tr>
<td>image.gif</td>
</tr>
<tr>
<td>image.gif</td>
</tr>
<tr>
<td>image.gif</td>
</tr>
<tr>
<td>image.gif</td>
</tr>
</table>
http://www.w3schools.com/html/html_tables.asp