CSS-styled <figure> of circle will not display in print-view - html

Question

I have created some 3D spheres with figure html elements and css-styling that I cannot get to display in a print-view. I am trying in both IE9 as well as Chrome v45. What can I do to get these to print? I hope the answer is not to change the element to something other than figure as this would require numerous other changes.
I have
-- checked "print background colors an images" in IE print dialogue and I've checked "background graphics" in Chrome print dialogue.
-- tried adding -webkit-print-color-adjust: exact; to a number of places in the css, including figure{}, .sphere{} and .red{}
-- tried adding a print-backgrounds chrome extension, which I later learned was obsolete anyway.
HTML:
<figure class="red sphere"></figure>
CSS for Chrome:
.sphere {
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
height: 30px;
width: 30px;
margin: 5px auto auto auto;
}
.red {
background: radial-gradient(circle at 10px 10px, red, #000);
}
CSS for IE9:
.sphere {
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
height: 30px;
width: 30px;
margin: 5px auto auto auto;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=40, style=2);
}
.red {
background: red;
}
Thanks!

Answer 1

When linking your stylesheet make sure to have media=all in the link.
It should look something like this:
<link rel="stylesheet" type="text/css" media="all" href="styles.css">
or set up a specific print stylesheet like so:
<link rel="stylesheet" type="text/css" media="print" href="print.css">

Answer 2

Funny thing, after nearly 3 years I was finally asked (again) to create a print view for the MVC application in question here. So I googled my question (again) and thought 'this person is asking just what I'm after!'. Yep, turns out it was my own question (and still unanswered) ...
Gained from my own experience, and searching other code I'd written since first asking my question, here is the answer, ...
#media print
{
.red {
background: radial-gradient(circle at 10px 10px, red, #000) !important;
}
.yellow {
background: radial-gradient(circle at 10px 10px, yellow, #000) !important;
}
.green {
background: radial-gradient(circle at 10px 10px, #00af00, #000) !important;
}
}
Yep, I just had to re-describe the background color characteristics (and include !important) in the #media print section of the css file. Why? Idk. It's a direct copy/paste (plus !important) of the general css section. But it worked!
Cheers!