This really freaky thing has been happening. I have a code:
<p class="desc"><img class="portrait" src="../images/albums/pxal_prism.jpg" />
<ul class="song_list">
<li>Prism</li>
<li>Other Song</li>
<li>Some other song</li>
<li>you know...</li>
<li>getting ridiculous</li>
</ul>
</p>
And when I do inspect element it appears like this:
<p class="desc"><img class="portrait" src="../images/albums/pxal_prism.jpg" /></p>
<ul class="song_list">
<li>Prism</li>
<li>Other Song</li>
<li>Some other song</li>
<li>you know...</li>
<li>getting ridiculous</li>
</ul>
<p></p>
Because of this my ul is not at the right position (beside the pic). Please help.
<p> expects inline content, but you specified a <ul> tag which is a block element. It is not allowed there, so the browser closes the <p> element automatically before the start of <ul>.
Think about the semantics for a second: <p> is called a paragraph. A paragraph can not contain lists. Instead of a paragraph, you should use a <diV> which expects flow content, so the <ul> tag is allowed.
According to http://www.w3.org/TR/html401/struct/text.html#h-9.3.1, P element "cannot contain block-level elements (including P itself)."
<!ELEMENT P - O (%inline;)* -- paragraph -->
It means P element can only have the inline elements inside it.
As per your html, you are using:
<p> --block element
<img..../> -- inline element which is allowed
**<ul>...</ul>** -- block element which is not allowed
</p>
Instead of P you can use the div element.
Remove p tag, you can use div tag.
Use CSS property (float: left) to img tag and ul so they will come beside each other.
Related
I am trying to debug my footer but I keep getting bugs like
(Element h4 not allowed as child of element ul in this context)
Can anyone explain.
I cant place the HTML because for some reason it does not work.
Probably because there are some mistakes in the code.
Link to my website is
http://www.timberlife.nl
And then inspect element at the footer of the page.
<ul>
<h4 class="footerr">SUPPORT</h4>
<br>
CONTACT
<br>
FAQ
<br>
DISCLAIMER
<br>
</ul>
It starts with this.
<h6 class="text-white copy-text">
Many thanks!
Daan
According to HTML5 spec, you can't have header tags as children within a <ul></ul>, you should populate it with <li></li>, then insert your content within each list like so:
<ul>
<li><h4 class="footerr">SUPPORT</h4></li>
<li>CONTACT</li>
<li>FAQ</li>
<li>DISCLAIMER</li>
</ul>
I also noticed you have wrapped entire blocks of content within header tags, try to avoid that as it also leads to invalid html. Use divs rather.
Reference: w3.org ul element
The error is thrown because your list structure is invalid. All content must be wrapped in li tags.
<ul>
<li><h4 class="footerr">SUPPORT</h4></li>
<li>CONTACT</li>
<li>FAQ</li>
<li>DISCLAIMER</li>
</ul>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
Also, you should use a CSS file (or at least an embedded style tag) rather than inline styles:
<style>
ul li a {color: white;}
</style>
If you want to use any heading tag within ul then you should place it within li tag because any list inside ul or ol tags can be made only by li tag.
so please try this
<li><h4 class="footerr">SUPPORT</h4> </li>
This Should work
I do not understand why the WC3 validator is flagging this HTML as invalid, the error it reports back is...
''Element ul not allowed as child of element span in this context. (Suppressing further errors from this subtree.)''
I'm using HTML5, and this code is for breadcrumbs.
<span class="bread">
<ul>
<li>HOME</li>
<li>ABOUT</li>
</ul>
</span>
<span> by definition is an inline element (so you use it inside a paragraph, for example), while <ul> is a block element (which is its own little chunk of space, usually with space before/after it unlike <span>).
Other people have had the same issue, and end up using <div> tags instead. See Is it possible to put a list inside a span tag?
According to the html5 recommendations the <span> element can only contain phrasing-content. The <ul> element is not in the list of phrasing content tags. The html validation engine is enforcing those rules.
You can use a <div> as the container instead.
if you style the div as 'display:inline' it should nominally conform to the rule, whilst behaving exactly like a span :)
If you're using it as a breadcrumb, it's a navigational element, so <nav> makes the most sense as the container of your <ul>. Otherwise, give the UL a class of "breadcrumb" <ul class="breadcrumb"> and style it based on its class.
USE <div>
<div class="bread">
<ul>
<li>HOME</li>
<li>ABOUT</li>
</ul>
</div>
instead of <span>
<span class="bread">
<ul>
<li>HOME</li>
<li>ABOUT</li>
</ul>
</span>
So, I have the following HTML structure:
<div id="category-filter">
<div class="column full">
<ul class="float-clear" id="category-filter">
<li>All Categories</li>
<li>Educator Workshops</li>
<li>Exhibitions</li>
<li>Family Activities</li>
<li>Films</li>
<li>Lectures + Gallery Talks</li>
<li>Music</li>
<li>Other Activities</li>
<li>Tours</li>
<li>Workshops</li>
</ul>
</div>
</div>
Which, after styling produces the following in Firefox:
However, in Webkit, the link text wraps:
The LI tags are floated left and should grow with the size of anchor inside them and then wrap as needed inside the container which has a width set. Any ideas why the links are wrapping in Webkit?
Add white-space:nowrap; to the links to avoid break line.
And <ul> element must only contain <li>.
It's guesswork without seeing your CSS, but try this:
#category-filter a {
white-space: nowrap
}
That should stop the text from wrapping.
And as already mentioned, it's invalid to have a div as a direct child of a ul. You should change it to <li class="column full">. You might also have to adjust some of the selectors in your CSS.
How do I place block elements in the HTML paragraph tag? When I attempt to do that, Firebug's HTML tab shows that the paragraph does not enclose the block element. Furthermore, any CSS applied to the paragraph does not apply to the child block element.
This code:
<p>
<ol>
<li>foo</li>
<li>bar</li>
</ol>
</p>
p {
line-height: 2em;
}
Becomes rendered as:
<p></p>
<ol>
<li>foo</li>
<li>bar</li>
</ol>
From http://www.w3.org/TR/html401/struct/text.html:
The P element represents a paragraph.
It cannot contain block-level elements
(including P itself).
List tags are not supposed to be enclosed in a paragraph tag. What are you trying to do?
It sounds like you should be using a <div> instead of a <p>
Paragraphs are meant to hold inline elements not block elements. In fact, take a peek at this...
http://bytes.com/topic/html-css/answers/153770-acceptable-put-ul-inside-paragraph.
Having a brain freeze...
I want to do this :
<li>
<a>
<p>text</p>
<p class="x">text</p>
</a>
</li>
I know I can't. So how do I ? (No JS/jQuery etc)
Change <p> to some inline element (e.g. <span>) and give li a span a style of display: block;, I guess.
<li>
<a>
<span>text</span>
<span class="x">text</span>
</a>
</li>
You could do that in HTML(5). But support in some browsers (Firefox) is flakey. See: http://html5doctor.com/block-level-links-in-html-5/
The best way is to use naturally inline elements such as <span>s instead of block level elements inside the anchor.
This validates as XHTML 1.1:
<li>
<p>text</p>
<p class="x">text</p>
</li>
I'm assuming what you're getting at is you want the entire block of text in the list item, and maybe the entire list item, to be clickable?
First, a paragraph tag is a block level item, but an anchor tag is inherently an inline element. You can't place that inside an anchor tag, it's not semantically correct and it won't validate. Do something like this instead:
<ul class="myList">
<li>
<a href="#">
<strong>This is the title</strong>
<span>This is the link text</span>
</a>
</li>
</ul>
Assuming you want the entire area of the list item to be clickable, you can apply display:block; to the anchor tag using css. Note that if you've assigned a different height to the list item and want everything to be clickable, you'll need to set the height on the tag as well.
.myList a { display:block; }
And if you want the strong tag to break a line (your "main text" in the link)...
.myList a strong { display:block;}
Hope that helps!