I am printing one page from my web application from different browser. It contains some small images like tick mark, question mark on page.
Now my problem is that it is not printing images on print out. in IE it works fine and print images but in Google Chrome, Firefox it is not printing images.
Can any one have an idea what to do to print images in print out from Chrome and Firefox?
Thanks in advance.
below is my code for generating image in page.
I am preparing cell with class called 'tickmark'.
HtmlTableCell tc = new HtmlTableCell();
tc.InnerText = "";
if (Convert.ToInt64(result[h]) == 1)
{
tc.InnerHtml = "<b class='tickmark'></b>";
}
trContent.Cells.Add(tc);
and tickmark class having code:
b.tickmark { background:url(../images/tickmark.png) no-repeat; width:13px; height:10px; display:block; vertical-align:middle; margin:0 auto; }
Modern browsers do not print background images. These CSS images are meant for styling.
If that image is important, have it embeded on your page. images in a <img/> tag will work.
To avoid breaking your current layout, you can do this:
Have another css file print.css and link it as follows:
html:
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
<link rel="print stylesheet" type="text/css" href="print.css" media="print" />
<div class="tick"><img src="images/tickmark.png" alt="tick" /></div>
main.css
.tick img {
display: none;
}
print.css
.tick img {
display: block;
}
Related
I'm trying to remove the 8px margin from the body tag.
I've tried (not all at once)
* { padding:0; margin:0; }
and
html, body { padding:0; margin:0 !important; }
and
body { margin:-8px; }
and even
<body style="margin:0">
The last one works, but only if I add the style attrib using Firebug; if it's in the original HTML, it gets ignored.
I'm at my wit's end.
Edit: facepalm I figured it out; I'd changed it to a cfm so I could easily call browser-specific styles. Thank you all for your help.
Include a reset stylesheet instead, this way you will reset all of the default values equally in all browsers.
http://meyerweb.com/eric/tools/css/reset/
All you need is:
body { margin: 0; padding: 0; }
The padding is not needed for Firefox, but for Opera, which uses padding instead of margin for the default.
Demo: http://jsfiddle.net/k3j8Y/
body{ margin: 0;}
works ok for me :P
Include your stylesheet correctly
As your style is not appearing in FireBug's CSS rule stack, your CSS is probably not linked correctly. Ensure the stylesheet is in your head tag like so:
<head>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
I am attempting to bypass the need for a PDF component by building a good print stylesheet.
I have two CSS files, site.css and print.css. They are loaded via the following:
<link href="site.css" rel="stylesheet" type="text/css" />
<link href="print.css" rel="stylesheet" type="text/css" media="print"/>
site.css is a large, long and boring css file with the addition of
.printonly
{
display: none;
}
This is applied to elements in the document I have added for the sole intention of printing which I do not want on the page. It only exists in the site.css file.
When I have the image loaded through <img class="printonly" src="image.png" id="logo" alt="logo"/> It is not visible on the printed sheet.
If I drop the class="printonly", then it places the picture on the printed page just fine.
This makes me believe that it is picking up site.css even when trying to print.
Is there any way around this, or can anyone suggest anything?
For completion sake, I have included the entire print.css, however, I am not sure it is really needed:
body {
width: 210mm;
height: 297mm; }
#logo {
margin-left: 50%;
margin-right: 50%; }
.noprint {
display: none; }
You can either make the first stylesheet for screen media only, or you can change the display value for those images back to inline in your print media stylesheet.
I am very new to css so this maybe a simple answer. I have 2 scenarios and 1 works the other doesn't. I hope someone can help me out.
WORKS:
<head>
<style type="text/css">
body {
background-image:url('views/default/images/home.jpg');
;}
</style>
</head>
DOESN'T WORK:
<head>
<link rel="stylesheet" type="text/css" href="views/default/home_style.css" />
</head>
In home_style.css>
body{
background-image:url('views/default/images/home.jpg');
margin-top: 0px !important;
padding-top: 0px !important;
}
It looks like your CSS file is in the views/default/ folder, while the image is in the views/default/images/ folder.
Define image paths in your CSS relative to the CSS file, not the HTML file that displays everything:
background-image:url('images/home.jpg');
In my case:
I had a CSS folder. So, inside my CSS folder I had my style.css so I was typing inside my style.css the following:
background: url('img/mybgimg.jpg')
instead of
background: url('../img/mybgimg.jpg')
...I hope this can help to anyone who is having the same issue.
Ok, I am currently directing my style sheets as listed below:
<link href="Styles/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />
<link href="Styles/Site.css" rel="stylesheet" type="text/css" media="screen"/>
On the Site.css I have a certain ID with a background-image:
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
background: url('../images/topbackground.gif') no-repeat;
}
On the mobile.css I thought I could simply change it to "none" or another image, somewhat similar to this (I've tried several variations at this point):
#container {
width: 100%;
margin-left: 0;
margin-right: 0;
background: #ffffff none;
z-index: 30;
}
However, it doesn't seem to be working. The background still shows on the mobile version of the site. I've been looking at it in both Opera Mini and the Android SDK Emulator. The mobile version of the site is picking up all other properties from mobile.css, just not background-image changes.
I know it's got to be something obvious at this point that I am just oblivious to. Any help would be appreciated.
this is because you load mobile.css before you load Site.css. (in the example you have made).
I thinks its working if you juste insert site first then mobile.css ..
If you need to keep it that way for some reason you gonna need to use !important afters the statement.
Here you can find a working example:
http://jsfiddle.net/2EaQb/
I have a print page, and I want to put a div with some instructions on how to print the page in it. I don't want this section to appear when they actually print the page.
How would I achieve this using CSS or JavaScript?
A common method is to use a separate CSS for printing.
You can have a css for all media and one for print:
<link rel="stylesheet"
type="text/css"
media="print" href="print.css" />
In the print.css just put the display:none on the div.
Davide
Since it hasn't been stated here before, you don't necessarily need to have an external style sheet:
<style type="text/css" media="print">
.hideMeInPrint { display: none; }
</style>
The simplest solution is to add this in the main CSS file. Do note that, when you link the CSS file, you should not specify the media attribute (<link type="text/css" rel="stylesheet" href="/path/to/css.css" />):
#media print {
div.classname {
display:none;
}
}
You are looking for #media print.
http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
Bit more info on Print Style Sheets
Insert a stylesheet just for print:
<link rel="stylesheet" href="/path/print.css" media="print" />
Then put css to hide the div in that stylesheet
<link type="text/css" rel="stylesheet" media="print" href="/css/print.css" />
in this css file style put display: none; for elements you don't want to be printed
In your html, indicate a stylesheet used for printing:
<link rel="stylesheet" type="text/css" media="print" href="print.css"/>
And in this CSS:
#mydiv {display: none;}
You can include a stylesheet that is only applied when printing.
<LINK REL="stylesheet" TYPE="text/css" MEDIA="print" HREF="print-specific-styles.css">
In that style sheet, you can hide your divs and make any other necessary changes.
Anyone working with div's inside php then take Divya's recommend. I spent hours on this until ran across this, put into external and all class in other code with php page, works great :) Also, works good with bootstraps whereas bootstrap can otherwise be ignored and still print.
#media print {
div.classname {
display:none;
}
}