I inserted <style type="text/css"> #page {size: landscape;}</style> in my page to print it by landscape (this page is created only for printing).
It displays as what I want in Chrome's printing preview. However, after I print it to both paper or PDF, the result is really weird. The content is landscape, but page is portrait, so I've got a big white space in the top and bottom of the page and the right side part of content is out of page edge.
My guess is that for some reason the printer doesn't know it is supported to go landscape way. I've tried several printers, and all of them have this issue.
I appreciate if you could give me any advice or potential solution.
The #page { size: tag is CSS3 and as far as I know CSS3 is still not an accepted standard so many of the new tags are not yet supported by any browser. Specifically this tag is not yet supported by most browsers as of Sept. 12, 2012.
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Grammar_and_rules
The above URL claims IE8 and above support it but I have had no luck using it so far.
Related
I have an HTML page with a data table and a morris graph apart from some h4 titles.
When I call JavaScript window.print(), Chrome and Safari print correctly, using the CSS and #page for the paper size.
Firefox doesn't use the CSS, just #page for the size, which is landscape as I set it up.
Edge doesn't use the #page or the CSS.
Can someone shed some light?
I am working on a web page, that has to be 100% high. I did it so, it works fine everywhere, except on Android Firefox.
The problem is:
When I open the page for first time, in landscape mode - the address bar overlaps the content.
If I do orientation change - it gets OK in portrait mode, and when I go back to landscape mode - it's OK there too. The problem appears only in landscape mode, before any (eventual) orientation change.
Tried many things, mostly some scrollTo() solutions, but nothing worked.
Thanks in advance.
I believe this is just how the Firefox app works. You could state in your (CSS) style sheet a 10 to 15 pixel "margin-top" for the body. This would create a black space at the top of the page. You could just adjust that height accordingly.
You could also try to check for that browser with a javascript and specify a new CSS with the "margin-top" adjustment if you didn't want it to adjust except on the Firefox app.
This is a wordpress issue, but I'm simply trying to fix the CSS and I'm not sure where to go. I'm using duotive-5 as my theme, I don't think this started happening til today, so I think it's something I changed, or it happened from updating to wordpress 3.6.
If you view our site on firefox, half of the slideshow is cut off until the browser is resized. You can see this at http://www.dominicandestination.com, and you can see it happen in the latest version of Firefox.
I'm not sure why the browser renders the slideshow weird until the browser is resized. It's hard to examine the CSS because it doesn't do it with chrome, and with firefox, after starting the inspector, the browser resizes a bit and the slideshow is displayed normally. Any thoughts as to why this is happening?
Try this:
Add height:100% to your .dt-fullwidth-wrapper
Add width:100%; and height:auto; to your .dt-fullwidth-wrapper .images-li.center a:link imgr
Currently I am using FireFox latest version and IE8
To change the orientation of printing , I used
#page {
size: portrait;
}
in my css file.
#page reference
Although it claims that the #page is supported in both browsers , after my testing it is not working at all besides Chrome. I would like to know how to print the page in different orientation in FireFox / IE8.
No application should depend on this feature to work cross browser right now because the CSS3 standard on page orientation for printing is still under implementation in most browsers.
For Google Chrome it works just fine: http://dev.activisual.net/test.html
Ultimately the decision of changing the orientation relays on the user during the printing process (even if it works), so you could simply let the users know that they should print the page in landscape or portrait, but in general there won´t ever by a way to prevent the users from changing the orientation while printing on desktop browsers.
Here is a bug report for FF reported very recently:
https://bugzilla.mozilla.org/show_bug.cgi?id=851441
You can read the accepted answer on this question for reference:
Landscape printing from HTML
As the MDN reference says:
You can only change the margins, orphans, widows, and page breaks of
the document. Attempts to change any other CSS properties will be
ignored.
As far as supplying you with markup that achieves what you want, that would be outside the bounds of what's allowed on SO. In addition, it could be a bit of work since you are wanting a two generation back version of IE to attempt to perform as well as a current generation Firefox.
Page printing layout is portrait by default, to change to landscape and see the difference try the below.
The the below css code is supported since version 19.0 , try it, it should solve your problem:
For IE8 you should use HTML5 directive in your html
<!doctype html>
Css code :
#media print{#page {size: landscape}}
Firefox: https://developer.mozilla.org/en-US/docs/Mozilla_CSS_support_chart
IE http://msdn.microsoft.com/en-us/library/hh781508(v=vs.85).aspx
It's weird that this
{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
doesn't work for you for the latest version of Firefox as i tested it myself and works fine.
If you can't find anything have a look here even though this isn't exactly the right portrait mode (for printing) but you might get some ideas.
Lastly if you get desperate and u really need to find a way to do this, you can always take a screenshot of the web page with for example html2canvas rotate the image and then print the image instead of the webpage...
Not an ideal solution but this way you bypass the browser.
I ran into this issue a little wile ago while making a simple form.
Chrome does seem to be the best browser for limiting a users control over the printing process. However it is still limited, and Firefox/other browsers don't support #page.
My solution was to add a #media print to the style sheet to "encourage" the user to print the page in portrait. The #page is just for chrome. display: none; on the header, nav, and footer gets rid of the unwanted browser additions (this only works in chrome and firefox, in ie you still have to select no headers) I have a border:0; on input fields, because it was for a form...
Finally I put a width and height on the container div, similar to the size of a standard 8.5 x 11 piece of paper. So it would fit the page nicely.
#media print{
#page {size: auto; margin: auto;}
header nav, footer {display: none;}
input {border: 0px;}
#container {width:9.1in; height:10in;}
}
Ultimately webpage printing is still very browser/user dependent, and there really isn't much that can be done about it. Making #media print helps, but really the only way to get the page to print exactly as you want would be to generate a pdf version of the page that the user could export.
Just go to file, click on page setup and change the orientation. This works for me
galleria javascript crops top and base of images when viewing in Firefox Chrome and IE
However in Safari this issue does not exist.
Please see the issue here
http://galleria.aino.se/media/galleria/src/themes/fullscreen/fullscreen-demo.html
no compare the squirrel image with its original
right click on any image and you will see how the script is not displaying the the full image.
We are using galleria. js full screen for a wordpress theme and all our images are the same size so there is no height issue the images we will use are 1600x900
If any one can help please advise. We need to display the entire image.
Thanks all.
I believe that's how galleria is supposed to behave. In full screen mode it fills the screen, so it will crop the top or sides, whichever extends beyond the aspect ratio of the browser window.
In full-screen mode, if you have a wide browser window, it'll crop the top/bottom. If you resize the browser window to portrait orientation, it'll crop the left/right.
You can control this behavior using the image_crop option.
F.ex if you want the image to always fit, set this to false.
Try to set in your css:
.galleria-image img {max-width:6000px !important;}
this works for me, I think there is some trouble in Safari with the attribute max-width of the image. You could use this simple trick or improve this technique adding some conditional css, so for example setting max-width to a specific value only when option "imageCrop" of galleria is set to true. Let me know if this works also for you!