Dennis Bauszus Dennis Bauszus - 11 months ago 53
CSS Question

First letter is always black when printing with MDL from Firefox

I have tables in which I want to represent negative numbers as red text. The problem is that in the print preview the color is not applied to the first letter.

enter image description here

I have CSS rules in a media print block. I have tried to put the number in a span and applied the redText class to both the span and the td itself. I have tried to apply the color to the class element and every subsequent element.

@media print {
.redText, .redText * {
color: #f44336 !important;
}
}


The html is:

<td class="textRight band0Bchange_ue_04 redText">
<span class="redText">-1,566</span>
</td>


This is the HTML in the regular view where the color is rendered correctly. I am not sure whether is possible to inspect the elements in the print preview.

Edit: The issue is caused by the Material Design library. I have put the relevant html and css into a jsFiddle. This works well. Once I add material.min.css the print breaks with the behaviour as described above.

https://jsfiddle.net/goldrydigital/8fzby8aq/2/

I have added a print preview on the jsfiddle.

https://jsfiddle.net/goldrydigital/8fzby8aq/6/

Here the problem doesn't display. The problem is only visible when I use the actual print function on Firefox.

enter image description here

Answer Source

Please check, may be possible you have written first letter CSS for print or main style sheet.

.redText::first-letter {
    color: #000000;
} 

I tried in codepen also it is working fine as you provided the code in question section.