Wordpress Text Block deletes form inputs - html

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>

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.

Refreshing a page will change it

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>

side by side table is not working properly

I found the following css on the net and used it on my site to show a side by side tables. Most of them are working nicely in all three browsers, IE11, Chrome and Firefox except on one of my template. Although the tables show side by side but the content of the right table does not fully fill the cell correctly. Instead, it seems like the css creates two columns on the right table and only fill in the content of the left column leaving the right column blank. The right table only have one cell.
Here is the codes creating side by side tables:
.zui-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 12px Arial, sans-serif;
}
.zui-table thead th {
background-color: ##DDEFEF;
;
border: solid 1px #DDEEEE;
;
color: #336B6B;
padding: 3px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
;
color: #333;
padding: 3px;
text-shadow: 1px 1px 1px #fff;
}
.zui-table-horizontal tbody td {
border-left: none;
border-right: none;
}
<div id="wrap">
<table CLASS="zui-table">
<tbody>
<tr>
<td valign="top">
<div class="medGreyText">Requester</div>
</td>
<td valign="top"><input type="text" name="requester" class="inputReqText" value="somevalue" Required="True"></td>
</tr>
<tr>
<td valign="top">
<div class="medGreyText">Requesting Institution</div>
</td>
<td valign="top">
<select Name="req_institution" id="req_institution" class="RegSelect" Required="True">
<option value="">--- Please select Institution ---</option>
<option value="xx">xx</option>
<option value="aa">aa</option>
<option value="bb">bb</option>
<option value="cc">cc</option>
</select>
</td>
</tr>
<tr>
<td valign="top">
<div class="medGreyText">Requester's Email</div>
</td>
<td valign="top"><input name="req_email" id="req_email" type="text" class="inputReqText" value="" Required="True"></td>
</tr>
<tr>
<td valign="top">
<div class="medGreyText">Entity Type</div>
</td>
<td valign="top">
<select Name="type" class="RegSelect" Required="True">
<option value="">---Please select entity type ---</option>
<option value="Ind">Individual</option>
<option value="Org">Organization</option>
</select>
</td>
</tr>
<tr>
<td valign="top">
<div class="medGreyText">Advance ID</div>
</td>
<td valign="top"><input type="text" name="idno" id="idno" class="inputReqText" value="" Required="True"></td>
</tr>
<tr>
<td align="center" colspan="2">
<br><br>
<input name="submit" type="submit" value="G E T D A T A" class="SubmitButtons">
</td>
</tr>
</tbody>
</table>
<table CLASS="zui-table">
← the problem area!!! <tbody>
<tr>
<td>
<b>OFFICE POLICY</b><br> It is the goal of the XX research office to offer its' constituents quality.....forth and clarifying our procedures and explaining some of our methods etc....
</td>
</tr>
</tbody>
</table>
</div>
As you see from the screenshot, the tables appear side by side but the content of the right table, the office policy, is not populating the whole cell but instead this css on this template creates two columns side by side. I've been debugging this since this morning with no success.
the css zui-table-horizontal tbody td does not seem to work???
There are several ways to accomplish 2 side-by-side tables with HTML/CSS. There is already an SO answer here:
HTML — Two Tables Horizontally Side by Side
Their example of using one of these styles will solve most cases:
display: inline-block
or
float: left
There are a few things to consider though. In responsive HTML on a mobile device, the tables as you have it will probably go one above the other, which is a good thing for the user experience. If you force them to be side-by-side, the user many never see the right side table.
If side-by-side tables is what you really want, you could go old school and embed your tables in another table, and put each table in separate table columns.
For example, the following snippet generates what you want:
.zui-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 12px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 3px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 3px;
text-shadow: 1px 1px 1px #fff;
}
.zui-table-horizontal tbody td {
border-left: none;
border-right: none;
}
<div id="wrap">
<table>
<tr>
<td>
<table CLASS="zui-table">
<tbody>
<tr>
<td valign="top">
<div class="medGreyText">Requester</div>
</td>
<td valign="top"><input type="text" name="requester" class="inputReqText" value="somevalue" Required="True"></td>
</tr>
<tr>
<td valign="top">
<div class="medGreyText">Requesting Institution</div>
</td>
<td valign="top">
<select Name="req_institution" id="req_institution" class="RegSelect" Required="True">
<option value="">--- Please select Institution ---</option>
<option value="xx">xx</option>
<option value="aa">aa</option>
<option value="bb">bb</option>
<option value="cc">cc</option>
</select>
</td>
</tr>
<tr>
<td valign="top">
<div class="medGreyText">Requester's Email</div>
</td>
<td valign="top"><input name="req_email" id="req_email" type="text" class="inputReqText" value="" Required="True"></td>
</tr>
<tr>
<td valign="top">
<div class="medGreyText">Entity Type</div>
</td>
<td valign="top">
<select Name="type" class="RegSelect" Required="True">
<option value="">---Please select entity type ---</option>
<option value="Ind">Individual</option>
<option value="Org">Organization</option>
</select>
</td>
</tr>
<tr>
<td valign="top">
<div class="medGreyText">Advance ID</div>
</td>
<td valign="top"><input type="text" name="idno" id="idno" class="inputReqText" value="" Required="True"></td>
</tr>
<tr>
<td align="center" colspan="2">
<br><br>
<input name="submit" type="submit" value="G E T D A T A" class="SubmitButtons">
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table CLASS="zui-table">
<tbody>
<tr>
<td>
<b>OFFICE POLICY</b><br> It is the goal of the XX research office to offer its' constituents quality.....forth and clarifying our procedures and explaining some of our methods etc....
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>

How can I add horizontal in between multiple <td>

I have the following code and I want to add some more horizontal space in between the table data. Cellpadding doesn't work because it adds space both horizontally and vertically.
Here's my code:
<table style="width: 745px; margin-left: auto; margin-right: auto; font-family: Calibri; font-size: 16px;">
<tr>
<td width="25%" style="border-bottom: 1px solid; border-bottom-color:#D5D5D5;">
<strong>Parking:</strong> None
</td>
<td width="25%" style="border-bottom: 1px solid; border-bottom-color:#D5D5D5;">
<strong>Floor Cover:</strong> Carpet
</td>
<td width="25%" style="border-bottom: 1px solid; border-bottom-color:#D5D5D5;">
<strong>Extra Field:</strong> None
</td>
<td width="25%" style="border-bottom: 1px solid; border-bottom-color:#D5D5D5;">
<strong>Extra Field:</strong> None
</td>
</tr>
<tr>
<td width="25%" style="border-bottom: 1px solid; border-bottom-color:#D5D5D5;"><strong>Fencing:</strong> None </td>
<td width="25%" style="border-bottom: 1px solid; border-bottom-color:#D5D5D5;"><strong>Security:</strong> None</td>
<td width="25%" style="border-bottom: 1px solid; border-bottom-color:#D5D5D5;"><strong>Pool:</strong> None </td>
<td width="25%" style="border-bottom: 1px solid; border-bottom-color:#D5D5D5;"><strong>Topography:</strong> None </td>
</tr>
</table>
try this
.space {
padding-top: 20px ;
padding-bottom: 20px ;
border-bottom: 1px solid;
border-bottom-color: #D5D5D5;
}
<table style="width: 745px; margin-left: auto; margin-right: auto; font-family: Calibri; font-size: 16px;">
<tr >
<td class="space" width="25%" >
<strong>Parking:</strong> None
</td>
<td class="space" width="25%">
<strong>Floor Cover:</strong> Carpet
</td>
<td class="space" width="25%">
<strong>Extra Field:</strong> None
</td>
<td class="space" width="25%">
<strong>Extra Field:</strong> None
</td>
</tr>
<tr>
<td class="space" width="25%"><strong>Fencing:</strong> None </td>
<td class="space" width="25%"><strong>Security:</strong> None</td>
<td class="space" width="25%"><strong>Pool:</strong> None </td>
<td class="space" width="25%"><strong>Topography:</strong> None </td>
</tr>
</table>
You can use line-height property in CSS. Go through JSFiddle to see this
HTML Code -
<table class="table">
<tr>
<td>
<strong>Parking:</strong> None
</td>
<td>
<strong>Floor Cover:</strong> Carpet
</td>
<td>
<strong>Extra Field:</strong> None
</td>
<td>
<strong>Extra Field:</strong> None
</td>
</tr>
<tr>
<td><strong>Fencing:</strong> None </td>
<td><strong>Security:</strong> None</td>
<td><strong>Pool:</strong> None </td>
<td><strong>Topography:</strong> None </td>
</tr>
</table>
CSS Code -
.table {
width: 745px;
margin-left: auto;
margin-right: auto;
font-family: Calibri;
font-size: 16px;
}
.table td {
border-bottom: 1px solid;
border-bottom-color: #D5D5D5;
width: 25%;
line-height: 2;
}
Also, try to avoid write inline CSS. Hope it helps you.

remove space between two td elements in a table

I have a table with one tr & 2 tds. The 2 td's have tables. There is space between the 2 inner tables, which I don't want. Can someone suggest me how to remove this spacing.
Here is my mark up:
<table style="border-spacing: 0; border-width: 0; padding: 0; border-width: 0;">
<tr>
<td>
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table1">
<tr>
<td>Subscriber Name: </td>
<td>
<input type="text" id="Text1" /></td>
</tr>
<tr>
<td>Subscriber Id: </td>
<td>
<input type="text" id="Text2" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button1" /></td>
</tr>
</table>
</td>
<td>
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table2">
<tr>
<td>Admin Name: </td>
<td>
<input type="text" id="Text3" /></td>
</tr>
<tr>
<td>Admin Id:</td>
<td>
<input type="text" id="Text4" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button2" /></td>
</tr>
</table>
</td>
</tr>
</table>
You need to set the padding of the cells themselves to 0. They do not inherit the padding of the table element.
<table style="border-spacing: 0; border-width: 0; padding: 0; border-width: 0;">
<tr>
<td style="padding-right: 0px;">
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table1">
<tr>
<td>Subscriber Name: </td>
<td>
<input type="text" id="Text1" /></td>
</tr>
<tr>
<td>Subscriber Id: </td>
<td>
<input type="text" id="Text2" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button1" /></td>
</tr>
</table>
</td>
<td style="padding-left: 0px;">
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table2">
<tr>
<td>Admin Name: </td>
<td>
<input type="text" id="Text3" /></td>
</tr>
<tr>
<td>Admin Id:</td>
<td>
<input type="text" id="Text4" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button2" /></td>
</tr>
</table>
</td>
</tr>
You can simple use:
table {
border-collapse: collapse;
}
table{
border-collapse: collapse;
}
<table>
<tr>
<td>
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table1">
<tr>
<td>Subscriber Name: </td>
<td>
<input type="text" id="Text1" /></td>
</tr>
<tr>
<td>Subscriber Id: </td>
<td>
<input type="text" id="Text2" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button1" /></td>
</tr>
</table>
</td>
<td>
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table2">
<tr>
<td>Admin Name: </td>
<td>
<input type="text" id="Text3" /></td>
</tr>
<tr>
<td>Admin Id:</td>
<td>
<input type="text" id="Text4" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button2" /></td>
</tr>
</table>
</td>
</tr>
</table>
include cellpadding="0" cellspacing="0" in the table tag
HTML
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
Fiddle Demo