print media queries and stylesheets are being ignored

Question

i'm having an issue with a @media print {...} in my css. i want the left navigation bar to not display when i print the page. when printing, i currently see the crude image on the right while i would like to see the crude image in the middle:

    screen                  print              current print
|             |        |             |        |             |
|| n |   m   ||        ||     m     ||        |    |   m   ||
|| a |   a   ||        ||     a     ||        |    |   a   ||
|| v |   i   ||        ||     i     ||        |    |   i   ||
||   |   n   ||        ||     n     ||        |    |   n   ||
|             |        |             |        |             |

but because of the way this is laid out, the main content has a margin to position it properly with the floated left navbar. this is because i need the navbar to appear as though it is the full page height.

my browsers seem to be ignoring my media query telling it to change that margin. i have even tried separate print css sheets and i get the same results.

i don't know if it is even possible to test such things in jsfiddle, but here is one anyway. it'll at least show the basic code structure. http://jsfiddle.net/mhguddf3/2/

here is also a version in codepen since it has a way to view the example as a full page. http://codepen.io/brandonkennedy/pen/Fkrcn

any input would be greatly appreciated.

score 3 · Answer 1 · answered Oct 01 '14 at 20:01

3

Your @media print block needs to go at the end of the stylesheet. The other rules, since they don't have a specified media, apply to both screen and print, so they're overriding what you already declared for print (in CSS, rules of equal specificity are applied in the order they're given; in the case of conflict, the most recently-supplied rule stands).

Here's the jsfiddle.

answered Oct 01 '14 at 20:01

Woodrow Barlow

8,477
3
48
86

thanks for the quick response, but it still doesn't work in my site. i must have some other conflicting styles, though 3 hours still hasn't yielded any results. *sigh* i'll have to dig deeper. thanks again. – laxtwentyone Oct 01 '14 at 20:11
does it work in the isolated example? it might be an issue involving in what order your external stylesheets are being called on your site. also, if you have any in-line css rules, those supercede all else. – Woodrow Barlow Oct 01 '14 at 20:14
@laxtwentyone the isolated example seems to be working for me. here's a full-screen view you can try opening the print dialog on: http://jsfiddle.net/g7Lsut3u/embedded/result/ . perhaps you can share some more details about how this differs from your full site? – Woodrow Barlow Oct 01 '14 at 20:17
yeah, the isolated examples worked great, which ended up just confusing me more. my full site is using a theme that my company downloaded and is combining multiple css files into one huge file. i pulled out the code that i thought was the problem for the examples, but there are 14000+ more lines of css that could be interfering. for me, it appears as though it just refuses to acknowledge my margin change and only my margin change. i can make it change font size or color, just not margin. – laxtwentyone Oct 02 '14 at 12:33

score 1 · Accepted Answer · answered Oct 01 '14 at 20:59

1

Well, if your margin can't be fixed maybe you can position it absolutely and give it a negative margin.

#printed-content{
 position: absolute;
 left: -230px;
}

answered Oct 01 '14 at 20:59

mistersender

256
1
9

I guess it's not the best way but helped me for now. – Doruk Jan 31 '17 at 11:41

score 0 · Answer 3 · answered Jul 13 '15 at 15:37

I ran into a similar issue on my app. We also used margin-left to position our page-content from the sidebar. There was also a CSS transition on the page-content for offcanvas navigation on mobile. We were able to fix it by removing the transition in the print media query.

@media print { 
    #page-content { 
        transition: none; 
    }
}

print media queries and stylesheets are being ignored

3 Answers3