I'm getting some output from epubcheck that doesn't seem to make sense. I don't understand what the error messages mean and was hoping someone else could help.
The output from epubcheck is:
Epubcheck Version 3.0b4
Validating against EPUB version 2.0
ERROR: /path/to/my/book.epub/sub_html_file.html(134,117): text not allowed here; expected element "td" or "th"
then there are hundreds of other messages. Line 134 of the offending file looks like
<hr class="calibre29"/>
<table border="0" cellpadding="0" cellspacing="0" class="calibre53">
<tr class="calibre56"> 1
<td class="calibre55" valign="top">
<p class="calibre30"><span class="calibre21"><strong class="calibre8">Person(s)</strong></span></p>
</td>
What confuses me is that position 117 of that line starts td, which is what epubcheck is saying it requires.
This is a simple XHTML validation error. If you look at your HTML (I've reformatted it slightly), you will see that your <tr> element contains text as well as element content. That's not allowed. The content model for <tr> contains only <th> and <td>, nothing else.
You need to wrap that '1' in an element.
Related
Why does the CSS property overflow:scroll; not work in <td>, while overflow:hidden; works well?
<table border="1" style="table-layout:fixed; width:100px">
<tr>
<td style="overflow:scroll; width:50px;">10000000000000000000000000000000000</td>
<td>200</td>
<td>300</td>
</tr>
</table>
From the CSS specs1,2, I can't see why.
You have to wrap it in a div, that will work:
<table border="1" style="table-layout:fixed; width:500px">
<tr>
<td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
<td>200</td>
<td>300</td>
</tr>
</table>
Firstly provide desired height to td and then Apply "float: left" property to respective "td" you want scrollbar to appear.
I got something from here!
Andrew Fedoniouk wrote:
This is actually my question:
"One technical reason is that the overflow property does not apply to
tables." - why? What is this reason?
I'm no expert, but I believe this is
just for backward compatibility with
legacy table behavior. You can check
the "automatic" table layout
algorithm in the spec. I'm pretty
sure that this layout algorithm is
incompatible with the overflow
property (or, more accurately, the
layout algorithm will never result in
the need for any value of overflow
except 'visible').
Yep, this is why I am asking. Seems like there are no formal reasons
why or should not be scrollable but seems like
UA vendors reached some silent agreement in this area. So is the
question.
The spec agrees with you with respect
to elements. Table cells are
supposed to respect overflow, although
Mozilla, at least, appears not to do
so. I can't answer your question in
this instance, although I would still
guess the answer is still tied to
legacy rendering.
The main thread is here.
<table border="1" style="table-layout:fixed; width:500px">
<tr>
<td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
<td>200</td>
<td>300</td>
</tr>
</table>
In my Qt project I'm using the QWebView to load my html table data.
I'm using the findText function to find text in the html page.
But, I can't find invisible text...
HTML sample :
<table>
<tr>
<td> hello </td>
</tr>
<!-- invisible data -->
<tr style="display:none">
<!-- I want to find this value -->
<td> hey </td>
</tr>
</table>
Is there a way to find invisible text elements via Qt?
I know that I can evaluate JavaScript function for that..
But still I'm looking for some Qt solution?
Thanks in advance.
You can use QWebFrame::findAllElements() function which will perform elements look up by CSS selector and return all found elements as QWebElementCollection regardless of their visibility. From that list you can find the QWebElement that correspond to your searching criterion.
I am doing a report which is going to have a lot of lines, therefore it is going to be composed by several pages.
I declared a pto_header, because I want it to be shown at the top of each page. The problem is that it is always totally attached to the external header of the report, which does not look good. I would like to specify a margin-top for my pto_header (which is a blockTable).
By the moment, I was not able to manage it. I tried to include a couple of <para> with the attribute spaceBefore, but they are ignored in each page except for the first one.
...
<stylesheet>
...
<paraStyle name="terp_header" fontSize="15.0" leading="20" alignment="CENTER" spaceBefore="20.0" spaceAfter="20.0"/>
</stylesheet>
<story>
<pto>
<pto_header>
<para style="terp_header"></para>
<para style="terp_header"></para>
<blockTable colWidths="480.0">
<tr>
<td>
<para>Name</para>
</td>
</tr>
</blockTable>
</pto_header>
<para style="terp_header"></para>
<para style="terp_header"></para>
<blockTable colWidths="480.0">
<tr>
<td>
<para>Name</para>
</td>
</tr>
</blockTable>
...
</pto>
</story>
...
I was taking a look to the code of other standard reports, and in fact, they look bad, because they do not respect the margin and their internal headers are totally sticked to their external headers.
Can anyone help me, please? My solution only works for the first page. It must be a better way to manage this.
Being a customer service staff with limited access to basic html, I've been assigned a task that beyond my skill about making a decent page of highlight items, after series of search around, I somehow get things working, well, in firefox, when I load up the the same content in Chrome & IE, I found different problem and to my best effort, I have no idea what cause the problem...
You might first wish to look at the firefox version as it display perfectly as I wanted it to:http://jsfiddle.net/kitchellw/TR6v5
(and I don't know why the first line doesn't apply the CSS...)
In IE, the round corner gone, which I won't worry too much... but
padding is gone...
the lower table looks like a mess
I found a way to tackle the image border, just border=0
In chrome,
while the upper section looks ok, the content in lower table seems 'shifted' to right by a few pixels and no longer stay center
Here is the exact code for the problem table at the lower section:
<table class=highlightitem>
<tr>
<td height="200" valign="top" >
<center>
<a href="http://www.digitalbuydirect.com/index.php?route=product/category&keyword=DSC-TX30" target="blank">
<img width=234 src="http://www.digitalbuydirect.com/edm/eDM20130516/TX30.png" /></a>
</center>
</td>
</tr>
<tr>
<td height="200" valign="top" >
<font class=product><B>some text</b></font><br><br>
<font class=content>some text</font><br>
<br>
<font class=pricehighlight><B>price</font><BR>
<font class=content><s>other price</s></font>
</td>
</tr>
<tr>
<td align="right" height="50" valign="bottom" >
<img src="http://www.digitalbuydirect.com/edm/achieve/shopnow_35.png" /> </td>
</tr>
</table>
and finally, I know my code is complex by using multi-table to control the vertical position, and CSS is my friend here, but i were unable to get the 'shop now' icon station at the lower right corner with clickable url attach with it, I found a CSS background image with a display block for the url might work, but the display block still request at least 1 character, which I cannot afford on my image. Any hint or direction would be appreciated.
First of all, you should really clean up your deprecated code.
So far the things I've seen that are deprecated or not supported anymore are as follows:
<center> - Use CSS text-align:center; reference
<font> - Use another element like <p> coupled with CSS text styling
<td align="right"> - Use CSS float:right; reference
<td valign="top"> - Use CSS vertical-align:top; reference
As for your IE padding problem, take a look at this question. I'm not sure if that's applicable though, since you didn't include your CSS in the question, so I don't know how you implemented the padding you already have.
As for centering, using margin:0 auto; will work for statically positioned elements. For absolutely or fixed position elements I do this: #elementID{width:800px[specify width]; left:-400px[negative half of the width]; margin-left:50%;}
If I use styling in my outlook, it won't work.
how can I fix it? I am talking about this style code:
<div id="BodyID" Style=" word-spacing:2px; min-width:0px; min-height:0px;max-width:693px; max-height:490px; height:485px; background-color:#f4f4f4; border:1px solid #e4e4e4; font-family:Arial;">
Unfortunately Outlook supports something roughly equivalent to IE5 compatible HTML. It's really terrible. Here's a detailed MSDN article on the Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007, which I don't believe changed much for Outlook 2010.
Honestly, the only way I've been able to get outlook HTML to look the way I want is to hand generate the HTML using roughly HTML2 standard tags and properties and not using CSS at all. Some CSS renders, but it's really hit or miss.
Maybe this can help http://www.campaignmonitor.com/css/ It's a table, what is supported in E-Mails
edit
min|max-width|height not supported
http://htmlemailboilerplate.com/
I've been using that as a base for my HTML email campaigns.
And the link yunzen posted to campaign monitor is a great resource.
The MSDN article superlime linked to tells the sad story: for whatever incomprehensible reasons, Microsoft reverted nearly 10 years in their handling of HTML email w/Outlook2007, and did not see fit to fix it in 2010.
Having taken the trouble to design a well-formatted HTML layout for rest of the universe of mail user agents, I do see one saving workaround, which is what I'm going to direct my users to, rather than spend my time trying to reconstruct ancient HTML:
Use the VIEW IN BROWSER option Outlook offers for reading an email message. That re-assembles the HTML as intended.
Try adding 3 columns table, click on the example link below.
Example: Link
<table border="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="400">
<table border="1" cellspacing="0" width="100%">
<tr>
<td>
Content here...
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>