Refreshing a page will change it - html

How can it be possible that the simple refresh of a page will change how the content it's displayed, while the content itself it's not changed?
Specifically i have some divs with inline-block style that are supposed to stay in line on desktop page and to fall below each other on smaller screen.
The first time i load the url, writing it in the address bar, i see correctly the divs in a straight line. But if i hit F5 and refresh the last div falls down like the simple act of refreshing put some misterious space among them. Since the first load of the page to the refresh nothing is changed, not a single line, not a single content nor the screen resolution obviously.
This is not happening just sometimes, but regularly on the same page.
I could link the whole page but it's on a production ecommerce site and i don't want to advertize it. I'm reporting here the extract of the code, but i'm not sure it's enough to fully address the problem, but maybe someone has a clue that will point me in the right direction.
<div style="border-top: 1px solid lightgrey; border-bottom: 1px solid lightgray; padding: 5px 0;margin: 5px 0;">
<div style="display:inline-block;min-width:114px;line-height: 17px;vertical-align:top;" class="emboss">
<a href="https://shop.suonostore.com/spedizioni-e-tempistiche" style="line-height:20px; color:#47a447; font-size:11px;" target="_blank" title="Vedi maggiori informazioni sulla disponibilità">
<img class="aligncenter" style="float: left; margin: 1px;" src="/wp-content/uploads/stock3.png" alt="Alta disponibilità" title="Alta disponibilità" width="31" height="auto" border="0"><strong>DISPONIBILE</strong><br>IN SEDE<br><em> Stock Alto</em>
</a>
</div>
<div id="div_consegna" style="display:inline-block;min-width:258px;vertical-align:top;margin-left:6px; padding: 5px 0px 0px 0px;">
<table border="0" style="display:inline-block;">
<tbody><tr>
<td align="left" style="padding-left:0px;">
<span style="font-weight:bold; color:#333; font-size:12px; color:#000000;">Ordina entro</span> 
</td>
<td align="right" style="line-height: 25px;padding-right: 3px;">
<span style="font-weight:bold; color:#333; font-size:12px; color:#000000;"><strong> <span id="tc_th">18H</span><img class="centre" style="float: centre; margin: 1px;" src="/wp-content/uploads/due_punti.gif" alt=":" width="5" height="auto" border="0"><span id="tc_tm">37m</span></strong></span>
</td>
</tr>
<tr>
<td colspan="2" align="right" style="line-height: 12px;padding-right: 3px;">
<img style="float: left; margin: 2px; padding-left: 4px;" src="/wp-content/uploads/espressa.png" alt="consegna_espressa" title="Spedizione Espressa entro le 16:00" width="35" height="auto" border="0"><span style="font-weight:bold; color:#333; font-size:12px; color:#000000;">
ti arriva il giorno</span>
</td>
</tr>
</tbody></table>
<table border="0" bgcolor="#000000" background="/wp-content/uploads/Calendario.png" alt="agenda" title="Data di consegna" width="110" height="55" style="display:inline-block;">
<tbody><tr>
<td rowspan="2" style="font-size:32px; color:#000000; padding-bottom: 3px; padding-left: 2px;">
<strong>27</strong>
</td>
<td align="center" style="Font-size: 9px; min-width: 46px; color: #000080; padding: 5px 1px 4px 2px;">
Lunedì
</td>
<td style="line-height: 25px;Font-size: 8px;font-family: Helvetica Neue Light;padding: 8px 1px 0px 3px;color:#8b0000;" align="right">
2020
</td>
</tr>
<tr>
<td align="center" style="padding: 0px 0px 4px 2px;color:#8b0000;font-size: 12px; min-width: 66px;" colspan="2">
<strong>Gennaio</strong>
</td>
</tr>
</tbody></table>
</div>
<div style="display:inline-block;min-width:255px;vertical-align:top; padding: 5px 0px 0px 19px;">
<form class="cart" method="post" enctype="multipart/form-data">
<div class="quantity">
<input type="number" step="1" min="0" max="" name="quantity" value="1" title="Qtà" class="input-text qty text" size="4" pattern="" inputmode="">
</div>
<input type="hidden" name="add-to-cart" value="54325">
<button type="submit" class="single_add_to_cart_button button alt">Acquista</button>
</form>
</div>
</div>

Related

Why aren't the contents of my html table displaying properly in email?

I created a table to format these 4 blocks of image & text, and everything displays perfectly in litmus' browser preview, but the images and text don't display correctly (or at all for some) in different email provider previews, nor in the test I sent to my own email:
outlook 365 on windows render
proper display, rendered OL Office 365 on mac 10.1
The blocks don't have the rounded corners, each image linked is partially cut off within the cell. I'm not sure where the issue is because according to litmus there are no closing tags/other errors in code.
The company I work at uses tables to build out our emails. So this is a table within the larger table for the entire email, if that's relevant. Any ideas of what is causing this issue are welcome!
<table style="vertical-align: bottom; border:1px white; border-radius: 10px; cellpadding:10; cellspacing: 0; background: #ffffff; color: #005287; font-family: Arial, Helvetica, sans-serif; font-size: 16pt; font-weight: bold; line-height: .6">
<tbody>
<tr height="40">
<td valign="bottom" style="border: 1px white; border-radius: 5px; cellpadding: 10px; width: 40px;">
</td>
<td style="border: 1px white; border-radius: 5px; width: 253px;">
</td>
<td style="border: 1px white; border-radius: 5px; width: 13px;">
</td>
<td style="border: 1px white; border-radius: 5px; width: 253px;">
</td>
<td style="border: 1px white; border-radius: 5px; width: 40;">
</td>
</tr>
<tr height="165">
<td style="border: 1px white; border-radius: 5px; width: 40;">
</td>
<td valign: bottom align="center" style="border: 1px white; border-radius: 5px; padding-bottom: 15px; width: 253px; background-color:#D7ECF8;">
<img src="https://emailmarketer.png" width="229.5" height="110" /><br /><br /> Database Choices
</td>
<td valign="bottom" border="1px white" border-radius="5px" width="13">
</td>
<td align="center" style="border: 1px white; border-radius: 5px; padding-bottom: 15px; vertical-align: bottom; width: 253px; background-color:#D7ECF8;">
<img valign="middle" src="emailmarketer.png" width="91" height="94" /><br /><br /> Powerful Performance
</td>
<td valign="bottom" border="1px white" border-radius="5px" width="40">
</td>
</tr>
<tr height="13">
<td valign="bottom" border="1px white" border-radius="5px" width="40">
</td>
<td valign="bottom" border="1px white" border-radius="5px" width="253">
</td>
<td valign="bottom" border="1px white" border-radius="5px" width="13">
</td>
<td valign="bottom" border="1px white" border-radius="5px" width="253">
</td>
<td valign="bottom" border="1px white" border-radius="5px" width="40">
</td>
</tr>
<tr height="165">
<td valign="bottom" border="1px white" border-radius="5px" width="40">
</td>
<td valign="bottom" align="center" style="width: 253px; border: 1px white; border-radius: 5px; padding-bottom: 15px; background-color:#D7ECF8;">
<img src="https://emailmarketer.png" width="105" height="105" /><br /><br /> Flexible Deployment
</td>
<td valign="bottom" border="1px white" border-radius="5px" width="13">
</td>
<td align="center" align="center" style="width: 253px; cellpadding: 10px; border: 1px white; border-radius: 5px; valign: middle; background-color:#D7ECF8;">
<img src="https://emailmarketer.png" width="211" height="109" /><br /><br /> Scalability
</td>
<td valign="bottom" border="1px white" border-radius="5px" width="40">
</td>
</tr>
</table>
broken display, simulated OL Office 365 on windows 10
proper display, simulated OL Office 365 on mac 10.1
All email clients can and will render html differently. For instance Outlook uses an html/css rendering engine from word 2007 here is what Microsoft published about outlook.
https://learn.microsoft.com/en-us/previous-versions/office/developer/office-2007/aa338201(v=office.12)?redirectedfrom=MSDN
Im sure other email clients have other engines, but that is why the table probably doesn’t look as expected.

Responsive table for Email

Trying to get last piece done which is the Email footer area.
There are 4 links in a table, which in web-view are fine, they are in horizontal line.
On Mobile version I'm trying to have them in sets of 2.
Meaning 2 links on top and 2 below them.
The thing is this needs to be done with inline CSS, without having style in it's own separate section.
<table border="0" cellpadding="0" cellspacing="0" id="Table5" width="100%">
<tr style="font-size: 11px; background-color: black;">
<td align="center">
<br>
<br>
<span style="color:#7A7A7A; line-height: 1.3; "><font face="Arial" size="1" ><b>GENERIC INFORMATION 123
<div style="line-height:1.3;">T 000 000 000 |
TEST#TESTING.COM<br></div></b></font></span><br>
<br>
<span style="color: rgb(221, 221, 221);"><font face="Arial" size="1"><b><a alias="" conversion="false" data-linkto="http://" href="google.com" style="color:#999999;text-decoration:none;" title=""><span style="padding:12px;">BOOK APPOINTMENT</span></a><a alias="" conversion="false" data-linkto="http://" href="google.com" style="color:#999999;text-decoration:none;" title=""><span style="padding:12px;">PRIVACY</span></a><a alias="" conversion="false" data-linkto="http://"google.com" style="color:#999999;text-decoration:none;" title=""><span style="padding:12px;">UNSUBSCRIBE</span></a><a alias="" conversion="false" data-linkto="http://" href="google.com" style="color:#999999;text-decoration:none;" title=""><span style="padding:12px;">CONTACT US</span></a></b></font></span><br>
<br>
</td></tr></table>
Any advice? #media is out of the question currently since it cannot be used with inline CSS.
This is the code you need to start. You'll have to do some footwork to get this to not stack in Outlook desktop email clients. It works in every major email client and does not require a #media tag.
The first table always spans the width of email body.
The Left and Right are 300px wide. When the email client is under 300px wide, they will stack.
<table role="presentation" cellspacing="0" cellpadding="0" border="1" width="100%" style="">
<tr>
<td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: center;">
<p style="margin: 0;">Single Column</p>
</td>
</tr>
</table>
<table role="presentation" cellspacing="0" cellpadding="0" border="1" width="300" style="float:left;">
<tr>
<td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;">
<p style="margin: 0;">Left Column</p>
</td>
</tr>
</table>
<table role="presentation" cellspacing="0" cellpadding="0" border="1" width="300" style="float:left;">
<tr>
<td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;">
<p style="margin: 0;">Right Column</p>
</td>
</tr>
</table>
Good luck.

Wordpress Text Block deletes form inputs

I'm trying to edit a Wordpress website adding a form. I'm adding this form into a text block writing it in pure html. The thing is when I go to the preview Wordpress deleted the input tags.
I tried looking for someone with the same problem, but I haven't found nothing yet.
Why is this happening?
Here is the code I'm adding into the textblock. The input tags disappear.
Thanks!
<form id="form1" name="form1" method="post" action="http://test.cl/bridge.php">
<table cellspacing="0" style="width:100%">
<tbody>
<tr>
<td style="width:30%; text-align:center; border: 0px solid #ffffff;">
User:
</td>
<td style="width:70%; text-align:center; border: 0px solid #ffffff;">
<input name="nombre" type="text" id="inputNombre" placeholder="User" style="width:90%">
</td>
</tr>
<tr>
<td style="width:30%; text-align:center; border: 0px solid #ffffff;">
Password:
</td>
<td style="width:70%; text-align:center; border: 0px solid #ffffff;">
<input name="pass" type="password" id="inputPass" placeholder="Password" style="width:90%">
</td>
</tr>
<tr>
<td colspan="2" style="border: 0px solid #ffffff;">
<br />
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center; border: 0px solid #ffffff;">
<input type="submit" name="Submit" value="Login" style="border: none !important; width:170px; padding:4px ; font-size:14px; font-weight:bold; background-color: #0CF; color:#069; border-radius:20px;">
</td>
</tr>
<td colspan="2" style="border: 0px solid #ffffff;">
<br />
</td>
<tr>
<td colspan="2" style="text-align:center; border: 0px solid #ffffff;">
<a href="http://test.cl/index.php">
Forgot your password?
</a>
</td>
</tr>
</tbody>
</table>
</form>

Colspan Width Issue for Outlook 2013

I'm having trouble getting Outloook 2013 to render this code correctly. I'm trying to get the two columns next to each other in a 600px table in the 2nd row.
For some reason, the first column in the second row is spanning 600px and the second column is correctly to the right but is just tacked on in addition to the 600px so it spans larger than the rest of the columns.
Here is the jsfiddle of the code (sorry for the long code). https://jsfiddle.net/abdiyohan/hdpjjh5x/2/
<body bgcolor="#CCCCCC">
<table align="center" width="100%" height="100%" bgcolor="#CCCCCC" style="background-color:#CCCCCC;">
<tr>
<td width="100%" height="100%" bgcolor="#CCCCCC" style="background-color:#CCCCCC;" align="center">
<table style="width:600px;" cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#ffffff" align="center">
<tr>
<td colspan="2" style="border-top: 7px solid #a0a5a6; border-bottom: 2px solid #a0a5a6; color: #000000;width:100%;" bgcolor="#005195" height="95" width="100%">
<img align="top" style="font-family:Arial,Helvetica,sans-serif;font-size: 18px;border-style: none;color: #ffffff;" alt="" src="" height="95" width="600" border="0" />
</td>
</tr>
<tr>
<td width="75%" style="border-bottom: 2px solid #a0a5a6;padding:20px 20px 10px 20px;font-family: Arial,Helvetica,sans-serif; color: #e83e2a; width:75%;font-size: 14pt; line-height: 28px;" valign="top" align="left">
<div width="100%" style="width:100%;font-family: Arial,Helvetica,sans-serif; color:#005195;padding-bottom:0px; font-size: 14pt; line-height: 28px;"><a name="English">Lorem Ipsum</a>
<p style="line-height: 20px; margin-bottom: 10px; margin-top: 0px; font-size: 11pt;padding-top:10px;color:#005195;">Lorem Ipsum,</p>
<table cellpadding="0" cellspacing="0" border="0" style="display:block;margin:0px 20px 20px 0;" align="left">
<tr>
<td height="28" style="height:28px;font-family: Arial,Helvetica,sans-serif; font-size: 14px; background:#ccc; border-radius: 5px; padding: 0px 10px; color: #005195;" align="left">
<div align="center"><a style="color: #005195; text-decoration: none;" href="#top" target="_self">Back to Top</a>
</div>
</td>
</tr>
</table>
</div>
</td>
<td colspan="1" style="border-bottom: 2px solid #a0a5a6;background-color:#efefef;padding:20px 20px 0px 20px;font-family: Arial,Helvetica,sans-serif;color:#005195; width:25%; font-size: 14pt; line-height: 28px;" align="right" bgcolor="#ffffff" valign="top" width="25%">
<div style="width:100%;height:100%;" width="100%">
<h1 style="font-size: 14pt;font-family: Arial,Helvetica,sans-serif;color:#005195;font-weight:normal;padding:0px;margin:0px;">Global Links</h1>
<p style="color:#4682B4;font-size: 11pt; line-height: 18px; margin-bottom: 10px;margin-top:10px;"><a style="color:#4682B4; text-decoration: none;" href="#English" target="_self">English</a>
</p>
<p style="color:#4682B4;font-size: 11pt; line-height: 18px; margin-bottom: 10px; margin-top: 20px;"><a style="color:#4682B4; text-decoration: none;" href="#Spanish (Latin America)" target="_self">Español (Latinoamérica)</a>
</p>
</div>
</td>
</tr>
<tr>
<td colspan="2" width="100%" style="border-bottom: 2px solid #a0a5a6;padding:20px 20px 10px 20px;font-family: Arial,Helvetica,sans-serif; color: #e83e2a; width: 100%;font-size: 14pt; line-height: 28px;" valign="top" align="left">
<div width="100%" style="width:100%;font-family: Arial,Helvetica,sans-serif; color:#005195;padding-bottom:0px; font-size: 14pt; line-height: 28px;"> <a name="Spanish (Latin America)"></a>¡Comparta su opinión!
<p style="line-height: 20px; margin-bottom: 10px; margin-top: 0px; font-size: 11pt;padding-top:10px;color:#005195;">Lorem Ipsum,</p>
<table cellpadding="0" cellspacing="0" border="0" style="display:block;margin:0px 20px 20px 0;" align="left">
<tr>
<td height="28" style="height:28px;font-family: Arial,Helvetica,sans-serif; font-size: 14px; background:#ccc; border-radius: 5px; padding: 0px 10px; color: #005195;" align="left">
<div align="center"><a style="color: #005195; text-decoration: none;" href="#top" target="_self">Back to Top</a>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
I know the code looks pretty messy, but I've tried so many solutions and fixes from across the internet and have come up with nothing.
This code works in OWA, which is strange and depressing, but breaks in Outlook 2013 and Outlook 2011 for Mac. Any help would be much appreciated.
The fact is that Outlook uses Word for rendering HTML markup. You can find the supported and unsupported HTML elements, attributes, and cascading style sheets properties described in the following series of articles in MSDN:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)

Get two columns (Images Stacked over Text) to sit properly next to each other

This is an error which only occurs in Outlook 2010. This email template seems to work on 90% of devices and browsers.
The graphic below is an example of how it looks in Outlook 2010. The crude blue draw over is intended to show how it should look. You can also view the fiddle for the entire code which displays that section how it is supposed to be displayed.
http://postimg.org/image/zacxr5acr/
Here's the full fiddle link http://jsfiddle.net/Nexus1234/bxp14vcw/
Note - the below sample code is only the relevant section and sending this on its own in an email doesn't cause the issue, it's somewhere within the complete html which is in the jsfiddle
<!-- Two Column (Images Stacked over Text) -->
<table align="center" bgcolor="#EEEEED" border="0" cellpadding="0" cellspacing=
"0" class="deviceWidth" width="580">
<tbody>
<tr>
<td class="center" style="padding:10px 0 0 5px">
<table align="left" border="0" cellpadding="0" cellspacing="0" class=
"deviceWidth" width="49%">
<tbody>
<tr>
<td align="center">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
<img alt="" class="deviceWidth" src=
"https://mailerdocs.s3.amazonaws.com/i2in/email_assets/108/forum.jpg"
style=
"border-radius: 4px; width: 267px; border-width: 0px; border-style: solid; height: 200px;" /></p>
</td>
</tr>
<tr>
<td style=
"font-size: 12px; color: #6f6f6f; font-weight: normal; text-align: left; font-family: arial,helvetica neue,helvetica,sans-serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
<table style="width:100%;border-bottom: 1px solid #333">
<tbody>
<tr>
<td style="padding:0 10px 10px 5px" valign="top">
<img alt="" id="circle" src=
"https://mailerdocs.s3.amazonaws.com/i2in/email_assets/108/point.png"
style=
"border-width: 0px; border-style: solid; float: left; width: 40px; height: 40px;" /></td>
<td style="padding:0 10px 10px 0" valign="middle">
<h1 style=
"text-decoration: none; font-size: 16px; color: #363636; font-weight: bold; font-family:Arial, sans-serif">
The Roman Forum<br />
</h1>
</td>
</tr>
</tbody>
</table>
<p><span style=
"font-family:arial,helvetica neue,helvetica,sans-serif;">Here,
in a small space hemmed in by the great rocks of the Capitoline
and Palatine hills, the greatest names of Roman history fought
for power and prestige. Amidst an extraordinary concentration
of famed and marvellous buildings jostling for space, you will
walk where Antony spoke over Caesar’s body, Cicero
delivered stinging orations and the legions processed in
triumph.</span></p>
</td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" class=
"deviceWidth" width="49%">
<tbody>
<tr>
<td align="center">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
<img alt="" class="deviceWidth" src=
"https://mailerdocs.s3.amazonaws.com/i2in/email_assets/108/villa-deste-tivoli.jpg"
style=
"border-radius: 4px; width: 267px; border-width: 0px; border-style: solid; height: 200px;" /></p>
</td>
</tr>
<tr>
<td style=
"font-size: 12px; color: #6f6f6f; font-weight: normal; text-align: left; font-family: arial,helvetica neue,helvetica,sans-serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
<table style="border-bottom: 1px solid #333">
<tbody>
<tr>
<td style="padding:0 10px 10px 5px" valign="top">
<img alt="" id="circle" src=
"https://mailerdocs.s3.amazonaws.com/i2in/email_assets/108/point.png"
style=
"border-width: 0px; border-style: solid; float: left; width: 40px; height: 40px;" /></td>
<td style="padding:0 10px 10px 0" valign="middle">
<h1 style=
"text-decoration: none; font-size: 16px; color: #363636; font-weight: bold; font-family:Arial, sans-serif">
The Villa Adriana & The Villa D'Este</h1>
</td>
</tr>
</tbody>
</table>
<p><span style=
"font-family:arial,helvetica neue,helvetica,sans-serif;">Experience
the opulence of two ages in a trip out to the inspiring
hillside retreat of Tivoli. In the morning, we visit the
massive, brilliantly preserved and sprawling villa of the
Emperor Hadrian, where luxury on an unparalleled scale centres
on a fantasy rendition of the River Nile. The afternoon is
spent amidst the fountains and gardens of the enchanting
Renaissance Villa d’Este.</span></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table><!-- End Two Column (Images Stacked over Text) -->
One suggestion would be to always keep in mind the 20px rule. Outlook loves to add spacing around tables, making aligned tables a hassle.
My usual equation is,
(Wrapper table - 20px) / 2.
Your example:
(580 - 20px) = 560 / 2.
Percentages are tricky, I would set your tables as a fixed width. Your deviceWidth class will handle your widths on mobile anyway.
I would suggest applying this too all of your aligned tables.
If that doesn't work, let me know.