My company is using a print.css for printing. Also, we have another style.css that overrides any other .css files including print.css. For some reason, IE8 and IE9 are printing blank pages when the #media print query from html5 boilerplate (which is in the override file) is on. When it's commented out, there are no problems. What is the issue here? We would like to leave in the #media print from boilerplate.
PRINT.CSS
#media print
{
body *
{
visibility:hidden;
}
#basicShell #main,
#basicShell #main *,
.basicShell_container .content,
.basicShell_container .content *,
#mainShell_container .center_columnContent,
#mainShell_container .center_columnContent *
{
visibility:visible;
}
#basicShell #main,
.basicShell_container .content,
#mainShell_container .center_columnContent
{
position:absolute;
left:0;
top:0;
}
}
STYLE.CSS (overrides everything)
#media print {
* { background: transparent !important; color: black !important; text-shadow: none
!important; filter:none !important; -ms-filter: none !important; float: none
!important;} /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /*
Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
#page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
I ran into the same issue with the HTML5 Boilerplate.
In my case, it turned out to be this line:
tr { page-break-inside: avoid; }
that caused the blank pages in IE8/9. The page had a large amount of content in a tag (more than one page's worth), and IE decided to handle it by skipping a page and cutting off the content. Yuck.
To avoid messing with the HTML5 Boilerplate, I added the following to my own stylesheet, and problem solved:
tr { page-break-inside: auto; }
Your issue may be due to a different tag, so check anything that sets the page-break-inside property.
The first rule in print.css makes all subelements of body invisible. The intent appears to be to turn some elements to visible, but apparently this fails, perhaps because the markup (which was not disclosed) does not use id and class attributes in the intended way.
You have to take into account the precedence of the stylesheets being loaded in your site. Currently you have this stated on the print.css stylesheet:
body * {
visibility:hidden;
}
That rule basically hides "everything" inside the document. You mentioned that the styles.css stylesheet is supposed to override everything, but in what order are the stylesheets being loaded in your header? If the print.css sheet is after the style.css sheet then the rules of the first with be taken into place.
There is also the case of the media types included in your link reference, which i don't know which has better precedence; the link media type, or media query.
Related
I made a bootstrap table where I get information to fill up from a stored procedure with some indication where some text are in color or even background.
The trouble is when I want to print, there isn't any color. I can make a file print.css where I'll tell the background color for header and title, but how about the table when i don't even know what will be inside depending of the stored procedure? And more, the table isn't separated well between each pages where it cut my table or words.
This is what I've done until now from my page print.css where I use already td or th for the table :
.table tr {
page-break-after: always;
}
#media print {
#page {
size: letter;
margin: 1cm;
}
}
body{
-webkit-print-color-adjust:exact;
}
.panel-heading {
background-color: #54A0EB !important;
}
.panel-title {
color: #FFFFFF !important;
font-weight: bold !important;
}
#media print {
.table td,
.table th {
background-color: inherit !important;
}
.table-stripe {
background-color: #dedede !important;
}
}
Thank you for your help, really appreciate it!
My css bootstrap was double that's why i can't see color. Everything is fine now.
As mentioned here it's possible to set properties based on e.g a class on a parent element.
I've tried it a while without luck to specify the color of a paragraph based on the sections background containing the paragraph to have all style definitions in the file for that paragraph to keep it atomic.
If I looked into the compiled CSS and saw something happens. I guess my filestructure broke things here because I created a lot of files and included them on the levels where these were needed.
Here's what I did:
// Main.scss
html{
body{
#wrapper{
#import "areas/section";
}
}
}
// _section.scss
section{
width:100%;
height:100%;
&.black{
background-color:#000;
}
&.white{
background-color:#fff;
}
#import "paragraph";
}
// paragraph.scss
p{
section.black &{
color:#fff;
}
section.white &{
color:#000;
}
}
And the generated outout looks like this:
section.white html body div#wrapper section p {
color: #000;
}
And I expect an output like this:
html body div#wrapper section.white p {
color: #000;
}
Is that possible or is my interpretation completely wrong?
The parent selector isn't a reference to the next level up, but the entire composed selector after all imports/extends/mixin calls are resolved.
.one {
.two {
.three & {
color: red;
}
}
}
The output will be this:
.three .one .two {
color: red;
}
In this example, & is equal to .one .two, not .two. It doesn't matter what method you use to nest your rules (extending, importing, or using mixins), the result is still the same.
I'm attempting to use some media queries for a website I'm building. The problem I'm having however, is while the media query styles are actually being applied, they're being overridden. I can't for the life of me tell why because I'm using the same exact selectors. Can anyone point out something that I'm not seeing?
ORIGINAL CSS
#global-wrapper-outer > #global-wrapper-inner {
width: 85%;
height: 100%;
margin: 0 auto;
position: relative;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
background: #fff;
padding-bottom: 20px;
box-shadow: 0 4px 2px -2px gray;
}
MEDIA QUERY CSS
#media screen and (max-width:1024px) {
#global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
The second media query is working fine, where I set the nav to have a display of none. However, when I try to set the width of #global-wrapper-inner to 100% it doesn't apply. I can see the style being "applied" when I press F12 and select that element. However, the style itself is crossed out and not actually applied and it still has the original width of 85%.
The selectors in your original CSS have the same specificity as the selectors within your media queries (the first declarations are also targeting the same property - width) and because the media query rule set is being overridden I'm going to assume that it appears before the original rule set.
The second media query selector works because it's targeting a property that wasn't set in your original CSS, so specificity isn't relevant.
To have the first media query selector take precedence, prepend an ancestor element to it:
#media screen and (max-width:1024px) {
body #global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
You need to link the media query file (queries.css) later than the normal css file (style.css). That way the rules in the queries.css will override those in style.css.
I have been at least 2 hours trying to find the override CSS problem till I found that my line comments where wrong... And the second definition of CSS wasn't working:
So, don't be so stupid as I !:
/* LITTLE SCREENS */
#media screen and (max-width: 990px) {
... whatever ...
}
/* BIG SCREENS */
#media screen and (min-width: 990px) {
... whatever more ...
}
never use: Double bar as I did:
// This is not a comment in CSS!
/* This is a comment in CSS! */
Here is the answer. (at least what worked for me)
I've had this problem before, and it took me a while to realize what I did, but once I figured it out it's actually pretty easy.
Ok so imagine I have this as the html
<main>
<div class = "child1"> </div>
<div class = "child2"> </div>
</main>
and then this as the CSS
main .child1{
height: 50px;
}
/* now let's try to use media quaries */
#media only screen and (max-width: 768px) {
.child1{
width: 75%;
}
}
The code above won't affect the .child. Just like someone mentioned above, the main .child1 overrides .child1. So the way you make it work is to select the element just like we did at the very beginning of the CSS above.
/* this will work */
#media only screen and (max-width: 768px) {
main .child1{
width: 75%;
}
}
So as a conclusion... select the elements the same way every time.
Meaning ... for example in the above code, in your CSS, you should either select it as main .child1throughout the whole CSS or .child1 or else they get mixed up, one ends up overriding the other.
From the code you submitted, this probably won't resolve your issue. However, in your CSS if you are nesting styles inside of one another:
.main-container {
.main {
background: blue;
}
}
A media query for .main won't work because of the nesting. Take .main out of .main-container and then the media query will work as assumed:
.main-container {
}
.main {
background: blue;
}
Check if your media query braces are equal.
Sometimes it is very subtle but when you miss a single brace the rest of the media queries mentioned for certain break points will not work
example:
#media(min-width: 768px) and (max-width: 991px){
#media (max-width: 767px){
.navbar-brand p {
font-size: .6em;
margin-top: 12px;}
.navbar-brand img {height: 20px;}
#collapsable-nav a {
font-size: 1.2em;
}
#collapsable-nav a span {
font-size: 1.2em;}
}
Here you can see i have started the braces for max-width:991px but forgot to end so the next set of codes in media query for max-width:767px will not work.
It is a very simple mistake but took hours because of lot of braces in the codes.
Hope it helps. Happy Coding!
What about using !important? If you range your media query from ( min-width: 176px ) and ( max-width: 736px ) or even up to 980px?
There can be some reasons because of which this type of error may occur.
I myself faced this issue where I was not able to understand what I am needed to do and was confused that, does media query just overrides the elements.
Here's what I understood:
MEDIA QUERY CSS:
#media screen and (max-width:1024px) {
#global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
here you were able to override #global-wrapper-inner > nav i.e., 2nd media query selector, by display: none;
because you never added the display line in the original css, because of which there was nothing to override you just have given that display type should be none.
Whereas just in the 1st media query selector you already had given width:80%;
Basically media query doesn't override as far as I have understood but it take precedence, like already explained by one of them
by which media query comes to work:
https://stackoverflow.com/a/19038303/15394464
also if still did not get your doubt clear, https://www.youtube.com/watch?v=acqN6atXVAE&t=288s
then this might help.
I am trying to print a part of my entire html document. I am using the below css to do that.
#media print { body * {
visibility: hidden;
}
#print-area * {
visibility: visible;
}}
It is working but as visibility:hidden reserves the space, it is printing a blank page and my content. I was trying to use :not selector from css3 to set all other divs but "print-area" to display:none as below,
div:not(#print-area){ display:none; }
This will result into a print of blank page. Looks like :not selector is not working with media print. Any suggestions/solutions for this will be most welcome.
Thanks
visibility: hidden; holds the space and it is hidden only. Show use display: none; to your body.
#media print { #wrapper {
visibility/: hidden;
display: none;
}
#print-area {
visibility/: visible;
display: block;
}}
Edit you should also declare for screen
#media screen { #wrapper {
display: block;
}
use this :
:not(#print-area){ display:none; }
Change the style rule for print media to be
:not(#print-area){ display:none !important; }
It's likely that any standard css reset in play on the page is outranking this style rule.
I have this form, which i print in order to do my work.
Now, the issue is, in the portrait mode, it gets minimized, i mean it looks small, like half of the page of an A4 Letter, while in landscape mode it looks just fine.
Here is my media print css:
#media print {
textarea{
border:none;
}
textarea#difekti {
padding-bottom:40px;
border:none;
}
#menu-home { display:none }
#status-print { display:none }
#submit-f {display:none};
#MainContent {
display: block;
}
#tab1 table, td, th {
border: 1px solid red;
}
#tab1 thead {
float: left;
}
#tab1 thead th {
display: block;
background: yellow;
}
#tab1 tbody {
float: right;
}
#programi {
display:none;
}
#kursor {
display:none;
}
#adresa { }
* {position:static !important;}
}
Any suggestion?
Besides, i have issues with IE too.
Can i create an additional media print for IE?
Thanks
You should change this to a separate CSS file and link it to your HTML document using media="print" at the bottom most of any CSS link.
<link rel="stylesheet" type="text/css" media="print" href="path/to/your/css" />
This will also help you avoid the issue with IE.
The #page CSS at-rule is used to modify some CSS properties when printing a document. You can't change all CSS properties with #page. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.
#page { size:5.5in 10in; margin: 1cm }
#media print and (orientation: portrait) { styles here }
#media print and (orientation: landscape) { styles here }