I use <p> tag to display the information and when print preview it, words are split into another page. Is there a way to prevent it? Sample below:
add this to div that contains printable items:
#media print
{
div{
page-break-inside: avoid;
}
}
*Current browser support:
Chrome - 1.0+
Firefox (Gecko) - 19.0+
Internet Explorer - 8.0+
Opera - 7.0+
Safari - 1.3+ (312)
Related
im trying to print a mail that i made in html (school homework), this is my html layout
and this is my print preview
i already tried using #page in css, but it doesnt work
#page :right {
margin: 10.8cm;
#page is not supported in Firefox, but supported in Chrome 2.0+, IE 8.0+, Opera 6.0+ and Safari 5.0+.
#page :first is supported only in IE8+ and Opera 9.2+.
I was making my website using mozilla and chrome and edge as the main resource to see if It was working good dynamically.
But when I opened the IE browser my css, like "transforms" where all formatted in a odd way, the places where they were originally were not the same anymore in IE.
Is there a way to make css do a selection or restrict for each browser, like for chrome It uses "transform" then on IE it would use "right".
I can't use "right" on chrome or it will be desformatted so, I would like to know if there is a special condition.
When writing CSS or JS you'll want to check browser compatibility tables for the features that you use. You can find this on official resource websites such as https://www.w3schools.com/cssref/css3_browsersupport.asp
For transforms in particular, have a look at: https://www.w3schools.com/cssref/css3_pr_transform.asp
You'll either need to use features that are compatible across all the browsers that you wish to support (taking into account their versions) or, as you mentioned, code alternatives by detecting what features are available in your user's browser. A tool such as https://modernizr.com/ can help with that.
use following hacks for browsers specification.
google chrome:
#media screen and (-webkit-min-device-pixel-ratio:0)
{
#element { properties:value; }
}
firefox:
#-moz-document url-prefix() {
#element { properties:value; }
}
Opera:
#media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
#element { properties:value; }
}
safari:
#media screen and (-webkit-min-device-pixel-ratio:0) {
#element { properties:value; }
}
Internet Explorer 9 and lower :
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Internet Explorer 10 & 11 :
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
Microsoft Edge 12 :
#supports (-ms-accelerator:true) {
/* IE Edge 12+ CSS styles go here */
}
And for future details and specification see following links W3school & Site Point
I am trying to integrate some non editable zones in my TinyMCE 4. And it works fine. But now I want a cursor to become "not-allowed" over the non editable elements. I set it in css and it all works fine for Chrome and Firefox but not for IE9 the cursor don't change!
Is there a workaround for this problem?
Thanks
You can find a simple exemple here http://fiddle.tinymce.com/iSeaab
IE only supports CUR and ANI as formats from CSS to change cursor.
{
cursor: url('/cursors/customMoveCursor.png'), /* Modern browsers */
url('/cursors/customMoveCursor.cur'), /* Internet Explorer */
move; /* Older browsers */
}
Please look here. or a good link here
Have you tried to edit the CSS for TinyMCE like (tinymce/skins/lightgray/skin.min.css)
add what you need. Example:
.mce-grid td.mce-grid-cell div[disabled]
{
cursor:not-allowed
}
I still recommend using .cur file for IE.
The input browse button should come as with space on IE11 as it comes in IE8.
See the below images so that you can have a clear idea on my issue.
On IE11, it is coming like this, i mean this is wrong.
On IE8, it is coming like this, i mean this is right.
So, i need the same button should come with space in IE 11, Any help?
Every browser uses its own styling for <input type="file"/> and it's usually better to just accept that and use the default as there is no standard-compliant solution for styling the upload button (at the moment).
However, if you insist on adding the space, you can use the non-standard ::-ms-browse selector for targetting the Browse button on the latest IEs.
For example:
::-ms-browse {
margin-left: 5px;
}
(You can use ::-ms-value for styling the input field part.)
Please have a look at this question: How to remove default file input style on IE10?
You can't achive changes in IE10 and greater with conditional comments because they were deleted in 10 and 11.
The new workaround is with media queries in css:
Use:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
input (or whatever your selector is) {
/* your css here */
}
}
For further information regarding css-hacks for IE10 and greater: http://www.impressivewebs.com/ie10-css-hacks/
Its a default browser property so we can't do this
See this fiddle http://jsfiddle.net/GEQxj/1/
I have tried several suggestions like
float:none;
overflow:visible;
display:block;
break-before: always;
What i want to accomplish - is the table with the child class to be to be printed in a landscape fashion. The rotation works across all browsers. However the page-break-before only works in ie8 at the moment. Does not work in latest versions of FF Chrome and Safari.
This page is generated from another page for the sole purpose of being printed so no need for #media print.
Try adding this:
margin-top:280px;
margin-left:-230px;
It looks good in chrome and firefox http://jsfiddle.net/GEQxj/23/
You can target just webkit browsers and firefox with this:
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome CSS here */
}
#-moz-document url-prefix() {
/* Firefox CSS here */
}