attribute "valign" is not declared for element 'table'

[boksida]

it's a table with a pricelist. When I open the book on my Odyssey or tablet..... ay caramba! This is from a book, I don't have a pub!


In Sigil it's a nice overview with prices per brand for a quarter, half or full bottle. Flightcrew says: attribute "valign" is not declared for element 'table'


it looks like this

WHISKEY FIRST CLASS



Quarter

Half

Full Bottle
BLACK DOG

—

—

1330
TEACHER’S

—

530

1230
VAT 69

—

—

1210

Code view

<table class="calibre2" valign="top">
<tr class="calibre3" valign="top">
<td class="calibre4" valign="top"><br class="calibre6" /></td>

<td class="calibre4" valign="top">&nbsp;&nbsp;</td>

<td class="calibre4" valign="top">
<p class="calibre10">Quarter</p>
</td>

<td class="calibre4" valign="top">&nbsp;&nbsp;</td>

<td class="calibre4" valign="top">
<p class="calibre10">Half</p>
</td>

<td class="calibre4" valign="top">&nbsp;&nbsp;</td>

<td class="calibre4" valign="top">
<p class="calibre10">Full Bottle</p>
</td>
</tr>

<tr class="calibre3" valign="top">
<td class="calibre4" valign="top">
<p class="calibre10"><span class="calibre13">BLACK DOG</span></p>
</td>

<td class="calibre4" valign="top">&nbsp;&nbsp;</td>

<td class="calibre4" valign="top">
<p class="calibre10">—</p>
</td>

<td class="calibre4" valign="top">&nbsp;&nbsp;</td>

<td class="calibre4" valign="top">
<p class="calibre10">—</p>
</td>

<td class="calibre4" valign="top">&nbsp;&nbsp;</td>

<td class="calibre4" valign="top">
<p class="calibre10">1330</p>
</td>
</tr>

<tr class="calibre3" valign="top">
<td class="calibre4" valign="top">
<p class="calibre10"><span class="calibre13">TEACHER’S</span></p>
</td>

<td class="calibre4" valign="top">&nbsp;&nbsp;</td>

<td class="calibre4" valign="top">
<p class="calibre10">—</p>
</td>

<td class="calibre4" valign="top">&nbsp;&nbsp;</td>

<td class="calibre4" valign="top">
<p class="calibre10">530</p>
</td>

<td class="calibre4" valign="top">&nbsp;&nbsp;</td>

<td class="calibre4" valign="top">
<p class="calibre10">1230</p>
</td>
</tr>

<tr class="calibre3" valign="top">
<td class="calibre4" valign="top">
<p class="calibre10"><span class="calibre13">VAT</span> 69</p>
</td>

<td class="calibre4" valign="top">&nbsp;&nbsp;</td>

<td class="calibre4" valign="top">
<p class="calibre10">—</p>
</td>

<td class="calibre4" valign="top">&nbsp;&nbsp;</td>

<td class="calibre4" valign="top">
<p class="calibre10">—</p>
</td>

<td class="calibre4" valign="top">&nbsp;&nbsp;</td>

<td class="calibre4" valign="top">
<p class="calibre10">1210</p>
</td>
</tr>
</table>

[theducks]

Yup!

style="vertical-align:top"

or IMHO better yet, move that to the stylesheet

[boksida]

Thanks for the help!

OK, so I tried this, but without result:

calibre3 {
display: table-row;
vertical-align: top
}
.calibre4 {
display: table-cell;
padding-bottom: 1px;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: inherit;
vertical-align: top
}
.calibre10 {
border-bottom: 0;
border-top: 0;
display: block;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-top: 0;
text-align: justify;
text-indent: 1.5em
}

I came from this:

.calibre3 {
display: table-row;
vertical-align: middle
}
.calibre4 {
display: table-cell;
padding-bottom: 1px;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: inherit;
vertical-align: inherit
}
.calibre10 {
border-bottom: 0;
border-top: 0;
display: block;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-top: 0;
text-align: justify;
text-indent: 1.5em
}

[DiapDealer]

The "attribute 'X' is not declared for element 'Y'" error always means that attribute X is not allowed. I've always thought the wording was a bit ambiguous for casual users. Replacing X with the equivalent CSS attribute (whether inline or with an external/internal stylesheet) is nearly always the way to eliminate that particular error.

EDIT: Fixed my silly typo that made my post say the exact opposite of what I intended.

[exaltedwombat]

Something like this in your stylesheet allows you to simplify - no need for a class on each table.

table td {
vertical-align: top;
padding-left: 4pt;
padding-right: 4pt;
padding-top: 2pt;
padding-bottom: 2pt;
}

The only reader foible I have come across is if you convert to Kindle. Most of the previews are OK, but "Kindle for iPad" preview seems to ignore the centering when applied in the stylesheet. It honours it when inserted explicitly in each <td> tag. (Any comments? I haven't investigated this rigorously.)

[boksida]

I added this to my stylesheet but I still get the same errors with the flightcrew check. I had a good W3C result, so no problems there.

it looks like this now:

@namespace h "http://www.w3.org/1999/xhtml";
.bold {
    font-weight: bold;
    line-height: 1.2
    }
.bold1 {
    font-weight: bold
    }
.calibre {
    display: block;
    font-size: 1em;
    margin-bottom: 0;
    margin-left: 5pt;
    margin-right: 5pt;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0
    }
.calibre1 {
    border-bottom: 0;
    border-top: 0;
    display: block;
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
    text-indent: 1.5em
    }
.calibre10 {
    border-bottom: 0;
    border-top: 0;
    display: block;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
    text-align: justify;
    text-indent: 1.5em
    }
.calibre11 {
    border-bottom: 0;
    border-top: 0;
    display: block;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
    text-align: left;
    text-indent: 1.5em
    }
.calibre12 {
    height: 18px;
    vertical-align: baseline;
    width: 23px
    }
.calibre13 {
    font-size: 0.75em
    }
.calibre14 {
    color: blue;
    cursor: pointer;
    text-decoration: underline
    }
.calibre15 {
    color: blue
    }
.calibre16 {
    text-decoration: underline
    }
.calibre17 {
    border-bottom: 0;
    border-top: 0;
    display: block;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
    text-align: right;
    text-indent: 1.5em
    }
.calibre18 {
    font-size: 1.5em;
    line-height: 1.2
    }
.calibre19 {
    border-bottom: 0;
    border-top: 0;
    display: block;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
    text-align: center;
    text-indent: 1.5em
    }
.calibre2 {
    border-collapse: separate;
    border-spacing: 2px;
    display: table;
    margin-bottom: 0;
    margin-top: 0;
    text-indent: 0
    }
.calibre20 {
    color: blue;
    line-height: 1.2
    }
.calibre21 {
    color: inherit;
    cursor: inherit;
    text-decoration: inherit
    }
.calibre22 {
    font-size: 1.375em;
    line-height: 1.2
    }
.calibre23 {
    display: block;
    margin-bottom: 0;
    margin-left: 2em;
    margin-right: 0;
    margin-top: 8pt;
    text-align: justify;
    text-indent: 0
    }
.calibre24 {
    display: block;
    margin-bottom: 0;
    margin-left: 2em;
    margin-right: 0;
    margin-top: 0;
    text-align: justify;
    text-indent: 0
    }
.calibre25 {
    display: block;
    margin-bottom: 0;
    margin-left: 2em;
    margin-right: 0;
    margin-top: 0;
    text-align: justify
    }
.calibre26 {
    display: block;
    margin-bottom: 0;
    margin-left: 2em;
    margin-right: 0;
    margin-top: 0;
    text-align: justify;
    text-indent: 1em
    }
.calibre27 {
    display: block;
    margin-bottom: 0;
    margin-left: 2em;
    margin-right: 0;
    margin-top: 0;
    text-align: left;
    text-indent: 1em
    }
.calibre28 {
    display: block;
    margin-bottom: 0;
    margin-left: 2em;
    margin-right: 0;
    margin-top: 0;
    text-align: justify;
    text-indent: 2em
    }
.calibre29 {
    border-bottom: 0;
    border-top: 0;
    display: block;
    margin-bottom: 0;
    margin-left: 19pt;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
    text-align: justify;
    text-indent: 1.5em
    }
.calibre3 {
    display: table-row;
    vertical-align: middle
    }
.calibre4 {
    display: table-cell;
    padding-bottom: 1px;
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 1px;
    text-align: inherit;
    vertical-align: inherit
    }
.calibre5 {
    font-size: 1.25em;
    line-height: 1.2
    }
.calibre6 {
    display: block
    }
.calibre7 {
    color: white
    }
.calibre8 {
    border: 1px inset;
    color: gray;
    display: block;
    height: 2px;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5em;
    text-indent: 38%
    }
.calibre9 {
    border: 1px inset;
    color: gray;
    display: block;
    height: 2px;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5em;
    text-indent: 34%
    }
.italic {
    font-style: italic;
    line-height: 1.2
    }
.italic1 {
    font-style: italic
    }
.mbppagebreak {
    border-bottom: 0;
    border-top: 0;
    display: block;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
    text-indent: 1.5em
    }
table td {
vertical-align: top;
padding-left: 4pt;
padding-right: 4pt;
padding-top: 2pt;
padding-bottom: 2pt;
}

[DiapDealer]

Originally Posted by boksida

I added this to my stylesheet but I still get the same errors with the flightcrew check.

Simply adding something to your stylesheet won't be enough to make that error go away.

You're supposed to be replacing the "valign='yada'" attribute in the html with "vertical-align: yada;" property in your CSS.

That means that once you've added the "vertical-align: yada;" to the proper class(es) in your css, you must remove the offending valign='yada'" from your html ... ALL of them. They can't be there anymore if you don't want to keep getting the error.

[Toxaris]

Might I suggest keeping Calibre out of your process? It gives you all kinds of Calibre classes that are meaningless. It is far better to clean up your stylesheet and giving your classes clear names that indicate the purpose. That makes it much easier to maintain.
Calibre is a nice program, but don't use it for coversions to ePUB if you can avoid it.

[exaltedwombat]

Does the table now contain any code other than <table> <tr> and <td>?

[JSWolf]

Originally Posted by Toxaris

Might I suggest keeping Calibre out of your process? It gives you all kinds of Calibre classes that are meaningless. It is far better to clean up your stylesheet and giving your classes clear names that indicate the purpose. That makes it much easier to maintain.
Calibre is a nice program, but don't use it for coversions to ePUB if you can avoid it.

I do use Calibre for conversions. But I then take the ePub into Sigil to rename the split files and I do end up removing the Calibre named styles with my own. It's not difficult to do.

[Turtle91]

Originally Posted by DiapDealer

Simply adding something to your stylesheet won't be enough to make that error go away.

You're supposed to be replacing the "valign='yada'" attribute in the html with "vertical-align: yada;" property in your CSS.

That means that once you've added the "vertical-align: yada;" to the proper class(es) in your css, you must remove the offending valign='yada'" from your html ... ALL of them. They can't be there anymore if you don't want to keep getting the error.

Your table should look something like this:

<table>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><p>Quarter</p></td>
<td>&nbsp;</td>
<td><p>Half</p></td>
<td>&nbsp;</td>
<td><p>Full Bottle</p></td>
</tr>
<tr>
<td><p>BLACK DOG</p></td>
<td>&nbsp;</td>
<td><p>—</p></td>
<td>&nbsp;</td>
<td><p>—</p></td>
<td>&nbsp;</td>
<td><p>1330</p></td>
</tr>
.
.
.
</table>

...although I'm not sure if the <p> tags are strictly necessary within the <td>...it works without them, but I'm not sure if it is "correct" to include them.


and your CSS like this:

table td {
vertical-align: top;
padding-left: 4pt;
padding-right: 4pt;
padding-top: 2pt;
padding-bottom: 2pt;
}

You will be able to find more detail at the links I provided you in your other post here.

Cheers,

[Turtle91]

I only use Calibre to convert it from a form I can't readily read/access to ePub. Then I have to go in and remove/change all the class="calibre_funkymomma" codes that make no intuitive sense. I then use Calibre as a file server so I have access to my library from anywhere in the world!

[boksida]

thanks for the help everyone, sorry for the late reply but I had to work this weekend.

I have no more errors in the Flightcrew check or with the W3C CSS Validator. The IDPF validator also gives "no problems found". When I open the file in ADE, the table looks the way it should.
BUT... when I open the book with FBreader or Moonreader on my android device, it still shows :

WHISKEY FIRST CLASS



Quarter

Half

Full Bottle
BLACK DOG

—

—

1330
TEACHER’S

—

530

1230
VAT 69

—

—
....


FBreader and Moonreader are IMO good apps so I really have no idea what could be the cause of this.

Why do I feel the urge to do:

Black dog

Quarter Bottle : /
Half Bottle : /
Bottle : 1330

...

[theducks]

Not all reader software behaves properly (the spec is very loose in what MUST be supported in EPUB)

Even ADE misbehaves (see list in the EPUB sticky section) with some things that other do well.
I suggest you head to the fbreader/Moonreader support groups for more ideas

[HarryT]

Originally Posted by Turtle91

...although I'm not sure if the <p> tags are strictly necessary within the <td>...it works without them, but I'm not sure if it is "correct" to include them.

It's not normal to use <p> tags in table cells - unless you actually want multiple paragraphs in the cell, of course.