I need to print my reports in a web application.
I have <link rel="stylesheet" href="print.css" type="text/css" media="print" /> in my code. But it does not apply any style. On the other hand, if I write print.css codes inside my document using <style></style> everything works fine.
What's the matter ?
maybe you insert print style sheet before main styles?
Related
The issue is CSS Does not effect on website after bundle although all of bundle process is fine
From the view source code page i can see the css file but it does not take any effect on website. The code bellow is what i used to call css and saw from view source code page and from my layout file.
<link rel="stylesheet" type="text/css" src="/Content/css?v2">
Does anyone have any idea for this?
Thank you.
You used
External Style Sheet
With an external style sheet, you can change the look of an entire website by changing just one file!
Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:
your code
<link rel="stylesheet" type="text/css" src="/Content/css?v2">
try like ths
src should change to href
<head>
<link rel="stylesheet" type="text/css" href="/path/yourcssfilename.css">
</head>
I know this is a simple question but for some reason I'm wondering if I'm doing something wrong here.
My understanding is that if you declare 2 CSS files
<script type="text/css" src="JQueryUI.css"></script>
<script type="text/css" src="Override.css"></script>
I want to use the "Override.css" to override some values, so if I type let's say ".ui-accordion" and put my own values, i would expect them to take priority over the original values located under that name on the JQuery.css file.
Mainly because the declaration states that Override.css comes AFTER JWuery.css.
For some reason this is NOT happening.
I tried switching the declaration of the 2 files
...but the Jquery.css seems to ALWAYS seems to take priority.
Any reason why ??
This is not working because you are not loading correctly the css files.
It should be:
<link rel="stylesheet" href="JQueryUI.css" type="text/css" media="all" />
<link rel="stylesheet" href="Override.css" type="text/css" media="all" />
I am agree with Zhihao about specificity of elements, but I have also noticed that your are using <script> to attach CSS files, use <link> tags instead, maybe that would load your css and it will override existing styles:
<link rel="stylesheet" type="text/css" href="JQueryUI.css" />
<link rel="stylesheet" type="text/css" href="Override.css" />
P.S. just posted my notice in the comment as an answer
I want to print my table that contains some css styles too. But whenever I run window.print(), the output appears without any applied css to styling headers and footers.
I've used <link rel="stylesheet" href="print.css" type="text/css" media="all" /> in my code. Also I tested it with media="print". But still I have a print preview without any style.
What should I do?
media=print should do.
Make sure you have also checked the "print images and colors" in page setup while seeing the Print Preview.
I have a web application that produce some reports in HTML format. I have different styling options to display these forms. Normally whenever I want to print these pages, I lose all CSS styling features. How can I make a print without any change in appearance?
<link rel="stylesheet" href="./public/css/print.css" type="text/css" media="screen, print" />
As far as I know the print-out should use the same css-styling as the screen unless you specify something else.
Do you specify "media" in the css link?
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
You could try to either make sure there is no media specified or to set media="screen, print"...
If you use some JavaScript plugin (like: jQuery-Print) you would lose your appearance in the other way if you use CSS correctly it's impossible to have a change in your print usually?!
if your problem don't solve tell me which language do you use for your application?
I'm just curious how most people make their ASP.NET pages printer-friendly? Do you create a separate printer-friendly version of the ASPX page, use CSS or something else? How do you handle situations like page breaks and wide tables?
Is there one elegant solution that works for the majority of the cases?
You basically make another CSS file that hide things or gives simpler "printer-friendly" style to things then add that with a media="print" so that it only applies to print media (when it is printed)
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Our gracious host wrote a good blog post on this topic:
Coding Horror: Stylesheets for Print and Handheld
I am a php user, but the point must be that the result no matter what is HTML and HTML is styled with CSS and there is an option for your style sheets for just using the style for printing. This should be the way to do it, imho. About big tables, there isnt really a magic "fix" for that. Page will break where it breaks, dont really understand the problem here either.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />