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
Related
Chrome
IE Standard mode
if you compare both the pages the IE standard mode is having little bit larger font-weight as compared to the Google chorme.
Open this page in both chrome and IE standard mode
exactly what i am saying is open whatever page you want to ,and compare it in chrome and IE standard mode . The IE standard mode is taking little bit larger css font-weight than chrome
how solve this isssue.,when i want my web page font to be neutral.. means it should take the same font which i have given in css
please give me the solution, thanks in advance
This is not an issue, this is just behavior of each browser how it behave in its different way, why because all browsers are not made of same development(Chrome, IE, FireFox).
Solution: Use reset CSS to avoid difference between browser rendering.
https://www.webpagefx.com/blog/web-design/css-tip-1-resetting-your-styles-with-css-reset/
I tried to compare it on IE11 and chrome but it looks okay on my end but if its really a bother, you can use some css hacks for IE and adjust the font size and font weight.
IE10 and IE11
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.selector { property:value; }
}
My canvas element distorts in Internet Explorer 9 & 10, it's at half of the height it should be.
The canvas should be a responsive 640x480 box with a large red circle, not an oblong ellipse. I'm hoping it would take a css spec fix, but I'm not clear what the css or javascript fix would be.
In ie10 and ie9 it looks like this:
http://s7.postimg.org/4xtb6vjkr/ie10.png
The code and correct display in chrome, firefox, safari and ie11 can be seen here:
http://jsbin.com/vutiqatowo/1/edit?html,css,js,output
This is a backwards compatibility requirement for a project, so wishing for visitors to not use ie10 is not an option for this.
I'm seeing the replace height:auto with height:100% solution all over googled search results, but it is not working on the pages where it is an issue for me.
I found this media query hack for -ms-high-contrast, and that is working for the distorted canvas display. It's not providing a smooth scaling, but it will do for showing the canvas element correctly.
Here is a fiddle example: http://jsfiddle.net/trents_luck/abhbmsd6/
In the fiddle example, the media query hacks can be seen at the bottom of the css, they read something like this:
#media (-ms-high-contrast: active) and (min-width: 100px),
(-ms-high-contrast: none) and (min-width: 100px)
Noticed that when I resize the browser window on this website a heap of space is added to the bottom, just below the footer.
Disabling the Scrollreveal.js cures the problem, but I want to keep the animations.
The bug is noticeable in Chrome / Safari, Firefox seems to work fine.
I've validated the site but still get the error in these browsers, Has anyone any ideas? I can't even Inspect the space thats generated, also Im using foundation 5 for the framework, maybe something I've changed?
There seems to be an issue with the background that is applied in that area:
Try adding the following CSS to your stylesheet:
#media (max-width: 1024px) {
#contact .columns {
z-index: 2;
}
}
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.
I would like to enhance a depth effect by hiding the mouse cursor as it passes over a div, is there a method that will work across all browsers?
Finding something that works across browsers is a pain.
The code below works on Chrome, IE, and Firefox.
IE likes .cur files, Chrome likes the embedded png, and some browsers actually respect the none :)
#div {
cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjbQg61aAAAADUlEQVQYV2P4//8/IwAI/QL/+TZZdwAAAABJRU5ErkJggg=='),
url(images/blank.cur),
none !important;
}
Looks like:
/* css */
div {
cursor: url(url/to/transparent.gif), auto;
}
should do the trick or:
divEl.style.cursor = 'url(path/to/transparent.gif), auto'; // javascript
But hiding the cursor can annoy visitors immensly.
Addendum: In the examples I wrote .gif files, but you might actually need to convert to .cur or .ani files for better browser support.
Why don't you simply reduce the size of the cursor as it gets closer to the center of the deep field?
You can change the type of cursor you use (pointer, help, crosshair,...) but to hide it... Even if this would be possible in modern browers, older browsers won't support this. Also I can't imagine why you would hide the cursor.
EDIT: in firefox when adding cursor:none; to the body element it hides the cursor untill I go over a link, it's maybe a start.
Using a full transparent picture will not help. (It won't let you do that:()
You should use a 1x1 1% transparent image instead, plus cursor:none.