ePub validation error - not liking div tags

[Kratos]

Hi all, I hope you can help.

I've used Indesign CS5.5 to create an epub with pictures inside.
I unzipped the epub for basic editing. I don't know html but there are a couple of things I've picked up from the internet to improve the look of my book (and fix incorrect fonts).

I added some div.groups for images in the CSS file which has image sizing instructions.
And in many of the html files I have taken out the image code and replaced it with this

<div class="group1">
<img src="exampleimage" alt="example" />
</div>

The book looks and works great. I validated it with Sigil and it came out okay. I tried uploading it to the Apple iBookstore and it was rejected.

I tested it with EPub validator and it has over 300 errors of the same type.

It list the html file and then element "div" from namespace "http://www.w3.org/1999/xhtml" not allowed in this context

The strange thing is I have created two other books in this way and they were fine and have been published. If it was one or two errors I would suspect I had messed up the html code, but because it is around 300 errors I suspect something different.

A common element of the line just before the div lines listed above is this.

<p class="body"><span class="body" style="font-size:0.86em;"><br/>

ta.

[DiapDealer]

Originally Posted by Kratos

A common element of the line just before the div lines listed above is this.

<p class="body"><span class="body" style="font-size:0.86em;"><br/>

I'm hoping there's at least a </span> tag before you start your <div> in question. I haven't checked for definitive proof, but I don't think divs can be inside of inline elements (span) ... not and remain valid xhtml, anyway.

EDIT: I may be wrong about that. I'm not entirely sure.

[JSWolf]

You cannot put a <div> inside a <p>. That's not valid code. And also, the code you have is just really poor code.

<p class="group1"><img src="exampleimage" alt="example" /></p>

That is valid code and you can just put all the styling you want in group1.

[DiapDealer]

Originally Posted by JSWolf

You cannot put a <div> inside a <p>. That's not valid code

If we're talking about html, I'd whole-heartedly agree. But I'm just not certain that's gospel when it comes to xhtml (even though I had the same initial response as you did). I don't see any real good reason to do it, but I'm not so sure it's technically against xhtml rules. The W3C xhtml validator didn't barf on a <div> inside a <span> inside a <p> when I tried it. Does ePub specifically prohibit it? *shrugs*

[JSWolf]

Originally Posted by DiapDealer

If we're talking about html, I'd whole-heartedly agree. But I'm just not certain that's gospel when it comes to xhtml (even though I had the same initial response as you did). I don't see any real good reason to do it, but I'm not so sure it's technically against xhtml rules. The W3C xhtml validator didn't barf on a <div> inside a <span> inside a <p> when I tried it. Does ePub specifically prohibit it? *shrugs*

A <div> is paragraph level. So it cannot be inside another paragraph level such as <p>. A <span> can be inside a <div>. But a <div> cannot be used like it's a <span>.

[DiapDealer]

Originally Posted by JSWolf

A <div> is paragraph level. So it cannot be inside another paragraph level such as <p>. A <span> can be inside a <div>. But a <div> cannot be used like it's a <span>.

I'm not asking for how you assume it should be... I assumed the very same thing as you at first. I'm asking if someone can point to the area in the xhtml specs that expressly prohibits it. I can't find it; and as I already mentioned... the W3C validator (XHTML 1.1) doesn't flag it as an error.

[Jellby]

I've always found it difficult to get things clear with XHTML, the specs are not written for humans and all together...

However, it says here (msg 3090864) that XHTML does not allow block-level content inside <p> tags either.

Diving into XHTML 1.1, I reached this. Note it says:

<xs:group name="xhtml.p.content">
  <xs:sequence>
    <xs:group ref="xhtml.Inline.mix" minOccurs="0" maxOccurs="unbounded"/>
  </xs:sequence>
</xs:group>

which I take to mean that a <p> element can contain any number of inline elements (while a <div> can contain "flow", which is described here as block or inline elements).

[Kratos]

Thanks for your input so far.
I've been trying to compare with the code of another book.

This is the code of an old book that validates:

<span class="body" style="font-size:0.86em;"> my text</span></p>
<p class="body"><span class="body" style="font-size:0.86em;"></span></p>
<div class="group1">
<img src="images/S57_fmt.jpeg" alt="alt text" />
</div>
<p class="body"><span class="body" style="font-size:0.86em;">my text</span>

This is the code of my current book that has a problem:

<span class="body" style="font-size:0.86em;"> my text</span></p>
<p class="body"><span class="body" style="font-size:0.86em;"><br/>
<div class="group1">
<img src="images/E7-10_fmt.jpeg" alt="alt text" />
</div>
<br/>my text</span></p>

I have to try and make the code in the second example validate.
What Im thinking is that I have to put a </span> at the end of the first line. And then put the character style line at the front of the last line to make it valid?

[Jellby]

You have to put the <div> outside the <p>, so you have to close the <p> and the <span> before the <div>, and open them again after the </div> (and get rid of the <br/>'s):

<span class="body" style="font-size:0.86em;"> my text</span></p>
<p class="body"><span class="body" style="font-size:0.86em;"></span></p>
<div class="group1">
<img src="images/E7-10_fmt.jpeg" alt="alt text" />
</div>
<p class="body"><span class="body" style="font-size:0.86em;">my text</span></p>

This doesn't make the code any prettier or more logical, but it will validate.

[Kratos]

Thank you Jellby! Im going to try that on a few pages now.
But if I need to put in the page break </p> just before or after the image (to make the page look prettier) where is okay to put it?

[Toxaris]

You could try to use more CSS classes to make it better readable. I would put the font-size in the stylesheet for sure.

Are you saying that your second example with the <div> inside the <p> tags validates in Sigil? That would surprise me actually.

[DiapDealer]

Originally Posted by Toxaris

Are you saying that your second example with the <div> inside the <p> tags validates in Sigil? That would surprise me actually.

Sigil's FlightCrew doesn't complain at all if I put a div inside a p (or a span).
Neither does W3C's validator. I was rather shocked that neither flagged it as problematic, truth be told.

Originally Posted by Jellby

I've always found it difficult to get things clear with XHTML, the specs are not written for humans and all together...

However, it says here (msg 3090864) that XHTML does not allow block-level content inside <p> tags either.

Thanks for the links and the interpretations. It is rather difficult to interpret at times.

[Toxaris]

Indeed. At least the W3C validator should react to it...

[Jellby]

It must be something else, maybe the headers. I get a validation error in W3C with this file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ops="http://www.idpf.org/2007/ops" xml:lang="en">
<head>
  <title>Title</title>
</head>
<body>
<p>Test
<div>inner div</div>
</p>
</body>
</html>

The error is clear:

Line 9, Column 5: document type does not allow element "div" here; missing one of "button", "map", "object", "ins", "del", "noscript" start-tag

<div>inner div</div>

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>").

[DiapDealer]

Originally Posted by Jellby

It must be something else, maybe the headers. I get a validation error in W3C with this file:
The error is clear:

Sorry, you're quite correct. Sigil was apparently "fixing" my xhtml before I extracted and checked it with W3C's validator (even though Sigil never indicated anything was wrong while saving, editing or validating the incorrect code).

So given that ... it's quite clear why Kratos' first example might validate (assuming the snippet had proper opening/closing 'p' tags that didn't get copied) and the second does not, no? (The examples from Post #8)