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+.
Related
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 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)
I am using simple method to target IE only CSS.
<!--[if !IE]><!-->
<body>
<!--<![endif]-->
<!--[if IE]>
<body class="ie">
<![endif]-->
<div class="Out">My test content
</div>
External CSS
.Out{
width:300px;/*Not for IE*/
}
ie. Out{
width:300px; /*only for IE*/
}
But In FF & chrome developer tool I am seeing body get class="ie" which is wrong.class="ie" is only for IE browsers.
There are number article I have referred
Reference:
https://css-tricks.com/snippets/html/add-body-class-just-for-ie/
https://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Detecting IE11 using CSS Capability/Feature Detectionenter link description here
http://www.positioniseverything.net/articles/cc-plus.html .....etc list goes on
I have referred numbers of article but not helping.I think I am missing some things.
I have tried lots of thing from various source and article as I mentioned in my question.
Fortunately what work for me is answer from "SW4" in how-to-write-a-css-hack-for-ie-11
IE 8,9 and 10
.Out {
width:400px\0; /*For IE 8,9 and 10.*/
/* For me above code is also supporting in IE 11 also. However, for IE 10+ browser I have added media query using -ms-high-contrast below*/
width: 300px; /*for other Browsers*/
}
Here’s the technique, which is really rather simple: create a media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles. Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+), it will only be parsed in Internet Explorer 10 and greater.
-ms-high-contrast supports two values: none and active. So to target IE10+ regardless of the property’s setting, use this media query:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
width:400px; /* IE10+ CSS styles go here */
}
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 */
}
In a html page support these browsers Mozilla Firefox14, IE8, Safari5.1.1, Chrome19.
Since to support all these browsers I have to use css hacks in order to maintain the proper alignment of the elements on page.
Below is the css:
For Mozilla Firefox and IE8:
.dis_stats
{
position:absolute;
margin-top:-30px;
margin-left:-190px;
background:#E0E0E0;
width:141px;
height:80px;
_position:relative;
_margin-top:-460px;
_margin-left:115px;
}
For Safari & Chrome:
#media screen and (-webkit-min-device-pixel-ratio:0) {
.dis_stats
{
position:absolute;
background:#E0E0E0;
margin-top:-30px;
margin-left:731px;
width:141;
height:80;
}
}
Now what is happening on Mozilla it is running perfectly. But on IE8 it is applying the properties defined for Safari & Chrome and if I remove any of the Safari & Chrome's property then it will pick the same from intended properties (i.e defined for IE8 & Mozilla).
I am not getting any clue why is this happening. Anyone please suggest what is wrong here?
I recommend trying to work out a version that complies with standards and doesn't need hacks.
But if you must hack, you can consider conditional comments specially for IE 8 with separate stylesheet that fixes its problems:
<!--[if lt IE 8]>
<style type="text/css" src="path/to/ie-only-style.css">
<![endif]-->
This doesn't really explain what's wrong with IE, but can solve some IE-specific problems without using too much time (at cost of maintainability).