i have some html code as follows, which was supplied by our graphics developers. the issue is when i import this into asp.net (c#) page i get to see a lot of orphan divs. it feels as if there are not opening divs for several of the closing divs. following is code snippet.
<div class="col-lg-2 col-lg-3 quick-launch">
<div class="thumbnail">
<a href=""> <img src="assets/img/app_images/app_7.jpg" width="115" height="114">
<div class="caption">
<h3>TEST</h3>
</a></div>
</div>
</div>
could someone here please let me know if there is something in visual studio that is causing this?
You're inverting <div> and <a> closing tags. This is valid HTML (but not valid XHTML so you'd better to check your DOCTYPE) but it may confuse Visual Studio editor:
<a href=""> <img src="assets/img/app_images/app_7.jpg" width="115" height="114">
<div class="caption">
<h3>TEST</h3>
</a>
</div>
a
Should be:
<a href=""> <img src="assets/img/app_images/app_7.jpg" width="115" height="114">
<div class="caption">
<h3>TEST</h3>
</div>
</a>
Edit: what's wrong with that? It works because HTML parser doesn't complain about <a><div><a/></div> (if DOCTYPE isnt XHTML) but you should complain about it. Let me explain: parser won't complain because </div> (closing tag) isn't optional then it won't just silently add it. This is theory, in practice browsers handle this in many ways. Some of them silently close <div> when </a> is reached (then </div> will close outer one), some others don't do it (I repeat because it's not an optional closing tag) then </div> will close inner (and right) one. IMO With such unreliable behavior you should ask your developer/graphics designer to fix that code. In general (and with few exceptions like <hr> and <br>) I would write HTML code as it was XHTML.
Related
I have a project in Visual Studios 2017 with this block of code in it. I just went to remake it in on my work computer (running 2015). Is there a reason why the middle two links don't work anymore?
The code doesn't even turn purple in the IDE. The top screenshot is from my laptop, the bottom screenshot is from my work computer (where the trouble is) https://gyazo.com/2968018e89c24748d48cb2291dce50d3?token=e038af6931608caede27c103a0365184
<div class="col-sm-6">
<div class="well well-sm" style="background-color:lightcyan">
<h4>AVAS for Opperations</h4>
<div class="list-group">
AVAS Time-Space Chart <img src="https://cdn1.iconfinder.com/data/icons/education-set-4/512/information-512.png" class="w3-round" alt="Denmark" style="width:3%">
History by Bus/Run/Operator <img src="https://cdn1.iconfinder.com/data/icons/education-set-4/512/information-512.png" class="w3-round" alt="Denmark" style="width:3%">
<a asp-area="" asp-controller="Home" asp-action="Legal" class="list-group-item" data-toggle="tooltip" title="(Make a list of stops and timepoints for a bus for an hour)">Bus-Hour History <img src="https://cdn1.iconfinder.com/data/icons/education-set-4/512/information-512.png" class="w3-round" alt="Denmark" style="width:3%"></a>
<a asp-area="" asp-controller="Home" asp-action="Legal" class="list-group-item" data-toggle="tooltip" title="(Make a list of buses passing a selected stop)">Bus-Stop History <img src="https://cdn1.iconfinder.com/data/icons/education-set-4/512/information-512.png" class="w3-round" alt="Denmark" style="width:3%"></a>
</div>
</div>
</div>
Maybe you are missing Razor Language Services.
Check this question.
Currently in the process of learning MVC and I think it's interfering with HTML code. I have just a basic navigational menu as a list and two <li> items seem to combine into one. Any way to make sure the two are separated when live?
#if ((Request.Url.AbsolutePath.ToString().ToLower() != "/home/index") && (Request.Url.AbsolutePath.ToString() != "/"))
{
<nav data-spy="affix" data-offset-top="500" style="border-radius:0px; left: 0" ng-hide="sideBar" id="nav">
<img src="~/Content/images/open.png" ng-model="sideBar" id="sideBarOpen" style="left:0px; top:0;"/>
<div id="sideBar" style="left: -200px">
<ul>
<li> Home </li>
<li><br /></li>
<li>About Me</li>
#############
<li>Experience</li>
<li>Resume</li>
############ These two seem to be recognized as 1 <li> and not two.
<li>Contact</li>
</ul>
<img src="/Content/images/myPic.jpg" />
</div>
</nav>
<div id="sideBarBack" style="width:0%;">
</div>
}
Youre missing a quotation mark in the id="> part. This is not a valid html so your wen browser tries to workaround that resulting in the two elements combined.
To fix that instead of:
<li>Experience</li>
use a correct tag attribute id="":
<li>Experience</li>
I've written a document editor which uses contentEditable to create HTML content. In some larger documents the style of syntax seems is all over the place. This is most likely a result of content pasted in from wordpad and earlier versions of the editor.
The problem is, now I'm left with a lot of very inconsistent documents.
It starts off fairly normal. Simple <p> tags for each line
<p>It is a truth</p>
<p>universally acknowledged</p>
<p>that a single man</p>
The only "bad" html up to this point is a few empty <i></i> tags, and the occasional instead of whitespace (anyone know why?)
Then it about halfway down the document, the line breaks switched to this format.
<div>
<br>
CHAPTER 1<br>
<br>
The sky above the port
<br>
was the color of a television
<br>
tuned to a dead channel.
</div>
<div>
<br>
</div>
Then about 3/4 down the page, we get this. It seems to have reverted to <p></p> tags, but now embeds them randomly in <span> tags with empty lang attributes
<div>
<span lang="">
<p>It was the best of times,</p>
<p>it was the worst of times,</p>
</span>
<p>it was the age of wisdom,</p>
<p>it was the age of foolishness,</p>
</div>
Note: some lines are inside a <span>, others are outside.
Worse, later on we get nested <span> tags
<span lang="">
<div>
<span lang="EN-GB">
<p>Stately, plump </p>
<p>Buck Mulligan came </p>
<span lang="EN-GB">
<p>from the stairhead, </p>
<p>bearing a bowl of lather </p>
<span lang="EN-GB">
<p> on which a mirror and a razor lay crossed</p>
</span>
</span>
</span>
</div>
</span>
You may also notice the parentage of the <span> and <div> tags is now reversed at the outset, with the <div> now a child of the <span>
I've noticed other oddities. <i></i> is used at the start but later <em></em> is used.
What's the best way to clean this HTML up?
Should I try and surround orphaned lines with <p> tags?
How do I remove only those <div> tags which contain <p> tags themselves? And how do I avoid leaving orphaned text in the document?
is a hard question, I had the same problem editing HTML from texts.
I found out this free pure HTML + JS editor: TinyMCE
http://www.tinymce.com/
which includes cleaning text options, you can choose the tags you want to clean from the text.
Is very powerful if you have the chance to change the editor you are using.
<div id="bulletinContents">
<div class="headingArea">
<div id="heading">
Critical Notice Description: <br>
Notice Effective Date: <br>
</div>
<div id="headingData">Critical notice<br>
10/16/2013<br>
</div>
</div>
<br>
<div id="bulletin">
<br>
<div id="Div1">Notice Text:</div>
<br>
To notify
<br>
<br>
</div>
</div>
there are also other <div> tags on the page, but I want to extract this particular section.
Can anyone please suggest me a proper regular expression for this.
I have used this regex:
<div[^>]*>(?<Value>[^<]*(?:(?!</div)<[^<]*)*)[</div>]*
but it does not give me proper content. It returns only the <div> with id heading and Div1.
I need to complete this task only by using regular expression and nothing else. Please suggest me proper Regex to do it.
I have some trouble with razor sections.
#section tools {
<div class="btn-group"">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Update every <span id="update_time_label" class="label label-info">10 s.</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>1 s.</li>
<li>5 s.</li>
<li>10 s.</li>
<li>30 s.</li>
<li>60 s.</li>
<li>120 s.</li>
</ul>
</div>
<button class="btn" onclick="return SelfAction.loadNewItemsNow()">Update now</button>
} <-- Can't detect
As you see in the code, it does not detect the closing bracket. I'm now learning C# and MVC4 and can't find any solution. I don't want to use viewbag for this big HTML block. Maybe there is some specific closing tag for big HTML blocks? Something like #sectionStart and #sectionEnd?
Remove the second " at the end of <div class="btn-group""> and see if that helps. The Razor engine is VERY finicky, and something stupid like that could cause it to continue to look for a string, and since everything else matches up, the closing } would be inside a string.