I have to use two different headers in the print version: one for the first page and one for the other pages. I would like to put a header (fixed on the top) for the other pages and use the css display: none for the first page. But I have not any effect with #page :first.
This is my code:
#page :first {
.header {
display: none;
}
}
I tried also putting !important in the css but nothing happens.
What should I do?
:first allows only few CSS properties. You can only change margins, page breaks and windows with it.Other CSS properties will be ignored. So i assume display:none may not work.
Though you can refer more about how to use #page and with what type of CSS properties it works.
https://developer.mozilla.org/en/docs/Web/CSS/:first
According to: https://developer.mozilla.org/en/docs/Web/CSS/#page
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.
And also for the :first https://developer.mozilla.org/en-US/docs/Web/CSS/:first
Note: you cannot change all CSS properties with :first. You can only
change the margins, orphans, widows, and page breaks of the document.
All other CSS properties will be ignored.
So since you're trying to remove one of your own elements - try using media queries instead:
#media print {
.header { display: none; }
}
https://benfrain.com/create-print-styles-using-css3-media-queries/
It looks like it's a Mozilla bug.
I am not able to get margins working, even when following their own example here:
https://developer.mozilla.org/en-US/docs/Web/CSS/:first
Both pages are printed in an identical way, no difference.
Related
So I am making a document with html and css for printing, when I try to select a specific page of the entire document with:
#page :nth(5) {
background-color: aqua;
}
it doesn't select the page (in this example the background color)
What I want to achieve is to select specific pages of a entire document.
Please refer to the documentation (or for the spec, here). regarding the use of the #page rule:
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 you can see, changing the background-color property will be ignored.
I need to create print version of website, and as I mention in title I need to display site logo just on first page. For example, if I print home page, and I get 5 pages, logo should be displayed just on first page.
is it possible with #media print ?
What I've tried so far but does not work
#media print {
#top-menu,
#main-navigation-sticky-wrapper,
#action-bar,
.teaser-cda,
.pre-footer,
.footer,
.post-footer,
.header .logo {
display: none;
}
#page:first {
.header .logo { display:block }
}
The correct syntax (according to MDN) for first page is:
#page :first {
/* .... */
}
You don't have a space between the two components. Be wary, however, as compatibility for #page :first is not well-defined.
It might not even be necessary though. I don't think block-level elements get repeated on every page, so you might just need to ensure that the logo is displayed in #media print { ... }.
You will also want to check the element and it's container elements to ensure that none of them have position: fixed as that may also cause the element to repeat on each printed page.
#page rule is a CSS at-rule used to modify different aspects of a printed page property. It targets and modifies only the page's dimensions, page orientation, and margins.
It can't have css class inside.
#page :first {...} it just allows you to add these previous styles on the first page but you can't also add a class inside.
I have a situation where a multiple select is somehow getting it's width via javascript dynamically but I can't seem to find where. I have nothing in my CSS that specifies a width of 411 px.
Website of Problem here
The width of the sidebar is the same always so I tried the following CSS and it is ignored? Am I missing some syntax? I've tried both of these and they do not work:
#widget-wrap .chosen-container-multi {width:200px !important;}
and
.widget-wrap .chosen-container-multi {width:200px !important;}
the control misbehaving is ul.chosen-choice so please set css as follows:
ul.chosen-choice {width:200px !important;}
There seems to be some inline styles declared in the widget template itself, rather than generated with JS.
Ideally you should remove the inline style from the template; otherwise this CSS will work just fine:
.chosen-container {
width:123px !important;
}
I can't see why your existing CSS wouldn't work other than it simply not being uploaded.
I want to give some space to top of every page which is applied in only in printing mode.
is it possible or not..?
I am using:
#page { margin-top : 30px; }
But it doesn't get applied..
Are there any other methods available in css..?
You can do the following way.
#media print
{
body {margin-top:30px;}
}
This will select and target only the print related CSS changes. Hope this helps.
*PS: I have taken Body element, but if you want, you can target specific wrapper that is part of your HTML and you can target it specifically only if you want that wrapper to start from top with certain spacing. You have the solution with logic. Use it to match your scenarios.*
I need a simple <hr/> in a page that extends a default one (I'm using Django template framework); in this default page, a standard and untouchable stylesheet styles HR with border:none; height:1px but I would like to reset these styles to their default values.
I tried putting {border:1px inset; height:auto;} in my page but I didn't get the same aspect as having no style at all.
Is there a method to restore the default style for a tag?
In order to make your rule apply, you'll need to ensure that you give your rule a greater specificity than the existing rule in order to override it.
For example, if the rule is this:
hr {
/* rules */
}
Then you would need to do something like this:
html hr {
/* your rules */
}
Scores are calculated by these basic rules:
elements, like div are worth one point
classes, like .comment are worth 10 points
ids, like #user123 are worth 100 points
The total score for the selector is the sum of all of its parts, so div.class is worth 11 (10 for the .class and 1 for div
(It's actually a bit more complicated than this - see this article for details - but this explanation works as a general rule)
Edit:
I just saw your comment about not knowing the defaults.
According to Firebug, an hr appears to look like this:
hr {
height: 0;
width: 100%;
border: 1px solid #808080;
margin: 8px 0;
}
You can use the tools provided in other browsers to see if they use a different set of styles, then decide for yourself which ones would be the best ones to use.
Try YUI 2 Base CSS, seems to be doing what you want. Or even YUI 3 Base CSS
There is a possibility to "restore" default styles only for a certain context
Update
Just checked - Base CSS does not include styles for hr element
The default stylesheet for HTML documents, without any overrides, is defined by the W3C. You can find the full default stylesheet here: http://www.w3.org/TR/CSS2/sample.html
Alternatively, you could use Firebug in Firefox (or any similar tool) to view the styles of an <hr /> element on a test page without any styles applied.
Sure, you need to give your styles a bigger weight; add an id to your < hr/>, or do this in CSS:
html body hr { ... your styles ... }
No. You either have to not apply the styles in the first place, or override every broken style with explicit values.
You can also give your styles more weight with the !important property. If the original is like this:
.someClass { color: red }
You can override it with this:
.someClass { color: green !important}