I am trying to use the ul and ol tags to create two seperate lists on a page, but everytime I try to validate the page I get "document type does not allow element "ul" here. I have tried moving the tags around and ive checked every tag that I have opened to ensure they are all closed. I also tried moving just that section of code to a new page and it throws the same error in the validation. I'm out of ideas, any help you can offer is greatly appreciated. It displays correctly, but I need it to pass validation.
<ol>
<li>USA</li>
<li>Canada</li>
<li>Sweden</li>
</ol>
</h2>
<hr/>
<h3>List Example (Order NOT important)</h3>
<h2> Things to Pick Up</h2>
<h3>
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Bread</li>
<li>Cheese</li>
</ul>
You can't have a list inside a heading. You are trying to put one inside a sub-sub-heading (<h3>). (You probably have one inside a sub-heading (<h2>) too, but the start tag is missing from that.
Put the lists after the headings.
See the spec under "Contexts in which this element can be used" for other places that you are allowed to place lists.
I did some tests with your code and tryed to validate with W3C validator.
Here are my observations about your piece of code with the proper corrections applied.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Ryan's solution</title>
</head>
<body>
<ol>
<li>USA</li>
<li>Canada</li>
<li>Sweden</li>
</ol>
<h2> <!--This oppening tag was added by me--> Hello World!</h2> <!--Why are you closing what was not oppened?-->
<hr/>
<h3>List Example (Order NOT important)</h3>
<h2> Things to Pick Up</h2>
<h3> <!--Where is the closing for this tag?--> Hello World!</h3><!--The closing tag was added by me-->
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Bread</li>
<li>Cheese</li>
</ul>
</body>
</html>
This corretions have been aproved by W3c validator.The explanation for the errors I found are in the comments.
I'm sorry if this answer is not fully clear and elegant. This is my first answer here, and i'm learning how to help people :)
Good luck with your coding !
Related
I'm trying to map a XML to import to Wordpress using the WP All Import plugin, but I got stuck after tried several ways to get the "scr" of this image:
<content type="html">
<div align="center" class="post-cover">
<img src="IMG.jpg"/>
<ul>
<li></li>
<li></li>
</ul>
</div>
</content>
I Tried {content[1]/div[1]/img/#src} and {content[1]/div/img/#src}, but no success.
The only path that indeed worked somehow was {content[#type = "html"]} and {content[1]} that showed all the html inside <content>.
If necessary, I can mass edit some things with notepad, like removing type="html", to force it recognize inner divs as childs, but it is also something that I already tried. Unfortunately the content is treated like a simple text.
Are you sure that the stuff that looks like HTML inside <content> isn't actually just text? The tree view image you linked to suggests that it is just text: E.g. the < in <div is actually an escaped, literal <, not the beginning of a <div tag.
If you view the XML/HTML in a plain text editor, you will probably see <content> <div align=...
In that case, <content> has no element children, just plain text. You can't select nodes like img/#src from it using XPath because it doesn't have any such nodes. You would have to find a way to parse it into XML or HTML, if you want to apply XPath to it.
The following do work using R and XML library. Just used '//img/#src'
library(XML)
html = '<content type="html">
<div align="center" class="post-cover">
<img src="IMG.jpg"/>
<ul>
<li></li>
<li></li>
</ul>
</div>
</content>'
doc = htmlParse(html, asText=TRUE)
src = xpathSApply(doc, '//img/#src')
The output:
src
"IMG.jpg"
This is a peculiar thing. The last button is always mis-aligned vertically.
http://jsfiddle.net/5u38gf00/
<div data-role="navbar">
<ul>
<li>one
</li>
<li>two
</li>
<li>three
</li>
</ul>
</div>
The code is straight forward from the jqm website. I've checked the css properties and it looks fine.
I am using notepad++, and picked up that the spaces were actual spaces within the document - that I used to indent the tags. I changed over to tabs and that sorted the misalignment of the last button.
Can you just try this http://jsfiddle.net/5u38gf00/1/
I just change the onLoad event to onDomReady event, then it seems work fine
[EDIT]
This will be the simple test code to display desired output in .html page. (Tested local)
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Page Two</li>
<li>Search</li>
</ul>
</div>
</body>
</html>
OutPut:-
I had exactly the same problem (some extra "invisibles" caracters). I have done a copy/paste from the official jquery mobile demo sample, so i think it's a "bug"in this doc ...
I've just removed the white space before the UL and LI tags, and now it works fine
Hi I am trying to vailidate a page. i am getting the error:
Line 1, Column 7058: Stray end tag head.
…er:'2045-wpf-id',});});</script></head><body class="custom-background customiz…
My webpage source looks like this:
<?php wp_head(); ?>
</head>
Obviously i need this tag but do i need to remove the tag?
thankyou for any help
http://validator.w3.org/check?uri=http%3A%2F%2Flifeworksphotography.com.au%2Flifeworks%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&group=0&No200=1&verbose=1&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices
As i checked this page, Your <head> tag is not opening.
You have to first open the <head> tag and then close it before starting the <body> tag.
There are two errors in your code. First, there's this part in your head section:
<div id="2045-wpf">
<a title="Lifeworks Photography Videos" href="http://lifeworksphotography.com.au/lifeworks/video/">
<img class=" wp-image-730 alignleft" alt="lifeworks photography video" src="http://lifeworksphotography.com.au/lifeworks/wp-content/uploads/2014/03/video22.png" width="20" height="62"/>
</a>
</div>
It isn't allowed to be there and might be the reason why your head breaks and your code won't validate. You should find out which plugin or part of your template is responsible for it and if possible put it where it belongs (I don't know what function it has).
Secondly, there are "Read more" links with this markup:
Read more
It's supposed to be "font-weight: normal;". I guess it won't break your template, but it should get fixed too.
Hope this helps :)
Guys, I'm trying to write xpath or css to find/click on list element "All" based on known span(in this case SNG NAME below). On page, there are different lists Which can contain same list item called as "All". So we have to identify "All" based on span(in this case SNG NAME below)
can someone shed some light on my issue
<html>
<head>
<body>
<div class="grc_selected">
<div class ="lbl_selected">
<span> SNG NAME </span>
</div>
<div id="id1" class="cl1">
<ul id="id_ul">
<li class="tclass" title="[1] All">
<img class="treeIcon" src="1/2/3.gif"/>
<span class="inA">All</span>
</li>
</ul>
</div>
</body>
</head>
</html>
You could use an XPath query like:
//div[span=" SNG NAME "]/following-sibling::div//span[.="All"]
That targets the div which contains the span whose text value is SNG NAME, then moves to the following div (id1) and finally targets the span inside it containing the text All. This makes the assumption that the HTML is fixed (there's currently mismatching div tags) in such a way that the above query structure makes sense (by placing the missing closing div tag between the </ul> and final </div>).
I'm following this tutorial here http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery on adding a menu with jquery.
I've created my menu, but I'm having trouble adding it to wordpress. I opened up the header.php file since I want it to appear below the banner, and I paste it in it's own div, but it always "pushes" everything below it to the right.
How do I stop it from doing this?
Here's the code:
<ul id="nav">
<li>1 HTML</li>
<li>2 CSS</li>
<li>3 Javascript
<ul>
<li>3.1 jQuery
<ul>
<li>3.1.1 Download</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
<li>3.2 Mootools</li>
<li>3.3 Prototype</li>
</ul>
</li>
Hard to say without looking at the whole, but based on knowing very little of your problem, the only thing I can recommend you to try is this CSS property:
ul#nav {
position: absolute;
}
This way, it will not push other elements away. It might have other consequences tough, depending on other elements you might have.
Looks like you're missing a closing </ul>? You can also use The W3C Markup Validation Service to tack down errant tags.