Log in / Register

Forum › Bugs

Background-color doesn't apply on table cells

Seldaek
We are having issues with coloring the background of a table. We have a typical zebra-colored table, where each odd row is colored and the other is white, and the background doesn't render at all in prince.

The css is very flexible.. so it is bound to match something :
.odd, tr.odd, .odd td { 
background-color: #efefef;
}


And here is an excerpt of the markup:
<tr class="odd">
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>


Any idea how to fix this? Is it a known issue?
mikeday
I would suspect that there is some other CSS rule elsewhere overriding this one. Try this simple document, which should work:
<html>
<head>
<style>
.odd { background-color: #efefef }
</style>
</head>
<body>
<table>
<tr class="odd"><td>ABC</td><td>DEF</td></tr>
<tr><td>ABC</td><td>DEF</td></tr>
<tr class="odd"><td>ABC</td><td>DEF</td></tr>
<tr><td>ABC</td><td>DEF</td></tr>
<tr class="odd"><td>ABC</td><td>DEF</td></tr>
<tr><td>ABC</td><td>DEF</td></tr>
<tr class="odd"><td>ABC</td><td>DEF</td></tr>
</table>
</body>
</html>
Seldaek
Well.. no. I mean, unless Prince doesn't resolve CSS rule priority in a standard way, there is nothing overwriting it. If I change the print stylesheet's media to be screen, it renders correctly in the browser.

Here is a copy of the computed styles from firefox of a <tr class="odd">, if it helps:

/*Text*/
font-family: Arial,sans-serif;
font-size: 13px;
font-weight: 400;
font-style: normal;
color: #000000;
text-transform: none;
text-decoration: none;
letter-spacing: normal;
word-spacing: 0;
line-height: 16px;
text-align: start;
vertical-align: middle;
direction: ltr;

/*Background*/
background-color: #EFEFEF;
background-image: none;
background-repeat: repeat;
background-position: 0 0;
background-attachment: scroll;
opacity: 1;

/*Box Model*/
width: 661px;
height: 24.7px;
top: auto;
right: auto;
bottom: auto;
left: auto;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 0;
border-left-width: 0;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;

/*Layout*/
position: static;
display: table-row;
visibility: visible;
z-index: auto;
overflow-x: visible;
overflow-y: visible;
white-space: normal;
clip: auto;
float: none;
clear: none;
-moz-box-sizing: content-box;

/*Other*/
cursor: auto;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
marker-offset: auto;
mikeday
Can you email me (mikeday@yeslogic.com) a copy of the document and style sheets?
Seldaek
Mail sent, I hope you can find a solution, thanks.
mikeday
Looks like there is a bug in the CSS parser, where a space before a comma in that CSS rule is causing it to be ignored. Very strange. We will fix this for a future release of Prince, in the meantime you can work around the issue by removing the space. Thanks for letting us know! :)
mikeday
This bug has been fixed in Prince 8.0, beta version now available for download.