Dennis Bauszus Dennis Bauszus - 2 months ago 20
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

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.