I have a few divs with text that have display:none set. While on the screen I have a functionality that changes it to display:block when I click other elements.
<div class="hiddenText" style="display:none">My hidden text</div>
I need to print the page and show all text. I added css file for print and specified display for hidden text
#media print {
.hiddenText {
display: block
}
}
All styles for printed version of the document work great, except this. What is the best way to make it printable?
Your inline styles have precedence over the rules specified elsewhere. To override inline styles you can use the !important keyword to force the rule.
Something like this will probably do the trick:
#media print {
.hiddenText {
display: block !important;
}
}
Even though !important has nothing to do with CSS specificity, MDN has a section in its article on the topic that discuss !important.
When an !important rule is used on a style declaration, this
declaration overrides any other declaration made in the CSS, wherever
it is in the declaration list. Although, !important has nothing to do
with specificity.
Instead of #media print try putting your print styles in something like this, <LINK REL="stylesheet" TYPE="text/css" MEDIA="print" HREF="foo.css">
Related
My parent page is using custom1.css and child page is using custom2.css. My issue is child page css properties are override by parent page css. How can I block parent page css acting on the child page elemenets.
CSS styles are apply as the order those are in. Check this example, first style override by the second and final width of div will be 40px.
div{
width:300px;
}
div{
width:40px;
}
linking style sheets also the same.
<link rel="stylesheet" type="text/css" href="style_1.css">
<link rel="stylesheet" type="text/css" href="style_2.css">
Here style_2.css override the same styles in style_1.css because it links secondly.
So what you have to do is, style sheet you need to apply link lastly.
Css is applied using levels.
So just adding a container around everything shoudl prevent it
You can do:
.class1 #content{ make it blue here }
.class2 #content{ make it red here }
Doing it by file is not possible.
You should make sure that never happends, this can yield unexpected results
How can i block parent page css acting on the child page elemenets?
By removing the custom1.css reference from the <head> of the child page.
If, for some reason, you cannot do that, then you need to read about css specificity in order to understand how the "parent css" is overriding rules in the "child css".
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
You could either add !important; after your css styles (which is a bad example) or you could make some more specific selectors.
body div#main{
/* Style */
}
The above is more specific and will "win" over the following:
div#main{
/* Style */
}
On you your child page please check that you CSS order should be in correct way if you are using both CSS files
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="custom1.css">
<link rel="stylesheet" href="custom2.css">
</head>
so that cascading will work in correct way as per your expectation
also there are other things that you need to check like CSS Specificity, Inheritance, and the Cascade. You may like to check http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ this
Hope it helps!
I have a DIV with a background image. I want the image to display on the screen (which works already) but I do NOT want that image to print when the page is printed. Is there a way in CSS to accomplish this?
You can add a print stylesheet that removes the image for printing purposes...
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Inside the print stylesheet, you just use normal CSS, which will only apply when printing, for example...
.myStyle {
background-image:none;
}
I think media queries will helpful for you
#media print
{
div.test {background:none;}
}
You can use a media query
#media print {
#yourDiv { background-image:none; }
}
OR load a print specific style sheet where you overwrite the background.
If you need to target IE 8 or earlier, favour the print stylesheet approach, as these browsers don't support media queries.
I have been advised that said CSS page-break-inside:avoid; would prevent elements being printed between 2 pages.
On this directions print out this simply does not work on all tested browsers so far. The CSS .instruction has this applied yet prints across pages.
Example: http://www.golfbrowser.com/A4/directions.php?start=PARIS&end=SL42ES
Any ideas?
The page-break-inside property is only supported by Opera.
http://www.w3schools.com/cssref/pr_print_pagebi.asp
Just add a print stylesheet or use a media query and a breaking div or just add the style to the elements in your html that need braking when printing.
Try adding this after every long block of content that you think needs breaking:
<div class="break"> </div>
And as for your css just add this:
.break {
display:none;
} //place inside your regular stylesheet file
#media print {
.break {
display:block;
page-break-after:always
}
}
This method works in most modern browsers, including IE8+.
I am using Joomla 1.5.
i am having a page where a cSS has been added for the title
which is in <strong></strong>
I firebug it , it appears as
element.style {
color:#666666;
}
i dont know of from where it comes from..
but i am having a css applied for the same tag with other color. but it disappeared.
How to remove the element.style globally..
It is possible to override inline styles from an external stylesheet
strong[style] { color: blue !important; }
This works in most major browsers, Chrome, Safari, Firefox, IE8
It doesn't work (to my knowledge) in IE6 / IE7
Hope this helps.
This code comes from HTML and not from your CSS.
This HTML with generate your element.style:
<strong style="color:#666666;">Just text</strong>
Element.style, as the name says, its the style defined on element and there is no way to override it. If you do not want that color in that element you must remove/change it on html.
It seems it is not always set in HTML. In My case the element.style is empty:
element.style {
}
It is not set in any css and it is not set in any html source.
I dont't know where else I should look.
Inline styles are generated from HTML or (more often these days) javascript applying styles after the page had loaded.
Jquery is often a culprit of this, performing animations using css applied directly on the element that overrides your stylesheet.
For instance you may show, then hide a div, leaving a 'display:none' on the element that overrides any naturally cascading CSS that precedes it. This comes up often when you are mixing CSS transitions and media queries with javascript.
Check your JavaScript for any instances of applied styles.
Try using a callback function on the animation to clear styles:
$(this).css( "display", "" );
I'm trying to show a print-preview div (#preview in examples). Is there a way to use print.css only for a particular div and its children overriding all local definitions?
Essentially, I would like to be able to do something similar to:
#preview element {
definition equal to definition of an element in print.css
}
in main.css, but for a long list of definitions. It's not too DRY and following option is more coherent.
Second approach would be to include print.css into the main document and change each definition from
element {
definition
}
to:
element, #preview element {
definition
}
But that seems to me a bit cumbersome.
What would be the best way to solve this problem?
Update just to give an example:
in the main document I have red underlined links, they should be blue undecorated in print version. So when content of preview is dynamically formed, I pop up div where all links should be blue undecorated. But only in that particular div (#preview), in the rest of the document they still would be red and underlined.
Maybe making the div an iframe that holds a different page styled by the print.css
Alternately you could set the media on print.css tag to be "print" but during print preview you could have a script change the media to "all".
Maybe I still haven't grasped your question, but it seems you should be able to do this by simply linking the print.css stylesheet after your main stylesheet, and prefixing all the selectors in print.css with "#preview ".
In the links example, you would need to specify a style like:
#preview a, #preview a:link
{
text-decoration:none;
color:blue;
}
This should be pretty simple unless you are dynamically creating the print.css file.
<link rel="stylesheet" href="/main.css" type="text/css">
<link rel="stylesheet" href="/print.css" type="text/css">
</head>
<body>
<div id="main">
content
</div>
main.css:
selector1 {style}
selector2 {style}
and so on
print.css:
#print selector1 {style}
#print selector2 {style}
and so on
Then, when you generate your print preview, just change (via JavaScript or whatever) the id of your main wrapper from "main" to "print".
As I recall, a more specific CSS declaration will always override a less specific declaration, unless the less specific one is marked as important.
So... #preview element { } will always override element { }
Add this to your stylesheet:
#media print {
#preview a:link {
color:blue;
}
}