How do i handle this printer friendly CSS?
I have a html page. With header Body and Footer.
In Body I have two section Primary(left) and Rail(Right). The primary contains the Article and rail contains some modules. I want to to write css that just prints the article in primary.开发者_运维问答
I have done
#header{display:none;}
#footer{display:none;}
these two properties work properly in print.css
but when i do #rail{display:none} it does not hides and i still get the entire body. If i hide elements appearing inside the rail they also hide. But the rail doesnt.
Can anybody suggest me what might be going wrong.
I found this jquery to work well, you can choose which fields to display in your printer friendly version, you can also add any css to the head, including files or simply just a couple of classes.
function printPage(){
var w = window.open();
var headers = $("#headers").html();
var field= $("#field1").html();
var field2= $("#field2").html();
var html = "<!DOCTYPE HTML>";
html += '<html lang="en-us">';
html += '<head><style></style></head>';
html += "<body>";
//check to see if they are null so "undefined" doesnt print on the page. <br>s optional, just to give space
if(headers != null) html += headers + "<br/><br/>";
if(field != null) html += field + "<br/><br/>";
if(field2 != null) html += field2 + "<br/><br/>";
html += "</body>";
w.document.write(html);
w.window.print();
w.document.close();
};
Check out the inline style of your #rail section, it might have somthing that overrides your display:none;. If it's still displayed, try to add !important after your display:none;.
I'm just guessing out there, but the best way to find out what's going wrong, is to load your page with your print.css and to search through it with Firebug or so...
加载中,请稍侯......
精彩评论