SharePoint 2010 MasterPage Footer - Custom Table - html

Good Morning,
Little bit of help f possible. I have customised my SharePoint masterpage with a footer. This footer has a table in it which is split up into columns.
Within one of the columns I have added 3 custom search boxes, a sharepoint 2010 hit counter webpart and some text and a logo.
However when I publish this page not all of these elements are displayed. I know the page loads them as I can see them when I view the source code for the page so I am guessing they are hiding under the first element.
Enclosed is the code I am using within this table. If anyone is able to offer some advice I would be graetful.
<table width="350" border="0" cellspacing="0" cellpadding="1">
<div>
<tr>
<td style="height: 22px">
<form action="http://bbmmtoday.bbmmjv.com/_layouts/searchresults.aspx">
<input type=text name=k placeholder="enter search..." size="32" id=k class="search"><input type="submit" value="search" class="button" >
</form></td>
</tr>
<tr>
<td>
</td>
</tr>
<td>
<form action="http://bbmmtoday.bbmmjv.com/_layouts/searchresults.aspx">
<input type=text name=k placeholder="enter search..." size="32" id=k class="search"><input type="submit" value="search" class="button" >
</form></td>
</tr>
<tr>
<td>
</td>
</tr>
<td>
<form action="http://bbmmtoday.bbmmjv.com/_layouts/searchresults.aspx">
<input type=text name=k placeholder="enter search..." size="32" id=k class="search"><input type="submit" value="search" class="button" >
</form></td>
</div>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<span lang="en-gb">
<AEPageHitsWebpart:AEPageHits runat="server" Description="Displays the page hit count of the current page" Options="" Title="AE Page Hits Web Part" ImportErrorMessage="Cannot import the AE Page Hits Web Part." IsActive="True" SinceDate="10/11/2014 10:00:00" ChromeType="TitleAndBorder" Template="<div style="height: 20px; width:200px;background-color:#fead30; Segoe UI;font-family: arial; font-size: 14px; color:#2e3e3f;padding:6px"><strong>{hits}</font></strong> Page hits since {since}<br>" ID="g_a2b9d6ba_62b2_41b5_8536_21e1972eab00" WebPart="true" __WebPartId="{a2b9d6ba-62b2-41b5-8536-21e1972eab00}" __MarkupType="vsattributemarkup" __designer:IsClosed="false"></AEPageHitsWebpart:AEPageHits></span>
</td>
</tr>
<tr>
<td valign="top">
</td>
</tr>
<tr>
<td valign="top">
<span lang="en-gb"> Created by <strong>
<a href="mailto:%20ray.spiteri#bbmmjv.com" class="style4">Ray
Spiteri</a></strong> and <strong>
Tim Quadling</strong></span></td>
</tr>
<tr>
<td valign="top">
</td>
</tr>
<tr>
<td valign="top">
<img alt="" valign="bottom" align="left" src="http://bbmmtoday.bbmmjv.com/SiteAssets/bbmm%20logo.png" width="286" height="26" /></td>
</tr>
<tr>
<td>
<AEPageHitsWebpart:AEPageHits runat="server" Description="Displays the page hit count of the current page" Options="" Title="AE Page Hits Web Part" ImportErrorMessage="Cannot import the AE Page Hits Web Part." IsActive="False" SinceDate="10/11/2014 09:00:00" ChromeType="None" Template="Page Hits: {hits}" ID="g_5e6becd0_a22c_4549_8b43_f9a7c860a639" WebPart="true" __WebPartId="{5e6becd0-a22c-4549-8b43-f9a7c860a639}" __MarkupType="vsattributemarkup" __designer:IsClosed="false"></AEPageHitsWebpart:AEPageHits></td>
</tr>
</table></td>
</tr>
</table>

There are three suspicious things in your HTML:
element after the element with ending between
and Unpair and
Two elements in the end while only 1 opening
All these HTML errors mean that it's on browser how it is rendered. And mostly it's rendered "wrong". Because it's incorrect.

Related

Html checkbox input size is wrong

Current display
Im working on a asp.net site for work and I need to have inputs both text and checkboxes. My current solution is as follows:
<form method="post" style="width:100%">
<table style="padding:5px; width:100%">
<tr>
<td style="white-space:nowrap; width:1%">Printer name:</td>
<td><input type="text" name="PrinterName" value="#Request["PrinterName"]" style="max-width:100%; width:100%" /></td>
</tr>
<tr>
<td style="white-space:nowrap">Model:</td>
<td><input type="text" name="Model" value="#Request["Model"]" style="max-width:100%; width:100%" /></td>
</tr>
<tr>
<td style="white-space:nowrap">Location:</td>
<td><input type="text" name="Location" value="#Request[" Location"]" style="max-width:100%; width:100%" /></td>
</tr>
<tr>
<td style="white-space:nowrap">IP:</td>
<td>
<table style="margin:0px; padding:0px">
<tr>
<td style="padding:0px"><input type="text" name="IP" value="#Request["IP"]" style="max-width:100%; width:100%" /></td>
<td style="white-space:nowrap;width:1%">
<div><input style="margin:0px; padding:0px" type="checkbox" />QuickIP</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="white-space:nowrap">MAC(XX-XX-XX-XX-XX-XX):</td>
<td><input type="text" name="MAC" value="#Request["MAC"]" style="max-width:100%; width:100%" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit" class="Sumbit" style="max-width:100%; width:100%" /></td>
</tr>
</table>
</form>
The checkbox is not reporting the correct size(IE and Chrome) and the text is not being kept inside of the space either.
The aim is to have the text directly beside the checkbox, and both fo those being in line as small as possible to the right of the text input. How would i achieve that without this strange bug ?
Edit: in my testing i had switched the textbox and the button as wel las added a height in the style of the checkbox, those have been corrected now
Edit2: Added in a picture of what shows up right now
It seems you just need to remove height: 1% from
<td style="white-space:nowrap;width:1%">
<!-- remove the height from the style below -->
<div><input style="margin:0px; padding:0px; height:1%" type="checkbox" />QuickIP</div>
</td>
This will render the checkbox next to the "QuickIP" text
Take a look at this codepen.

HTML Form embedded in <table> tag is not rendered properly?

I have following simple HTML form:
<html>
<head>
</head>
<body>
<table border="0" cellpadding="2" cellspacing="0" width="400">
<form name="logon" method="post" id="logon" action="take.php">
<tr>
<td tabindex="0">User ID </td>
<td>
<input name="login" maxlength="12" size="15" value="" title="User ID">
</td>
<td class="loginlabel"> </td>
</tr>
<tr>
<td tabindex="0">Password </td>
<td>
<input type="password" name="password" maxlength="12" size="15" value="">
</td>
<td class="lable"> </td>
</tr>
<tr>
<td colspan="3">
<p class="pushButton"><button type="submit" form="nameform" value="Submit">Submit</button></p>
</td>
</tr>
</form>
</table>
</body>
</html>
When I open this page in any browser and inspect element, I found weird structure of the HTML form. I found <form> tag immediately closed after start,
please find the screen shot of html form inspection,
What is the reason behind this?
In HTML, when you open a tag within another tag, the tag you open (in your case the <form> tag) gets clsoed when its parent gets closed.
Therefore (for example):
<p><form></p>
<p></form></p>
will result in the following:
<p><form></form></p>
<p></p>
This is because, according to the W3C (which sets international standards on HTML among other things), the only context a form element can be used in is where flow content can be expected. Flow content are most elements that are used in the body of documents and applications, for example:
The solution to this is to place the form tags above that of the table, encasing the table in the form as below:
<form>
<table>
</table>
</form>
To clarify:
You need to be sure that the table is inside the form tags. See a complete example as working below:
<html>
<head>
</head>
<body>
<form name="logon" method="post" id="logon" action="take.php">
<table border="0" cellpadding="2" cellspacing="0" width="400">
<tr>
<td tabindex="0">User ID </td>
<td>
<input name="login" maxlength="12" size="15" value="" title="User ID">
</td>
<td class="loginlabel"> </td>
</tr>
<tr>
<td tabindex="0">Password </td>
<td>
<input type="password" name="password" maxlength="12" size="15" value="">
</td>
<td class="lable"> </td>
</tr>
<tr>
<td colspan="3">
<p class="pushButton">
<button type="submit" form="nameform" value="Submit">Submit</button>
</p>
</td>
</tr>
</table>
</form>
</body>
</html>
Using the inspect function in Chrome proves that the output to the browser shows the table nested inside of the form tags:
Feel free to ask any further questions.
Move the table tags inside of the form also:
<form name="logon" method="post" id="logon" action="take.php">
<table border="0" cellpadding="2" cellspacing="0" width="400">
<tr>
<td tabindex="0">User ID </td>
<td>
<input name="login" maxlength="12" size="15" value="" title="User ID">
</td>
<td class="loginlabel"> </td>
</tr>
<tr>
<td tabindex="0">Password </td>
<td>
<input type="password" name="password" maxlength="12" size="15" value="">
</td>
<td class="lable"> </td>
</tr>
<tr>
<td colspan="3">
<p class="pushButton"><button type="submit" form="nameform" value="Submit">Submit</button></p>
</td>
</tr>
</table>
</form>
The reason for this could just be that the form is unsure why there are tr tags without a table tag within it. It seems a strange limitation however maybe somebody else can clarify further.
you have this:
<table border="0" cellpadding="2" cellspacing="0" width="400">
<form name="logon" method="post" id="logon" action="take.php">
You need to declare first the form and then the table
<form name="logon" method="post" id="logon" action="take.php">
<table border="0" cellpadding="2" cellspacing="0" width="400">
<tr>
<td tabindex="0">User ID </td>
<td>
<input name="login" maxlength="12" size="15" value="" title="User ID">
</td>
<td class="loginlabel"> </td>
</tr>
<tr>
<td tabindex="0">Password </td>
<td>
<input type="password" name="password" maxlength="12" size="15" value="">
</td>
<td class="lable"> </td>
</tr>
<tr>
<td colspan="3">
<p class="pushButton"><button type="submit" form="nameform" value="Submit">Submit</button></p>
</td>
</tr>

Contact form html

i am designing a contact page for a friend he gave me a templete to use for his site it has a contact page already built in with the following code
<td><form method="post" action="/frms/contactmail.pl">
<input type="hidden" name="SoupermailConf" value="/frms/contact.con">
<table width="100%" border="0" cellpadding="0" align="center" cellspacing="0">
<tr>
<td><table width="100%" border="0" cellpadding="4" cellspacing="1">
<tr>
<td align="Right"><b>Your
Name: <span class="style1">*</span></b></td>
<td width="70%"><input type="TEXT" name="Name" style="width: 90%;">
</td>
</tr>
<tr>
<td align="Right"><b>E-mail
Address: <span class="style1">*</span></b></td>
<td><input type="TEXT" name="Name2" style="width: 90%;"></td>
</tr>
<tr>
<td align="Right"><b>Company:</b></td>
<td><input type="TEXT" name="Name3" style="width: 90%;"></td>
</tr>
<tr>
<td align="Right"><b>How
did you
find us?</b></td>
<td><input type="TEXT" name="Name4" style="width: 90%;"></td>
</tr>
<tr>
<td align="right"><b> Questions: <span class="style1">* </span></b></td>
<td> </td>
</tr>
<tr>
<td colspan="2" align="center"><textarea name="Question" rows="8" style="width: 90%;" wrap="VIRTUAL"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Submit" value="Submit Form">
<br>
</td>
</tr>
</table></td>
</tr>
</table>
</form>
I do not see where there is an action or mailto command how do i need to change this to make it email to a specific email address.
Looking at the <form> tag, the specified action is a Perl/CGI script - "/frms/contactmail.pl".
Looking at the hidden field named "SoupermailConf", I'd guess this is using the (VERY old) Perl/CGI script Soupermail.
I would recommend you update to something else (perhaps PHP based) if you (or your friend) can?
But, if you cant then according to the manual a hidden field named Email should do the trick.
<input type="hidden" name="Email" value="someone#your.website" />
After looking at the manul pages for the mailer and some examples for the config.txt file I needed to write to make it work.

How to reduce space between label and a text box in html

I am designing a html form where I have a label and a textbox, but in my design there is a big space between the textbox and the label, which I want to reduce.
Here is my code:
<tr>
<td>
<bean:message key="tml.registration.captcha.verification.code"/>
<font color='red'>*</font>
</td>
<td>
<input type="text" name="imageValidation" size="25" title="Enter verification Code"/>
</td>
<td>
<logic:messagesPresent property="imageValidation">
<font color="red"><html:errors property="imageValidation" /></font>
</logic:messagesPresent>
</td>
</tr>
I want the verification code and textbox closely aligned. Somebody please help.
Here is a screenshot of the current state:
Assign small width for the td and apply nowrap style. Update your code like below.
<tr>
<td width="3" nowrap>
<bean:message key="tml.registration.captcha.verification.code" />
<font color='red'>* </font>
</td>
<td>
<input type="text" name="imageValidation" size="25" title="Enter verification Code" />
</td>
<td>
<logic:messagesPresent property="imageValidation">
<font color="red"><html:errors property="imageValidation" /></font>
</logic:messagesPresent>
</td>
</tr>
EDIT:
If this table-row comes up with so many other content, then create one table inside the td like below.
<tr>
<td colspan="3">
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td width="3" nowrap>
<bean:message key="tml.registration.captcha.verification.code" />
<font color='red'>*</font>
</td>
<td>
<input type="text" name="imageValidation" size="25" title="Enter verification Code" />
</td>
<td>
<logic:messagesPresent property="imageValidation">
<font color="red"><html:errors property="imageValidation" /></font>
</logic:messagesPresent>
</td>
</tr>
</table>
</tr>

HTML Table Manipulation(multiple rows/cols in one <tr> or <td>)

I am making a form for inserting recipes to my database, whenever im dealing with forms, i always go for simplicity -> tables.
For example i have this code:
<table>
<tr>
<td>
<tr>Text:</tr>
<tr>
<input type="button" />
</tr>
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
I wanted to have 2 rows inside a column, The above code doesnt actually work, im just demonstrating on how i would like it to arrange.
Is there anyway to do this? or do i have to resort to using divs and CSS(ugghh,, i hate this part. trial and error on the location.....)
<table>
<tr>
<td>
<table>
<tr>
<td>Text:</td>
</tr>
<tr>
<td><input type="button" /></td>
</tr>
</table>
</td>
<td>
<input type="text" />
</td>
</tr>