Help with a validation issue

My doctype is for XHTML 1.0 Strict and the only error I got when trying to validate the page was from this paragraph:

<p><div id="covers"><img src="images/ls-hardbound-cover.jpg" width="64" height="100" alt="hardbound cover" /><img src="images/ls-softbound-cover.jpg" width="65" height="100" alt="Softbound cover" /><br />Hardbound / Softbound</div>My paragraph text here...</p>

The styles I have applied for the covers div are:

#covers {float:right; margin:0 0 5px 5px; text-align:center; font-size:11px;}
#covers img {padding-left:5px;}

And the error I got from the validator is:

Line 135, Column 22: document type does not allow element “div” here; missing one of “object”, “ins”, “del”, “map”, “button” start-tag

<p><div id=“covers”><img src=“images/ls-hardbound-cover.jpg” width=“64” heigh…

The mentioned element is not allowed to appear in the context in which you’ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you’ve forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as “<p>” or “<table>”) inside an inline element (such as “<a>”, “<span>”, or “<font>”).

I wanted the 2 images to float to the right and the p text to wrap around them. How else would I achieve this and be able to validate this page? Anyone have any suggestions?

Ok now I see why my form didn’t validate. I didn’t have the fieldset there. I completely forgot about that for some reason. It makes more sense to me semantically to have fieldset there instead of the p tag.

Thanks for explaining that. I usually create my websites using the transitional doctype and you can get away with stuff like this. But I wanted to try validating for strict and I’m learning things I didn’t fully understand before.

Thanks!

No, that isn’t true. Some block-level elements can contain other block-level elements, so <div> and <li>, for example, can both contain <p> or indeed other block elements.

Also do you know about placing a <p> inside a form? Is it valid to just have a form with text and inputs in it like:

<form action=“action.cfm” method=“post”>
Your Name <input … /><br />
Email <input … /><br />
<input value=“Submit” … />
</form>

Or do you have to put a <div> or <p> tags around the text?

My understanding is that <form>, like <blockquote>, can only contain other block-level elements, and not free text - so you would need to put <p>, <div> or <fieldset> elements around the text and inputs.

In regards to my question about the form element it says at the W3C web site “A form can contain text and markup (paragraphs, lists, etc.) in addition to form controls.” But according to this it sounds optional. But when I tried to validate one of my pages with only the text inside the form and not <p> tags around the text it wouldn’t validate. So is it required then that you have text within a form within <p> tags or some sort of other containing element?

It’s the same issue.

http://www.w3.org/TR/html4/interact/forms.html#h-17.3

It says this:
<!ELEMENT FORM - - b+ -(FORM)[/b] – interactive form –>

the bolder area says what may go inside a form (as a direct child):
a block element, and/or a script tag, and what cannot go in there is another form (even though forms are blocks, you’re not allowed to nest).

Free-text elements are optional (though I wouldn’t use them for text alone… screen readers in Forms Mode will only pick up actual form controls… that means instructional text either needs to be inside a form control (or a label, or a legend) or outside the form entirely), but if they are not blocks, they cannot be direct children.

<form>
<p>ha ha</p>
</form>

Stupid example but it’s legal.

<form>
<fieldset>
<legend>Legends are inline elements</legend>
form stuff…
</fieldset>
</form>

This is how 99% of forms should be. The direct-child block is best as a fieldset, and in HTML4 fieldsets require a legend (they are not demanded by XHTML for some reason but it’s still good practice to have one).

For one-off forms like search forms, a div is common (or a p, but I don’t consider it a paragraph):
<form>
<div>
<input type=“text” …>
<input type=“sumbit” …>
</div>
</form>

Ok got it thanks.

In regards to my question about the form element it says at the W3C web site “A form can contain text and markup (paragraphs, lists, etc.) in addition to form controls.” But according to this it sounds optional. But when I tried to validate one of my pages with only the text inside the form and not <p> tags around the text it wouldn’t validate. So is it required then that you have text within a form within <p> tags or some sort of other containing element?

Awesome! It works just fine that way and now my page validates. Thanks!!

So one question…does that mean you shouldn’t place <p> inside a <div> either since they are both block level elements?

Also do you know about placing a <p> inside a form? Is it valid to just have a form with text and inputs in it like:

<form action=“action.cfm” method=“post”>
Your Name <input … /><br />
Email <input … /><br />
<input value=“Submit” … />
</form>

Or do you have to put a <div> or <p> tags around the text?

<p> is a block element that can only contain inline elements. <div> is a block element, so can’t go inside a <p>.

It looks like you should be able to move the <p> start tag to after the </div>. That way, you can still float the <div> in the same way, the paragraph will wrap round it, and it will all work as intended.

That’s not what he said, and not what he implied. Each tag has defined rules about what it can and cannot enclose. The P may only contain inline elements. DIV can contain block elements.

As to just what element may contain what, that is defined by the W3C committee and documented, I believe, at the W3C web site.