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.
Related
I have no basic clue about html and and right now am kinda stuck, I need two images side by side around the bottom half part of a email template, thing is no matter what I do I can't get the image to be side by side. there is already a hero image on the email template I am not sure if that's what causing the error. Can you please help me with this or give me some learning metrials so that I can figure this out.
Can you please help me with this or give me some learning metrials so that I can figure this out.
PS: Please don't mind the rickroll video, I added it to replace the link
The below code is how the banner hero image is setup
<tr>
<td class="hero" style="border-collapse: collapse; border-spacing: 0px; margin: 0px; padding: 0px;" align="center" valign="top">
<a title="placeholdertext" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" rel="noopener">
<img class="fr-dib" style="width: 620px; max-width: 560px; color: #000000; font-size: 13px; padding: 0px; outline: currentcolor none medium; text-decoration: none;" title="rick roll" src="test_mail_f.jpg" alt="rick roll" width="560" height="349" border="0" />
</a>
</td>
</tr>
Use a <table>, it should be compatible with Outlook email client as well. For more on HTML email see this article.
<table>
<tr>
<td>
<a href="#">
<img src="https://placem.at/places?w=160&h=90&random=1&txt=1&txtclr=fc0">
</a>
</td>
<td>
<a href="#">
<img src="https://placem.at/places?w=160&h=90&random=1&txt=2&txtclr=fc0">
</a>
</td>
</tr>
</table>
You can do it by several ways. The easiest is use another table in td with two columns, like this:
<tr>
<td class="hero" style="border-collapse: collapse; border-spacing: 0px; margin: 0px; padding: 0px;" align="center" valign="top">
<a title="placeholdertext" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" rel="noopener">
<img class="fr-dib" style="width: 620px; max-width: 560px; color: #000000; font-size: 13px; padding: 0px; outline: currentcolor none medium; text-decoration: none;" title="rick roll" src="test_mail_f.jpg" alt="rick roll" width="560" height="349" border="0" />
</a>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<a href="#">
<img src="#">
</a>
</td>
<td>
<a href="#">
<img src="#">
</a>
</td>
</tr>
</table>
</td>
</tr>
Don't forget to let me know if it works for you or not.
I would recommend using the display: flex; property, which automatically makes the flow of the content inside a container to a row.
<div style="display: flex;">
<img src="example.com" />
<img src="example.com" />
</div>
I am working on creating a responsive log in page. I have section of text in a table to provide some quick information for users prior to them logging in. The problem is that when the screen/window size gets smaller, the log in form overlaps/covers the text. I would like for the text to move down below the login form when the screen shrinks, but I am not exactly sure how to do that. I was able to get the logo image at the top and the links menu to respond to size changes using "max-width" CSS properties, but cannot figure out how to move something to another part of the page. The HTML/CSS that I am working with is pasted below and I have attached a screenshot from my phone showing the overlap issue. I know the HTML/CSS isn't ideal, but I am having to do this in a very limited editor. Any help is much appreciated.
<p><img src="https://www.westga.edu/uwgonline/assets-uwgonline/pics/CourseDen.png" style="z-index: -1; margin: 0% 1.5%; max-width: 1100px; width: 90%; position: absolute; height: auto;" /></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<table style="z-index: -1; opacity: 0.85; max-width: 100%; width: 50%; left: 35%; top: 380px; position: absolute;">
<tbody>
<tr>
<td style="padding: 20px; background: #FFFFFF;">
<p>
<span style="color: #000000;">
<span style="color: #000000;">
<em>Please note your password is the same as your <strong>UWG ID</strong> and is case sensitive.</em>
</span>
</span>
</p>
<strong><span style="color: #000000;">UWG Online Help Desk</span></strong>
<br />
<span style="color: #000000;">(M-F 8a-5p ET) 678-839-6248 or 1-855-933-8946</span>
<br />online#westga.edu • <a rel="noopener noreferrer" href="http://uwgonline.westga.edu/uwgonline/chat-with-us.php" target="_blank">Chat</a>
<p><strong><span style="color: #000000;">24/7/365 D2L Help Center</span></strong>
<br /><span style="color: #000000;">Knowledge Base & Live Support</span>
<br /><a rel="noopener noreferrer" href="https://D2Lhelp.view.usg.edu" target="_blank">https://D2Lhelp.view.usg.edu</a></p>
</td>
</tr>
</tbody>
</table>
<hr />
<table style="max-width: 100%; width: 99%; text-align: center; border: none; border-collapse: collapse;">
<tbody>
<tr>
<td style="width: 20%;">Help</td>
<td style="width: 20%; border-left: 1px solid #D3D3D3;"> Resources </td>
<td style="width: 20%; border-left: 1px solid #D3D3D3;"> More Info</td>
<td style="width: 20%; border-left: 1px solid #D3D3D3;"> System Checker</td>
<td style="width: 20%; border-left: 1px solid #D3D3D3;"> eCampus, WebMBA, & EU</td>
</tr>
</tbody>
</table>
<hr />
The answer to my problem was to take the text that is getting stuck behind the login box and remove it's position: absolute. This put the login box below it. What we really wanted was the login box to the left of the text and only moved down below it when a screen/window was under a certain size, but because I cannot edit the login box, this is the solution that we decided was going to be the best for what we had access to edit. That you #Sirence for mentioning the position: absolute information in your comment!
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>
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
What would be the best way to make a whole block of content clickable in an html email so that it also works in Outlook (2003, 2007, 2010).
For example, I have this Call-To-Action:
So far I've come up with this:
<table cellpadding="0" cellspacing="0" style="border: 1px #ffffff dashed;">
<!-- NAVIGATION AREA START -->
<tr>
<td width="370" style="font-family:'Times New Roman', Times, serif;font-size: 22px;font-weight:bold;line-height:52px;">
<div style="margin-left: 15px; margin-top: 0; margin-bottom: 0; height:100%;">
<a href="http://${servername}/" style="text-decoration:none;color:#fff;">
LEARN MORE ABOUT ABOUT THIS
</a>
</div>
</td>
<td width="160">
<table cellpadding="0" cellspacing="0" height="24">
<tr>
<td>
<div style="background-color:#fff; margin-top: 0; margin-bottom: 0;width:128px;height:24px;color: #000000;text-decoration: none;font-size: 12px;line-height: 24px;">
<a href="http://${servername}/" style="text-decoration:none;color:#000;margin-left: 5px;">
CLICK HERE
</a>
</div>
</td>
<td>
<img style="display: block;" width="13" height="24" border="0" alt="" title="" src="http://${servername}/images/mailing/arrow-white.png" />
</td>
</tr>
</table>
</td>
</tr>
<!-- NAVIGATION AREA END -->
</table>
The problem is that the whole area within the dashed border should be clickable. I tried wrapping the whole table with an a tag, but this doesn't work in Outlook or IE (it works in Firefox).
Or, consider this:
<table width="255" cellspacing="0" cellpadding="0" bgcolor="#000000" style="border: 10px solid #fff;">
<tr>
<td valign="top" style="width:130px;padding-bottom: 15px; padding-top: 15px; padding-left: 15px;">
<p style="color:#ffffff;font-family:'Times New Roman', Times, serif;font-size: 16px;margin-top: 0; margin-bottom: 5px;">
<strong>FAQ</strong>
</p>
<p style="font-family: arial,sans-serif; font-size: 14px; color:#d0d0d0; line-height: 20px; margin-top: 0; margin-bottom: 0;">
Learn more about our services.
</p>
</td>
<td align="center" style="padding-bottom: 15px; padding-top: 15px;">
<p style="margin-top: 0;margin-bottom: 0;">
<img width="54" height="102" border="0" src="http://${servername}/images/mailing/questionmark.png" title="" alt="">
</p>
</td>
</tr>
</table>
Here too, the whole block (within the white border) should be clickable, not just the individual lines of text.
How would you go about this, considering the bad support for CSS in Outlook 2007/2010 (e.g. no display CSS-property)?
Bottom line: How to link a block level alement without being able to wrap it with a (tried with table and div) or using display: block;?
This answer will aim to show how all different options render in Outlook (2013), starting with the "best" solution found so far:
<table width="100%" style="background-color: #ccc;"><tr>
<td style="padding: 15px; text-align: center;">
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
Go to some great website!
</a>
</td>
</tr></table>
This will be rendered like this:
Or, with the link hitbox annotated:
Yeah, that sucks: you want the entire block to be clickable. Basically I'm here to tell you that the answer to the question "how to link block elements (outlook-compatible)" is: this is not possible, not without workarounds.
To support my claim (PS. I highly welcome anyone proving this claim wrong!), here's all the variations I've tried, with their respective renderings in Outlook. I've tried to include some solutions suggested in other answers too.
Here's the code I've used to generate e-mails:
<html>
<head>
<title>My e-mail</title>
</head>
<body>
<table width="660px" align="center" border="0" cellspacing="0" cellpadding="0" style="width: 660px;">
<tr>
<td style="padding: 15px;">
<p>1. The "best" text-only version I've found:</p>
<table width="100%" style="background-color: #ccc;"><tr>
<td style="padding: 15px; text-align: center;">
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
Go to some great website!
</a>
</td>
</tr></table>
<hr />
<p>2a. Workaround using an image. Setting size through style attribute does not work.</p>
<a href="http://www.stackoverflow.com">
<img alt="Go to some great website!" src="your custom image" style="width: 100%; height: 30px;" />
</a>
<hr />
<p>2b. Workaround using an image. Kind of works, but requires an image of exactly correct size through attributes.</p>
<a href="http://www.stackoverflow.com">
<img alt="Go to some great website!" src="your custom image" width="640px" height="30px" />
</a>
<hr />
<p>3. Attempt to link the entire table. Does not work.</p>
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
<table width="100%" style="background-color: #ccc;"><tr>
<td style="padding: 15px; text-align: center;">
Go to some great website!
</td>
</tr></table>
</a>
<hr />
<p>5. Attempt to link the entire div. Does not work.</p>
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
<div style="background-color: #ccc; padding: 15px; text-align: center;">
Go to some great website!
</div>
</a>
<hr />
<p>6. Setting anchor tag to display as a block. Does not work.</p>
<a href="http://www.stackoverflow.com" style=" display: block; text-decoration: none; color: #333; background-color: #ccc; padding: 15px; text-align: center;">
Go to some great website!
</a>
<hr />
<p>6. Hacking with line-height, does not work.</p>
<div style="background-color: #ccc; text-align: center;">
<a href="http://www.stackoverflow.com" style="line-height: 3em; text-decoration: none; color: #333;">
<span style="vertical-align: middle;">Go to some great website!</span>
</a>
</div>
</td>
</tr>
</table>
</body>
</html>
And here's how they're rendered by Outlook 2013, annotated with the link hitbox:
Put an <a> in each of the fields. Not elegant, but this works.
If there is a field that is empty, just put a transparent image in there that's the right width and height. (image itself, not resized in html)
Personally I'd add the call to action as an image in the email and simply wrap it with an anchor tag.
<img src="http://myimage.com/image.png" alt="" />
Given that this is for an email, is there a reason you want to build up the call-to-action in HTML?
UPDATE
Alternatively you could do something like this:
http://jsfiddle.net/gv5aZ/
(Quick fiddle i've put together for you)
I've not tested this extensively but I did manage to get something working.
In you header styles and in the 'a href=""' add the below:
Header style:
#outlook a { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; }
Link inline style:
<a style="font-family: #; font-size: #px; text-decoration: #; border: #color #px #; color: #; padding-bottom: #px; padding-top: #px; padding-left: #px; display: inline-block; padding-right: #px; font-style: #;" href="#" target="_blank">Read more...</a>
Replace # with your styles of course except for the display property (leave that one in!)
Again, I haven't tested this extensively but for me it worked so don't miss anything out from what I've written here :)
EDIT: You might not have a border in your design so make it the same colour as your background
Why don't you just put an anchor around the table? Not entirely sure if it works in outlook though, but it's the easiest solution
<table>....</table>