HTML whitespace issue - html

My web application has started creating nodes for all the whitespace in my html file.
This code:
<td hidden>
<input type="text" hidden name="lines[{{$i}}][id]" id="lines[{{$i}}][id]"
value="{{$line->id}}">
</td>
is resulting in the td node having 3 children, two texts and the input.
Please see this image:
There I have console.log'd the element. I am not aware of how I have caused this to happen? I am using the PhpStorm IDE. I do not know what terms I would search in google to find an answer either.
edit: it seems to be the indenting. Is the web browser supposed to render indenting?
Thank you,

Related

HTML - Either browser or handlebars is removing / ignoring a <table><tr><td> tag

I have a table class that I use to vertically centralise text in a span or div. I am using Handlebars in Node to render several templates server side, I have used this method on several partials in my web project, with no problems.
However in one particular partial / area of markup, either the browser or Handlebars is ignoring or removing the table, tr and td tags, showing only the text that is inside the tags.
In the past when this has happened it was because my tags were incorrect. However I have cross checked this code with my other markup where the table tags do show (in other partials), so I can't see where the problem is, and I can't find any suitable online topic about this (it is probably something really obvious that will make me look like a dummy).
I have tried in Chrome and Edge. I have also tried saving the markup snippet in a .html file (as opposed to a .hbs file) and opening that in the browser, and by doing this it does show the table tags. The consequence of this error is that I am unable to vertically align the text in the span. I am not sure if the markup is invalid according to the browser or Handlebars, but I am not using any {{Handlebars}} tags here so it shouldn't warrant the table tags to be invalid.
Markup:
<div class="lp-menuselector" title="View summary of Individual Learning Plan and evidence pack">
<div class="lp-menuselector-iconholder">
<img src="icons/icon_lp-overview.svg"/>
</div>
<span class="lp-menuselector-textholder">
<table class="tablecellleftalign">
<tr>
<td>
ILP Overview
</td>
</tr>
</table>
</span>
</div>
Output markup shown in Chrome Developer Tools / Elements:
<span class="lp-menuselector-textholder">
ILP Overview
</span>
Topic Closed:
After I restarted my computer and restarted the Node application, this error no longer occurs. Glitches in the matrix.

Open tag arrows showing up in browser but don't exist in my code

This is a hard one to explain, but I have 3 phantom arrows (<<<) appearing in the browser, but no stray arrows in my HTML.
When I inspect the element, the arrows are a child of my 'bookshelf-wrapper' container.
Where are these arrows coming from and how can I get rid of them?
Screenshot attached as gives clearer indication than code.
Side note - I realise it's 'Picture' not 'Portrait'.
check html for multiple openings like '<<'. As far as I can see from the image 1 '<' is comming from with the input#delete.
in image I can see:
<<td class="cell"><input type="checkbox" id="delete"></td>
should be without extra '<':
<td class="cell"><input type="checkbox" id="delete"></td>
If it doesn't solves your problem, please provide more code and I'll update my answer

Why does produce blue dash

I am working on an IoT project that uses an ESP8266 WIFI module. For those unfamiliar, suffice to say it's an SOC with wifi capabilities that can be used in station or AP mode. There are several ways to upload programs to this little marvel, I am using a NodeMCU platform with Lua.
Now the meat of the issue is trying to upload through the Lua interpreter an HTML string to be displayed as a web page for IoT control. I had this working, but had to do some rebuilding of the system to add more control points. Aside from issues with the uploading (issues with the Lua interpreter), which needs no attention, I am having issues with the String built to send to a browser when accessed.
I basically have 2 buttons side by side and wanted separation using &nbsp. That originally worked, but now it produces a blue dash in all the browsers I've tried.The string to be sent is as follows:
<p style= "font-size:90px;">
Rear Left <button style= \"width:150px;height:150px;font-size:90px;background:green;\">On</button> <button style= \"width:150px;height:150px;font-size:90px;background-color:red;">Off</button>
</p>"
Oddly when a snippet of the program containing the HTML code string is saved to a file and opened with a browser it looks fine?! Any insight?
Oddly when a snippet of the program containing the HTML code string is
saved to a file and opened with a browser it looks fine?!
No, once you clean-up all the syntax problems it doesn't look fine anymore:
Your problem has nothing to do with NodeMCU, ESPlorer et.al. Your code simply isn't valid HTML5 according to the HTML5 Spec Document from W3C:
Content model: Transparent, but there must be no interactive content descendant.
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
You can't nest <button> in <a>. Instead wrap that button inside a <form> tag as such:
<p style="font-size:90px; display: inline">
Rear Left
<form href="?pin=ON1" style="display: inline" method="get">
<button style="width:150px;height:150px;font-size:90px;background:green;">On</button>
</form>
<form href="?pin=OFF1" style="display: inline" method="get">
<button style="width:150px;height:150px;font-size:90px;background-color:red;">Off</button>
</form>
</p>
However, what you should IMO really do is using plain HTML anchors
<p style="font-size:90px;">
Rear Left
On
Off
</p>
and style those two links like buttons (e.g. https://designshack.net/?p=25423 or How to make <a href=""> link look like a button?).

HTML tags with spaces

so I have a strange request. I've been working on some security project for school, and I've been able to successfully inject some html code using a form on our test site. What's interesting is that it only accepts the html code as one line and with no spaces. This brings me to my question, so far I've only been able to get text and font color changes to work. But I want to see if someone could inject images/audio/video.
I'm trying to figure out how to turn this:
<img src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
Into this:
<imgsrc="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
but add a space with code.
I've tried adding the but that only works with actualy text and not the tag itself. Any help is appreciated.
Interesting note: I was able to inject <font size="50" color="red"></font>
But I have no idea why that works but the image doesn't.
Have you tried the following?
A slash:
<img\ src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
Using a non-traditional closing tag:
<img src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"></img>
Injecting a blank <img> tag:
<img src=""/>
Here's another solution: Try inline CSS:
<div style="background:url(http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png);height:400px;width:400px"></div>
See this fiddle: http://jsfiddle.net/9MYrM/

Form Within A Form & Table Not Appearing

I have a form within a table which is within another form. My problem is that the embedded form tag is not appearing - the input and iframe appears, but the form tags do not appear. The table and outer form appear. What's wrong?
<form>
<table id=\"mytableid\">
<tr class=\"form_row\">
<td align=\"right\">
Upload Photo:
</td>
<td align=\"left\">
<form action=\"/myuploadpath\" method=\"post\" enctype=\"multipart/form-data\" target=\"upload_target\" id=\"photo_url_upload_form\" name=\"venue_photo_url_upload_form\">
<input type=\"file\" name=\"photo_url\" id=\"photo_url\" size=\"40\" />
<iframe id=\"upload_target\" name=\"upload_target\" src=\"#\" style=\"width:0;height:0;border:0px solid #fff;\"></iframe>
</form>
</td>
</tr>
</table>
</form>
Putting a form inside another form is not valid HTML. When this happens each browser will do different things with the markup. Some ignore parts, some break, etc. Either way you shouldn't do this.
Edit
If you are using tables for layout purposes, you technically shouldn't be. They are only meant for tabular data. You should use divs/spans and CSS to create the look you want on your site. A great place to learn about this stuff is W3C Schools.
I assume you're using something like Firebug or the Chrome DOM Inspector to look at your DOM tree and you can't see the inner <form>. These tools inspect the DOM itself, not the HTML source. That is, they show you what the browser has interpreted from your HTML. The problem in this case is that nesting a <form> within another <form> is invalid, and hence the browser has ignored it and continued parsing the rest of the document.
Obviously, the fix is to ditch that outer form since it's not doing anything. If you have it there for styling purposes, perhaps use a <div> with a class.