I have an alignment issue only in Chrome and am using the following Chrome CSS hack in my print.css:
#media screen and (-webkit-min-device-pixel-ratio:0){
.invoiceTable .smallerInput{
margin-top:9px !important;
}
}
When I go to print preview, the style has not been applied.
If I add the Chrome only CSS hack into the normal page view CSS, I can see that the styles are applied correctly in Chrome and not affected in other browsers. Seems like it isn't detected for the print preview for some reason.
Does anyone know how to get it to work on the print preview for Chrome?
You need to use
#media print
to target a printer.
Use link tag
<link rel="stylesheet" href="my-sample-print-style.css" media="print"/>
Related
I am having trouble with mobile classes contained within media queries being incorrectly applied in a chrome browser on print.
When clicking ctrl+p to print (through chrome browser) on desktop -> my mobile classes are being applied for the full screen, and the print version is incorrect. I want to ensure a user can print from desktop through chrome browser and mobile styles/classes/layouts will not get injected to the print version.
I have a print button on the page and a print specific stylesheet. There are no problems with the print button, the problem only occurs when browser printing and only in chrome. Weirdly, it works correctly in firefox and IE (go figure!).
I have tried including an additional print specific stylesheet in my header like this:
<link rel="stylesheet" href="/_css_/print.css" type="text/css" media="print" />
And within this print.css stylesheet (compiled from SCSS) I've tried various different versions of wrapping all the styles in: #media print { } all to no avail.
Thank you in advance for help with this troublesome chrome printing!
Try putting your mobile styles within #media screen:
#media screen and (max-width: 800px) {
}
I'm trying to hide parts of my page for print. Found a solution with #media print and added this code to my page:
#media print
{
.no-print, .no-print *
{
display: none !important;
}
}
Then I've added the class="no-print" to divs I didn't wont to print. Works like magic on Chrome but IE (8-11) ignores it completely and print all objects.
You can see the print function in the following page.
You can see that the print icon and the green tabs are not show in Chrome but are in IE.
BTW, on FireFox for some unknown reason I don't even see the print icon... /:
Thanks in advance for any help provided,
Guy.
I'm not sure why your method won't work on IE. IE is a pain.
Adding a stylesheet like this:
<link rel="stylesheet" href="http://rom.guywalderonline.com/templates/shaper_istore_ii/css/print.css" type="text/css" media="print" />
and adding your print specific CSS to the print.css file works for me in IE.
This is what the free AddPrintStylesheet extension does: http://extensions.joomla.org/extensions/style-a-design/print-a-pdf/20611
Im using a rockettheme template and have edited some of the css code using a custom css file.
I have managed to get it how I want it to look on Firefox and Chrome however IE looks werid. the navigation is too low (the buttons) and the header is also too low.
The website link is found below.
http://www.colmanprint.co.nz/rfloorings/
as you can see on the link the menubar is down too low and the header.
at the moment im using a css code edit .rt-menubar {padding: 0px !important; margin-left:210px;} when i remove the margin-left:210px; it fixes my problem but then the menu goes behind the logo on chrome and firefox.
so i pretty much need to keep the margin-left:210px for chrome and firefox but have margin-left:0px for internet explorer
any ideas would be great!
For versions of Internet Explorer up to IE9, you could use conditional comments to differentiate between IE and other browsers.
Here's a quick example:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie9-and-below.css" />
<![endif]-->
Then in ie9-and-below.css you could apply a style such as:
#ieParagraph.rt-menubar {
margin-left:0px;
}
Where your HTML could look like so:
<div class="rt-menubar" id="ieParagraph">
<ul>Other stuff here...</ul>
</div>
If no styling was applied in your other stylesheets to #ieParagraph where the class was also .rt-menubar , this would only change the left margin of the #ieParagraph div to 0px in IE9 and under only.
For IE10, conditional comments have been removed - look into using Modernizr for feature detection.
I have this code in my main CSS file but when I print preview it isn't hiding the contents.
#media print {
#nav,
#footer,
#flash { display:none; } }
When I add a linked print stylesheet it works as it should.
Any ideas?
Thanks.
What browser are you using? Its probably because the browser doesn't support this way of declaring print styles.
I would advice to stick to the best practice (if you can) and use
<link rel="stylesheet" media="print" href="print.css" type="text/css" />
More info here.
Just make sure you do not have the media="screen" attribute in your link to your stylesheet. That will cause it not to apply when printing.
either add 'print' to the attribute media="screen, print" or leave the attribute off completely
see http://lawrencenaman.com/optimisation/print-media-queries-not-working/
"The browser support for media queries is surprisingly decent. For the queries in this particular demo (utilizing min and max widths), current version of Firefox, Safari (including Mobile), Chrome, and Opera are all supporting it. Internet Explorer 9 will be supporting it, but 8 and below do not. If I wanted to deliver the best possible experience in IE 8 and below, I'd either fake it with JavaScript like I did in this article, or use an IE specific stylesheet and style it in the same style as the most common browser width according to analytics.
Note that milage may vary on individual types of queries. For example, the iPhone supports the width queries but does not support the orientation queries. The iPad supports both."
-- excerpted from http://css-tricks.com/css-media-queries/
I'm using the art sexy lightbox for my pictures presentation and also for html content in joomla. I'm using the Chrome and it works fine and displays everything as it should. The problem starts when i switch to ie8.
When i click on the image to xpand in the lightbox the image displays in the center of the page while the thole frame of the picture is on the left of the image.
I've tried playing with the artsexylightbox css file but couldnt get it to work in both browsers.
does anyone can say why is the difference? I suspect that the browsers treat the absolute,relative orders differently.
please help:(
You could tr to target WEbkit broswers only in your CSS to separate the behaviours of IE and Chrome (Safari ius a webkit browser too).
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Webkit-specific CSS here (Chrome and Safari)*/
#artsexylightbox {
properties here
}
}
Or you could use Conditional Comments to set up a new CSS stlyesheet for IE:
<!--[if lt IE 9]>
<link href="path-to-file/IE.css" rel="Stylesheet" type="text/css"/>
<![endif]-->
Then use setup the properties that work for IE in the IE CSS, and the properties that work for Chrome/Safari in the normal CSS.
Note that even between FF and Chrome, there are a few differences in how they interpret CSS.
Hope that helps :)