View Full Version : ePub validation error - not liking div tags


Kratos
07-18-2012, 03:00 PM
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
07-18-2012, 03:25 PM
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
07-18-2012, 08:35 PM
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
07-18-2012, 08:41 PM
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
07-18-2012, 08:56 PM
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
07-18-2012, 09:02 PM
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
07-19-2012, 05:49 AM
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 (http://www.webmasterworld.com/html/3089962.htm) (msg 3090864) that XHTML does not allow block-level content inside <p> tags either.

Diving into XHTML 1.1, I reached this (http://www.w3.org/MarkUp/SCHEMA/xhtml-blkstruct-1.xsd). 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 (http://www.w3.org/TR/xhtml11/xhtml11_schema.html) as block or inline elements).

Kratos
07-19-2012, 05:58 AM
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
07-19-2012, 06:05 AM
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
07-19-2012, 06:18 AM
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
07-19-2012, 06:20 AM
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
07-19-2012, 08:34 AM
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.

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 (http://www.webmasterworld.com/html/3089962.htm) (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
07-19-2012, 08:57 AM
Indeed. At least the W3C validator should react to it...

Jellby
07-19-2012, 09:31 AM
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
07-19-2012, 09:49 AM
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). :o

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 (http://www.mobileread.com/forums/showpost.php?p=2155850&postcount=8))

Toxaris
07-19-2012, 10:10 AM
Glad that it does work and reports an error. It reminds me of a thread some weeks ago about a stylesheet which didn't give an error upon validation and everyone agreed that it was the stylesheet. I ran it through the validation and got the error alright.

Probably some autocorrection going on.

DiapDealer
07-19-2012, 10:31 AM
Probably some autocorrection going on.
Yep. It was definitely the built-in, well-formed code check of Sigil's. It's usually quite vocal about most issues when it's turned on; so its silent corrections threw me for a bit of a loop. :o

Anyway... glad it's sorted. I assumed from the beginning (as did everyone else, of course) it was invalid xhtml, but couldn't understand why it kept passing numerous validation engines in spite of my assumptions.

Kratos
07-20-2012, 09:04 AM
Thank you Jellby for your solution and everybody else. Playing around with the html, when not driving me crazy, I found to be almost fun!

Just one more quick question, related to divs not being allowed inside spans.

I have a couple of images that I want to act as hyperlinks when touched.
The default code I get in my epub is this

<p class="body"><span class="body" style="font-size:0.86em;"><br/></span><a href="http://www.mywebexample.com"><span class="body" style="font-size:0.86em;"><img class="image" width="7%" src="images/E4402%20FB_fmt.jpeg" alt="E4402%20FB.png"/></span></a></p>

But i need to use replace the image reference with this
<div class="group5">
<img src="images/E4404%20HT_fmt.jpeg" alt="website icon" />
</div>

However I've tried several different to blend the second code with the hyperlink and none work. Any ideas please?

Jellby
07-20-2012, 12:02 PM
<div class="group5">
<a href="http://www.mywebexample.com"><img src="images/E4404%20HT_fmt.jpeg" alt="website icon" /></a>
</div>

But I have never been able to make an image link work in an Adobe-based reader.

Kratos
07-23-2012, 12:14 PM
Thank you Jellby -that's great! :)