FlightCrew Validation Question

[mtrahan]

Hi MobileRead forum,

I'm trying to validate an ePub file I've been working on and I have two problems when checking with FlightCrew. First, with images, FlightCrew tells me that "attribute 'align' is not declared for element 'img'" on line 12 of a certain file. But here is the line in question: <img align="absbottom" alt="Jigai01.tif" src="../Images/Jigai01.jpg" /> The attribute 'align' is declared, so what is the problem?

Second thing, very similar, in a table. FlightCrew tells me repeatedly that "attribute 'width' is not declared for element 'td'". But again, 'width' attribute is declared in the file, like this:

    <table border="0" cellpadding="1" cellspacing="0" width="100%">
      <tr>
        <td align="right" valign="top" width="5%"><span class="sgc-3">1</span></td>

        <td width="3%">&nbsp;</td>

        <td align="left" width="92%"><span class="sgc-3">text text text</span></td>
      </tr>
    </table>

What is wrong with this? I'm really late with this so any quick help will be much appreciated.

Thanks in advance,

Michael

[Jim Lester]

align is not a valid attribute for the img element in XHTML 1.1. Which is what FlightCrew meant by it not being defined (it's not in the list of valid things).

Similarly width is not a valid attribute for td in XHTML 1.1

You can see what you can and cant do with various elements either by reading the spec (It's what I do - but I'm beyond warped - http://www.w3.org/TR/xhtml-modulariz...dule_defs.html )

Or you can look at a site such w3schools and remember that XHTML 1.1 is 'Strict'
http://www.w3schools.com/tags/tag_img.asp (for the img tag)
http://www.w3schools.com/tags/tag_td.asp (for the td tag)

(Look at the DTD it'll says either STF or TF - if it doesn't have the S there, then you can't use it).

[mtrahan]

Oh, I see. Thanks. Well, I was exactly afraid of this. Surely there must be some way to adjust the width of columns in a table in ePub? On the w3schools page for td, they say "width" is deprecated, and to use styles instead. I must admit I'm a bit lost here. How do I set this with styles? If I just set the td width in my CSS instead of right in the file, it will be the same problem, no?

Will have to test in the morning. But sleep first. Thanks again for the help!

[Jellby]

Originally Posted by mtrahan

If I just set the td width in my CSS instead of right in the file, it will be the same problem, no?

No, HTML attributes and CSS properties are different, even if they have the same name and intent.

<td width="3%"> is using the "width" HTML attribute, and it is wrong.

<td style="width: 3%"> is using the "width" CSS property, and it is fine.

Whether the latter will do what you want depends on the spec and implementation particulars. Also, you can move it from the "style" attribute to your CSS stylesheet.

[mtrahan]

OK, thanks for the explanation. So that's one problem fixed. About the align attribute of the img tag, though, it doesn't seem possible to use the same strategy. When I use, say, this:

<h1 class="titre-nouvelle" id="toc-anchor"><span><img style="align: absbottom;" alt="Jigai01.tif" src="../Images/Jigai01.jpg" /><img style="align: absbottom;" alt="Jigai02.tif" src="../Images/Jigai02.jpg" />&nbsp;&nbsp;&nbsp;(Jigai)</span></h1>

Instead of 'align="absbottom"' directly, it doesn't do anything. I want the text "(Jigai)" to be aligned around the middle of the images. How could I do this?

For example here is a screenshot of what it looked like with align="absbottom"...

It wasn't perfect but still much better.

Here is what it looks like without the align attribute:

So, last question, how can I align the image and text without using the align attribute? There must be a way.

Thanks again for all the help. Much appreciated.

[Jellby]

Originally Posted by mtrahan

About the align attribute of the img tag, though, it doesn't seem possible to use the same strategy.

Only because the appropriate CSS property is not simply "align". Try with "vertical-align".

[mtrahan]

Originally Posted by Jellby

Only because the appropriate CSS property is not simply "align". Try with "vertical-align".

Thanks Jellby! It did the trick indeed. Well, that's bunch of new stuff learned. Should go better next time.