I have been trying to create an html email. When viewed on gmail it shows spaces between images. I have tried all possible that I could find on internet but did not work. Any help would be appreciated. Below is the code for the same.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>#</title>
<style>
table {border-collapse:collapse;}
</style>
</head>
<body>
<table width="600" cellpadding="0" cellspacing="0" align="center" border="0">
<tr bgcolor="#FFFFFF"><td align="center"> <font size="1" face="Arial" color="#666666">If you are unable to see this message Click Here </font></td></tr>
</table>
<table cellpadding="0" cellspacing="0" style="margin:0; padding:0; border:none;" align="center" width="600" border="0">
<tr><td><img src="images/bg-1.jpg" alt="Call: 9212612255" border="0" style="display:block; margin:0; padding:0; border:none; vertical-align:top;"/></td></tr>
<tr><td><img src="images/bg-2.jpg" alt="We support all Microsoft windows desktop operating system all software and hardware, Networking peripherals and internet are also supported" border="0" style="display:block; margin:0; padding:0; border:none; vertical-align:top;"/></td></tr>
<tr><td><img src="images/bg-3.jpg" border="0" alt="Computer Support By Microsoft Certified Engineers" style="display:block; margin:0; padding:0; border:none; vertical-align:top;"/></td></tr>
<tr><td><img src="images/bg-4.jpg" border="0" alt="Support available for any desktop or laptop Branded or Non-Branded" style="display:block; margin:0; padding:0; border:none; vertical-align:top;"/></td></tr>
<tr><td><img src="images/bg-5.jpg" border="0" alt="Visit Our Website" style="display:block; margin:0; padding:0; border:none; vertical-align:top;"/></td></tr>
<tr><td><img src="images/bg-6.jpg" border="0" alt="For more details mail us at info#codeslab.com" style="display:block; margin:0; padding:0; border:none; vertical-align:top;"/></td></tr>
<tr><td><img src="images/bg-7.jpg" border="0" alt="Computer Support By Microsoft Certified Engineers" style="display:block; margin:0; padding:0; border:none; vertical-align:top;"/></td></tr>
</table>
<table cellpadding="0" cellspacing="0" align="center" width="600" border="0" style="margin:0; padding:0; border:none;">
<tr>
<td align="center">
<font size="1" face="Arial" color="#666666">To unsubscribe mailing list, click here</font>
</td>
</tr>
</table>
</body>
</html>
It is a common eDM technique to set all <img> tag with CSS display: block to solve this Gmail display issue. Also, remove vertical-align CSS.
Here's a good guide for HTML e-mail support:
http://www.campaignmonitor.com/css/
If you are setting img elements to display: block; then the vertical-align property does not work. So, try removing display: block from images only.
Also, keep in mind that once you make changes to this so it works in Gmail it may break in Outlook or Yahoo! or Hotmail etc. So, test thoroughly.
Related
Right now I want to make a minecraft server status on my website and I have everything working but I want to do something that if server is online card outline is green and when server is offline same card turns red.
The CSS variable --bs-card-border-color for the Card component is what you're looking for I believe. Make sure to use your browser's developer tools to view a card's CSS variables when looking for a particular component oriented styling.
.card.green {
--bs-card-border-color: green !important;
}
.card.red {
--bs-card-border-color: red !important;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<!-- Card - Green -->
<div class="card green" style="width: 18rem;">
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<!-- Card - Red -->
<div class="card red" style="width: 18rem;">
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</body>
</html>
is there a way to set the parameters in spreadsheet to force the user agent to desktop mode? i have used the ?fd=true and overridemobile=true but still its not working.
<header>
<meta name="viewport" content="width=1024">
</header>
<div class="ads" style="auto; width: 99%; height: 640px; overflow: hidden;">
<iframe src="https://docs.google.com/spreadsheets/d/1frhC32sdgAYq7ZbqNdCQHeziwpolY8CLcVFFBrXBQqA/edit?rm=minimal&fd=true#gid=10012724" height="750" width="670" style="border: none; margin-left:-44px; margin-top:-23px; "></iframe>
</div>
thank you for response
I am creating an code for an email signature. The image is never left align on the email client on my iPhone and I have no idea why.
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td align="left" style="padding:0;margin:0;height:45px;width:230px;">
<ul style="padding:0;margin:0;height:45px;width:230px;">
<li style="text-align:left;margin:0;padding:0;height:45px;width:230px;">
<a target='_blank' href="https://www.mypage.com" style="margin:0;padding:0;width:230px;height:45px;">
<img style="padding:0;margin:0;" height="45px" width="230px" src="https://www.mypage.com/logo.gif" alt="Logo mypage" />
</a>
</li>
</ul>
</td> ......
The problem is visualized on the image below:
Is there something I can do?
Thanks for helping me.
Best regards,
Yab86
If the linked <img> is the only thing in that <td>, can you remove the <ul>? Or is there another reason the list is there?
Email clients do weird things to margin and padding of block level elements like <ul> and<li>, sometimes even if they're reset with inline CSS. If you don't need a list here, why introduce the complexity?
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td height="45" width="230" align="left" style="padding:0;">
<a target='_blank' href="https://www.mypage.com">
<img align="left" style="display: block; margin:0;" height="45" width="230" src="https://www.mypage.com/logo.gif" alt="Logo mypage" />
</a>
</td>
</tr>
</table>
I am looking for some direction for how to parse an email using nokogiri. Below is a sample email. I have reviewed this document http://nokogiri.org/tutorials/parsing_an_html_xml_document.html and hours of googleing. I am new at Ruby on Rails and am looking for a great example or detailed instructions. Thank you for your time.
MIME-Version: 1.0
Received: by 10.76.129.52; Mon, 30 Apr 2012 22:11:24 -0700 (PDT)
Date: Mon, 30 Apr 2012 22:11:24 -0700
Message-ID: <CAJq2oOCB-UzNEFGc+3TVBSEA0L9VPRrjevhdW_KK41C+AGDjJw#mail.gmail.com>
Subject: Customize Gmail with colors and themes
From: Gmail Team <mail-noreply#google.com>
To: parse email <parseemail2#gmail.com>
Content-Type: multipart/alternative; boundary=bcaec545501825242f04bef29a74
--bcaec545501825242f04bef29a74
Content-Type: text/plain; charset=ISO-8859-1
Content-Transfer-Encoding: quoted-printable
To spice up your inbox with colors and themes, check out the Themes tab
under Settings.
Customize Gmail =BB <https://mail.google.com/mail/#settings/themes>
Enjoy!
- The Gmail Team
[image: Themes thumbnails]
Please note that Themes are not available if you're using Internet Explorer
6.0. To take advantage of the latest Gmail features, please upgrade to a
fully supported
browser<http://support.google.com/mail/bin/answer.py?answer=3D6557&hl=3Den&=
utm_source=3Dwel-eml&utm_medium=3Deml&utm_campaign=3Den>
.
--bcaec545501825242f04bef29a74
Content-Type: text/html; charset=ISO-8859-1
<html>
<font face="Arial, Helvetica, sans-serif">
<p>To spice up your inbox with colors and themes, check out the Themes tab
under Settings.</p>
<table cellpadding="0" cellspacing="0">
<col style="width: 1px;"/>
<col/>
<col style="width: 1px;"/>
<tr>
<td></td>
<td height="1px" style="background-color: #ddd"></td>
<td></td>
</tr>
<tr>
<td style="background-color: #ddd"></td>
<td background="https://mail.google.com/mail/images/welcome-button-background.png"
style="background-color: #ddd; background-repeat: repeat-x;
padding: 10px; font-size: larger">
<a href="https://mail.google.com/mail/#settings/themes"
style="font-weight: bold; color: #000; text-decoration: none;
display: block;">
Customize Gmail ยป</a>
</td>
<td style="background-color: #ddd"></td>
</tr>
<tr>
<td></td>
<td height="1px" style="background-color: #ddd"></td>
<td></td>
</tr>
</table>
<p>Enjoy!</p>
<p>- The Gmail Team</p>
<img width="398" height="256" src="https://mail.google.com/mail/images/gmail_themes_2.png"
alt="Themes thumbnails" />
<p><font size="-2" color="#999">Please note that Themes are not available if
you're using Internet Explorer 6.0. To take advantage of the latest Gmail
features, please
<a href="http://support.google.com/mail/bin/answer.py?answer=6557&hl=en&utm_source=wel-
eml&utm_medium=eml&utm_campaign=en"><font color="#999">
upgrade to a fully supported browser</font></a>.</font></p>
</font>
</html>
--bcaec545501825242f04bef29a74--
Nokogiri works great for parsing HTML, but what you have here is an email. Try using TMail to first get the HTML section from the email, then you can use Nokogiri to parse that. Extrapolating from the TMail docs, you could do something like:
email = TMail::Mail.load('my_email.eml')
html_doc = Nokogiri::HTML(email.body)
I am new jquery mobile. I implemented the table.it is displaying in the browsers correctly. But it is not fitted in the device screen. How to solve this issue? please can anybody help me.
code
< html>
< head>
< meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<style type="text/css">
table { width:100%; }
table th, td { text-align:left; padding:6px;}
< /head>
< body>
<div data-role="page" id="Calorie_Tracker">
<div data-role="header" data-theme="b" >
<a data-role="button" data-rel="back" data-icon="back">back</a>
<h1>Calorie Tracker</h1>
</div>
<div data-role="content">
<table border="1" >
<tr>
<th>Date</th>
<th>Food_Intake</th>
<th>Calories_Burned</th>
<th>Net</th>
</tr>
<tr>
<td>Dec20</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
< /body>
< /html>
Use
<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke"></table>
(Not really an answer, but I can't post comments yet)
I am not sure if this will do for you, but you could try the JQuery Mobile Grid's:
http://jquerymobile.com/demos/1.0rc3/#/demos/1.0rc3/docs/content/content-grids.html
The width will adjust automatically.
I know this is an old post but it looks from the screenshot that the text in the table headers mean that the minimum width is always going to be more than the screen.
You could remove the underscores between words or reduce the font-size to help the text fit but this might be of no use if the text in the data cells expands the table size again.
This is a common issue with mobile devices though - data tables don't play well with responsive designs. A good link with options / workarounds can be found here:
http://css-tricks.com/responsive-data-tables/
Hope this helps anybody with a similar issue.
Use the CSS property word-break: break-all:
table th, td {
text-align:left;
padding:6px;
word-break: break-all;
}