Why can't I change the display status using CSS?

Question

I am trying to display a banner on a report while printing but it doesn't print. What I did was I set the display status to display:none in my regular CSS

#transfer_head2
{
display:none;
}

and I changed the display status to display:block in my print CSS

#transfer_head2
{
display:block;
}

but this is not working. Why? Can anybody help me?

Answer 1

Maybe your display: none is overwritten by another property later defined. Try !important

display:block !important;

Answer 2

Check the ordering of your CSS files and the media defined. Your print.css should come last so that it can override any CSS with media=all. Using Firefox with the Web Developer plugin you can change the CSS in your browser to display as if it were print media. You might want to try that in conjunction with the inspection facilities of Firebug to see what CSS is being applied from where.

Answer 3

• Make sure the container divs (if any) is not hidden
• Check the generated source with web developer toolbar to see the inherited properties of the div.

Answer 4

Use FireBug

Answer 5

Is #transfer_head2 a TABLE? If so, you need to use:

#transfer_head2 { display: table; }

Is it a TR?

#transfer_head2 { display: table-row; }

Is it a TD or a TH? Then it's the following:

#transfer_head2 { display: table-cell; }

Note that those are not supported in IE6 or lower. In which case you might want to use something like the following:

@media screen {
    #transfer_head2 { height: 1px; width: 1px; overflow: hidden; visibility: hidden; }
}

@media print {
    #transfer_head2 { height: 60px; width: 468px; visibility: visible; }
}

EDIT: I forgot to specify this in my original post but keep in mind that most browser configurations have background printing disabled by default, so if you have something like the following in your CSS:

#transfer_head2 { background-image: url('../image/print_banner.jpg'); }

it will not print no matter what the display mode. If you have control over the user's browser configuration, this is a non-issue, but in most cases, you will want to use an IMG tag for your banner.

Answer 6

Without seeing the code of #transfer_head2 it's hard to tell, you should paste it into your question.

One possible reason could be that you have made the banner a background for #transfer_head2 element, and browsers are usually set not to print backgrounds by default.

EDIT: ugh, Andrew has covered that already...