View Single Post
Old 11-15-2011, 08:08 PM   #3
Skeezix
Member
Skeezix began at the beginning.
 
Posts: 20
Karma: 10
Join Date: Jun 2011
Device: Kindle
Quote:
Originally Posted by ldolse View Post
Might help if you pasted the relevant code/styles applied by Calibre on these tags and their parents after conversion. It would also help to know how you're viewing the converted content. When you get into more complex styling like this you're often dealing with reading system compatibility issues vs Calibre problems.
Good idea. I managed to strip it down to a tiny HTML page, reproduced here:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>Test case</title></head><body>

<div style="float: right">
   <p>This is the first line, a little longer than<br>
      The second line.</p>
</div>

</body></html>
If you view that in Firefox, IE, or Chrome, you'll see it how I want it to look.
When I compile it into a MOBI with Calibre, I just end up with those lines flush left. (I viewed the MOBI in the Kindle emulator and on my Kindle 3.)

Here's what the file looks like from the "processed" folder in the debugging folder:

Code:
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test case</title>
    
  
<meta content="http://www.w3.org/1999/xhtml; charset=utf-8" http-equiv="Content-Type"/><link href="stylesheet.css" type="text/css" rel="stylesheet"/><style type="text/css">
		@page { margin-bottom: 5.000000pt; margin-top: 5.000000pt; }</style></head>
  <body class="calibre">

<div class="calibre1">
   <p class="calibre2">This is the first line, a little longer than<br class="calibre3"/>
      The second line.</p>
</div>

</body>
</html>
And here's its stylesheet.css:

Code:
@namespace h "http://www.w3.org/1999/xhtml";
.calibre {
    display: block;
    font-size: 1em;
    line-height: 1.2;
    margin-bottom: 0;
    margin-left: 5pt;
    margin-right: 5pt;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
    page-break-before: always
    }
.calibre1 {
    float: right
    }
.calibre2 {
    display: block;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em
    }
.calibre3 {
    display: block
    }
Skeezix is offline   Reply With Quote