I have two questions that are related:
(1) I am having some trouble with a somewhat complicated "header" that looks great in a WebKit browser, but does not display correctly when I use Prince. The XHTML markup and CSS is copied below. The main problem is that I am constructing a vertical orange bar that contains title text via three separate images (so that it can expand to include the entire title as it grows), and there is always a visible break between each section when I use Prince. Is there any way to get ride of the breaks? I have tried several things including {border: none}, {border-collapse: collapse}, and {border-spacing: 0px}, but there is always a think break between the three image elements. Any other ideas?
(2) Furthermore, I would like to put the entire #fTitle element in a page header on every page. I am wondering if there is any way to do this? My attempts to do this have resulted in either (a) nothing being displayed or (b) something that looks really horrible. I guess my question is this: should I even try to put something like this in a header, or do I need to significantly simplify it first?
Here is a picture of how a WebKit browser renders this code:
ImgCapture.tiff
XHTML Markup:
<div id="fTitle">
<div class="fTitleTitle">
<h1>Document Title</h1>
</div>
<div class="fTitleSummary">
<p id="fInfo">Created by Me at 13:09:45 on 2010-02-23 </p>
<p id="fSummary">This is a summary of the document.</p><br />
</div>
</div>
CSS:
#fTitle {
background-color: #332c2a;
background-image: url(orange-bar-top.jpg);
background-repeat: no-repeat;
background-position: 20px 0px;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #c34c00;
}
.fTitleTitle {
float:left;
margin-left: 20px;
width:180px;
background-image: url(orange-bar-bottom.jpg);
background-repeat: no-repeat;
background-position: left 95%;
}
.fTitleTitle h1 {
font-size: 28px;
color: #f2f3ee;
padding: 0px 5px 10px 5px;
min-height: 120px;
background-image: url(orange-bar-middle.jpg);
background-repeat: repeat;
background-position: left top;
font-family: Tahoma, Geneva, sans-serif;
text-shadow: 2px 2px 3px black;
}
.fTitleSummary {
min-height: 100px;
color: #f2f3ee;
position: relative;
vertical-align: bottom;
left: 20px;
top: 60px;
}
#fInfo { display: none; }
(1) I am having some trouble with a somewhat complicated "header" that looks great in a WebKit browser, but does not display correctly when I use Prince. The XHTML markup and CSS is copied below. The main problem is that I am constructing a vertical orange bar that contains title text via three separate images (so that it can expand to include the entire title as it grows), and there is always a visible break between each section when I use Prince. Is there any way to get ride of the breaks? I have tried several things including {border: none}, {border-collapse: collapse}, and {border-spacing: 0px}, but there is always a think break between the three image elements. Any other ideas?
(2) Furthermore, I would like to put the entire #fTitle element in a page header on every page. I am wondering if there is any way to do this? My attempts to do this have resulted in either (a) nothing being displayed or (b) something that looks really horrible. I guess my question is this: should I even try to put something like this in a header, or do I need to significantly simplify it first?
Here is a picture of how a WebKit browser renders this code:
ImgCapture.tiff
XHTML Markup:
<div id="fTitle">
<div class="fTitleTitle">
<h1>Document Title</h1>
</div>
<div class="fTitleSummary">
<p id="fInfo">Created by Me at 13:09:45 on 2010-02-23 </p>
<p id="fSummary">This is a summary of the document.</p><br />
</div>
</div>
CSS:
#fTitle {
background-color: #332c2a;
background-image: url(orange-bar-top.jpg);
background-repeat: no-repeat;
background-position: 20px 0px;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #c34c00;
}
.fTitleTitle {
float:left;
margin-left: 20px;
width:180px;
background-image: url(orange-bar-bottom.jpg);
background-repeat: no-repeat;
background-position: left 95%;
}
.fTitleTitle h1 {
font-size: 28px;
color: #f2f3ee;
padding: 0px 5px 10px 5px;
min-height: 120px;
background-image: url(orange-bar-middle.jpg);
background-repeat: repeat;
background-position: left top;
font-family: Tahoma, Geneva, sans-serif;
text-shadow: 2px 2px 3px black;
}
.fTitleSummary {
min-height: 100px;
color: #f2f3ee;
position: relative;
vertical-align: bottom;
left: 20px;
top: 60px;
}
#fInfo { display: none; }
