So I'm display a complex list of data. I've gotten it to work in FF, IE6,7,8, and Safari, with minimal hacks. But I've noticed a problem when I go to put this through Prince. I've put the HTML example at the end. If you take a look at that in FF or IE6 it displays the same way. On the left is the red background, on the right the green background. There is space between the next list element under the green element (as the clear rule should create). If you look at the PDF I've attached, the element under the green bg is smack on its baseline. And the FOO almost acts as if it was "vertical-align=bottom" from a table. Neither of these two issues present in FF, IE, or Safari.
Does anyone have any clues? Am I misunderstanding Prince's implementation of the box model or something??? Does theirs conform to IE's or FF, or some amalgamation of the two? One more weird note: if I change the backgrounds to border: 1px solid red/green - the element under the green element will have one, and only one, line break between the two elements (so if the red text wrapped to a third line, the elements under green is still off).
You can find the PDF itself here: http://www.socialcens.us/PDFTest.pdf
Here is the code:
Does anyone have any clues? Am I misunderstanding Prince's implementation of the box model or something??? Does theirs conform to IE's or FF, or some amalgamation of the two? One more weird note: if I change the backgrounds to border: 1px solid red/green - the element under the green element will have one, and only one, line break between the two elements (so if the red text wrapped to a third line, the elements under green is still off).
You can find the PDF itself here: http://www.socialcens.us/PDFTest.pdf
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<style type="text/css">
@page {
prince-shrink-to-fit: auto;
margin: 0mm;
}
#foo, .qtext {
float:left;
clear:left;
margin:0;
padding:0;
width:480px;
}
#bar, #baz, dt.answer, dd.score {
float:right;
margin:0;
padding:0;
width:200px;
}
#contain, #question-list {
width:880px;
margin-left:auto;
margin-right:auto;
}
#question-list dt, #question-list dd
{
line-height: 25px;
}
.widget {
width:300px;
line-height:16px;
}
.widget dt {
float: right;
clear:right;
width: 50%;
}
.widget dd {
float:left;
width: 50%;
vertical-align:top;
}
</style>
</head>
<body>
<div id="contain">
<div id="foo">
FOO
</div>
<div id="bar">
BAR
</div>
<div id="baz">
BAZ
</div>
</div>
<dl id="question-list">
<dt class="qtext qfmt25 qno11" style="background-color: red">
Date performed:
Date performed:
Date performed:
Date performed:
Date performed:
Date performed:
Date performed:
Date performed:
</dt>
<dd>
<dl>
<dt class="answer" style="background-color: green">
10/19/2009
<!--
19/10/2009
--> mm/dd/yyyy</dt>
<dd class="score">
</dd>
</dl>
</dd>
<dt class="qtext qfmt25 qno11" >Date performed:
</dt>
<dd>
<dl>
<dt class="answer">
10/19/2009
<!--
19/10/2009
--> mm/dd/yyyy</dt>
<dd class="score">
</dd>
</dl>
</dd>
</dl>
<div class="widget">
<dl>
<dt>bar bar bar bar bar bar bar</dt>
<dd>FOO</dd>
<dt>bar bar bar bar bar bar bar</dt>
<dd>FOO</dd>
</dl>
</div>
</body>
</html>
