I have a normal html code.
<span style="bottom: 65px;
position: relative;
left: 100px; color: red;">Hiii</span>
<img src="https://vignette.wikia.nocookie.net/sqmegapolis/images/2/2d/RealWorld_Stonehenge.jpg/revision/latest?cb=20150616102050">
When I run this code, the text is centered.
But when I send this code to gmail, the look changes.
In gmail looks like
Here the text is not centered and when I inspected it I also found that all the css is not passed to gmail.
This CSS is not passed:
bottom: 65px;
position: relative;
left: 100px;
I need the text to always be centered whenever I send this html body to gmail/mail.
I recommend to use Tables for email. But as a quick fix for you, div will make it.
<div style="width:600px;">
<div style="text-align: center; color: #ff0000;">
Hello World. I'm in the center :)
</div>
<img src="https://vignette.wikia.nocookie.net/sqmegapolis/images/2/2d/RealWorld_Stonehenge.jpg/revision/latest?cb=20150616102050" style="width: 100%;">
</div>
With tables (all centered):
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="center">
Hello World. I'm in the center :)
</td>
</tr>
<tr>
<td align="center">
<img src="https://vignette.wikia.nocookie.net/sqmegapolis/images/2/2d/RealWorld_Stonehenge.jpg/revision/latest?cb=20150616102050" style="width: 100%">
</td>
</tr>
</table>
Related
I made a HTML email layout using table, the design is working fine in my machine but when I put the code to test in putsmail the footer moves to the left when I view the mail in the dekstop.
It should come like this:
Its coming like this:
My HTML code:
<!--Footer-->
<table class="footer">
<tr>
<td style="padding: 50px;background-color: #f7f7f7">
<table width="100%">
<p style="text-align: center; font-size: 12px; line-height: 1.5;">
Having Trouble with something?
<br>
Reach out to us support#vantagecircle.com
</p>
<img style="display: block; margin-right: auto;margin-left: auto; padding-bottom: 25px;" src="https://i.ibb.co/1Z05xTH/vc-footer-logo.png" width="120px" />
</table>
</td>
</tr>
</table>
My CSS code:
.footer{
align-content: center;
width: max-content;
position: relative;
}
Thank You in advance
It’s safer to use inline CSS for email templates, I also don’t think any email clients supports the align-content property or even max-content on width. Maybe try it like this:
<table width="100%">
<tr width="100%">
<td style="padding: 50px;background-color:#f7f7f7">
<div style="margin-left:auto;margin-right:auto;">
<p style="text-align: center; font-size: 12px; line-height: 1.5;">
Having Trouble with something?
<br>
Reach out to us support#vantagecircle.com
</p>
<img style="display: block; margin-right: auto;margin-left: auto; padding-bottom: 25px;" src="https://i.ibb.co/1Z05xTH/vc-footer-logo.png" width="120px" />
</div>
</td>
</tr>
</table>
Note that I'm using width inline there, and added a div in the inner td to align to the center.
Change the width: max-content; to width: 100%; and it should work.
You can read more about how "max-content" works here
Use width: 100% for the table.
I've been developing a website with a friend and I have a little problem.
We need to set our footer manually in the page with position:relative and margin-top to fix it because it isn't following the last <tr< end.
I've been trying to fix this problem around 3 weeks and I'm really frustrated with this...
The "footer" <tr> is following the "right-column" <tr>, but even I if I try to remove it, it tries to get aligned with a tr in the top of the page instead of the "container" <tr>
I'm posting the last lines of the code here, but since I have no idea of what is causing this, I'm sending below the website link itself.
My website is onlinewinxclub.com/centro-web/test.php
<tr id="container">
<td id="container_left_column">
<div style="position: relative; margin-top: 11px; margin-left: 15px;">
<iframe id="ranking_iframe" scrolling="no" frameborder="0" src="pages/Iframes/Access_guests.php"></iframe>
</div>
</td>
<td id="container_middle_column" style="vertical-align: top;">
<table id="content_videobox" cellspacing="1" cellpadding="1" border="0">
<tbody>
<tr style="">
<td id="content_videobox_firstcolumn" rowspan="3">
<div id="content_videobox_iframe" frameborder="0" allowfullscreen="" volume="0"><video
class="file" preload="metadata"
poster="././medias/images/Video_Thumbs/happy2021thumb.png"
src="././medias/videos/Happy_2021.mp4" data-overlay="1"></video></div>
</td>
<td id="content_videobox_secondcolumn">
<h2>
<span class="video-title" id="content_videobox_videotitle"
style="text-shadow: 1px 0px 0px #560027;">Happy New Year!</span>
</h2>
<p style="position:relative; top: 150px;">
<span class="video-description" id="content_videobox_videotext"
style="text-shadow: 1px 0px 0px #560027;">2021 arrived. Your favorite Winx fairies and
specialists are hoping it will be better than the last one. The witches? Not
sure.</span>
</p>
</td>
</tr>
<tr style="">
<td id="content_videobox_firstcolumn2">
</td>
</tr>
<tr style="">
<img onclick="javascript:Previous();" class="previous"
style="position: relative; top: 274px; left: 541px; cursor: pointer;"
src="././medias/images/arrow_left.png"
onmouseover="this.src='././medias/images/arrow_left_hover.png';"
onmouseout="this.src='././medias/images/arrow_left.png';">
<img onclick="javascript:Next();" class="next"
style="position: relative; top: 274px; left: 625px; cursor: pointer;"
src="././medias/images/arrow_right.png"
onmouseover="this.src='././medias/images/arrow_right_hover.png';"
onmouseout="this.src='././medias/images/arrow_right.png';">
<td id="content_videobox_secondcolumn2" style="text-align: center">
<span class="video-number"
style="color: white; font-family: Arial; font-size: 20px; height: bold; text-shadow: 1px 0px 0px #560027;">
1/4 </span>
</td>
</tr>
</tbody>
</table>
<div id="content_mininews_frame">
<iframe id="content_mininews_iframe" frameborder="0" src="pages/Mininews/NewsContentV2.php">Browser not
compatible.</iframe>
</div>
</td>
</tr>
<tr>
<td id="container_right_column" style="vertical-align: top;">
<div id="content_horoscope_iframe">
<iframe id="content_horoscope_iframe" frameborder="0" src="pages/Tips.php" data-ruffle-polyfilled="">Browser
not compatible.</iframe>
</div>
<iframe style="position: relative;width: 703px;height: 219px;margin-left: -467px;margin-top: -91px;"
frameborder="0" src="pages/Iframes/Download.php" data-ruffle-polyfilled="">Browser not compatible!</iframe>
</td>
</tr>
<tr id="footer">
<td id="footer_content" colspan="2">
<hr style="margin-top: auto; position: relative;">
<div style="margin-top: auto; position: relative;">
<img id="footer_rainbow_img" src="././medias/images/rainbow_logo_small.jpg">
<p id="footer_text">Winx Club™ a series created and produced by Iginio Straffi and Rainbow S.r.l<br>
© 2011-2021 Winx Club Online - Unofficial WinxClub.com inspirated by the old official website
</p>
</div>
</td>
</tr>
first remove the
#container - position absolute
I think you are positioning it because of the iframe. why don't you add iframe with the .container_middle_column? you can add td and give a width or create new table inside the td, because you are using table. And make #footer - posision relative. If you use bootsrap it will be easy more than this.
I'm hoping someone can help me with this. I have tried everything I know and read all the articles I could find. Nothing has worked
Basically, there is what seems to be a neon blue background color showing up ONLY on Gmail in the <td> containing the header image.
Screenshot (with image missing):
Screenshot (with image showing neon background):
Table code:
<table border="0" cellspacing="0" class="body-wrap" bgcolor="#FFFFFF" style="max-width: 600px">
<tbody>
<tr>
<td align="center" class="container" bgcolor="=FFFFFF" style="padding: 0px; margin: 0px; line-height:10px; font-size:6px">
<div class="container1">
<a href="http://www.rolla.com" style="text-decoration: none; border: none"><img src="https://rolla.igamingcloud.com/Images/Emails/MailSystem/Upload/rolla_system_header.gif" align=“absbottom” width="100%" style="display:block; max-height: 172px; max-width: 600px; border:none; padding: 0px; margin 0px" border="0" alt="Rolla Casino Logo"
/></a>
</div>
</td>
</tr>
</tbody>
</table>
I have specified background colour white in the table and td. I have also added style attributes to the border to the href and img tags. None of these have worked.
The classes container and container1 both contain:
border-width:0 none;
background: #ffffff;
text-decoration: none;
text-decoration-color: #ffffff;
Even when I unlinked the header image and sent another test, the blue was there!
I think you added an equal rather than a hash in background color decoration for the td. You have bgcolor="=FFFFFF" instead of bgcolor="#FFFFFF". Below is the fixed code:
<table border="0" cellspacing="0" class="body-wrap" bgcolor="#FFFFFF" style="max-width: 600px">
<tbody>
<tr>
<td align="center" class="container" bgcolor="#FFFFFF" style="padding: 0px; margin: 0px; line-height:10px; font-size:6px">
<div class="container1">
<a href="http://www.rolla.com" style="text-decoration: none; border: none"><img src="https://rolla.igamingcloud.com/Images/Emails/MailSystem/Upload/rolla_system_header.gif" align=“absbottom” width="100%" style="display:block; max-height: 172px; max-width: 600px; border:none; padding: 0px; margin 0px" border="0" alt="Rolla Casino Logo"
/></a>
</div>
</td>
</tr>
</tbody>
</table>
Cheers
Ive tried a slew of different topics to figure this out...so far nothing has worked. Take a look at this:
http://jsfiddle.net/zJTM8/
Notice how the price on the first example wont align vertically? I've tried 50% top, top -22px, etc. I'm not sure what I'm doing wrong here to make sure that both the product name and the product price stay mid aligned vertically on both divs.... I know its something easy I'm merely gapping on. THE CATCH is that it HAS TO WORK WITH IE7.
<div id="col_product_full">
<div style="padding: 1px;">
<table width="100%" border="0" cellspacing="0">
<tr>
<td align="center" class="contentselection_product_ImageCell">
<img src="http://76.73.18.245/olmsv2/DATA/MEDIA/PRODUCTS/201211038470.jpg">
</td>
</tr>
<tr>
<td height="44" class="contentselection_product_NameBar">
<div class="contentselection_product_Name" style="position: relative; display: block; float: left; width: 60%;">HP 8470p i5 1600 x 900 with Camera 320GB</div>
<div class="contentselection_product_Price" style="position: relative; z-index: 99; display: block; float: right; width: 30%;" align="right">$3,493.21</div>
</td>
</tr>
</table>
</div>
</div>
I have the following html code:
<table>
<tr>
<td>
<div id="fixmywidth" style="position:relative; height:30px;">
<div style="z-index: 2000; margin-top: 5px; height: inherit; position: absolute;">
<table style="height:inherit">
<tr style="height:inherit">
<td align="center" style="width: 31px; height: inherit;"> </td>
<td align="center" style="width: 31px; height: inherit;"> </td>
<td align="center" style="width: 31px; height: inherit;"> </td>
<td align="center" style="width: 31px; height: inherit;"> </td>
<td align="center" style="width: 31px; height: inherit;"> </td>
<td align="center" style="width: 31px; height: inherit;"> </td>
........300 tds later
<td align="center" style="width: 31px; height: inherit;"> </td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
how do i make the div with the id "fixmywidth" width fit the width of the containing elemets?
i tried width=100%
and widht = auto
but they wouldn't work
thanks a trillion in advance,
Lina
This is not possible because the div inside it is not actually inside it, because of the position relative/absolute.
Im not 100% sure what you are trying to accomplish there but if you remove those 2 it will size properly.
By "containing elements," do you mean the elements that contain <div id="fixmywidth"></dIv>, or the elements contained within <div id="fixmywidth"></div>?
If it's the latter, Fabian is right, and the issue lies here:
<div style="z-index: 2000; margin-top: 5px; height: inherit; position: absolute;">
position: absolute; takes the <div> out of the document flow, so it takes up no space. Therefore, its containing element (<div id="fixmywidth"></div>) doesn't encompass any elements in the document flow, and therefore has no dimensions.
You can fix that by removing position: absolute;, but that may not fall in line with your layout goals.
remove position absolute from the immediate child of fixmywidth
if you remove position:relative from 'fixmywidth', it should work.