1

I'm using a simple technique to prevent FOUC on my page. I have a "feedback" sliding button on my page that's initially set with display:none in my stylesheet. Later, when JS is loaded and the sliding code is loaded, i apply .css('display', 'block') with jQuery. That works perfectly.

However, when someone prints the page, my sliding button and it's content are shown in the print version, even though i'm declaring display:none for the DIV inside the print.css. How can i fix this?

user620240
  • 13
  • 2
  • has ur print.css have a @print{} line anywhere ? or perhaps the `link` tag has a `media="print"` attribute? – Val Feb 28 '11 at 14:42
  • Well, can you show the bit of CSS that should be making the element "display: none" in the print stylesheet? That stuff does actually work, but not when there are errors :-) – Pointy Feb 28 '11 at 14:45
  • @Pointy: user620240 applies css('display', 'block') with jQuery which overrides the display: none in CSS. !important in the print style should do the trick. – rsp Feb 28 '11 at 14:59
  • OK well using "!important" is kind-of a hack, so if it causes other problems I'd suggest not applying "display: block" directly. Instead, add a class name to the `` tag (or something) and use CSS to make the element visible when the class name is there. Then you can just leave out that bit from the print CSS. – Pointy Feb 28 '11 at 15:06

1 Answers1

1

Maybe use:

display: none !important;

in your print style.

rsp
  • 107,747
  • 29
  • 201
  • 177
  • thats, not cross browser friendly :) – Val Feb 28 '11 at 14:43
  • @Val ?? every browser I know of understands the "!important" qualifier. – Pointy Feb 28 '11 at 14:44
  • 1
    !important is defined in the [CSS1 spec](http://www.w3.org/TR/REC-CSS1/#important) from 1996 – rsp Feb 28 '11 at 14:46
  • I have had problems with it, in a browser can't remember which one, probably ie6, either way !important is stupid because it will override even the style="display:block;" not to mention any jquery, javascript etc... if u want it to be !important then use the style attribute is my advise – Val Feb 28 '11 at 14:53
  • @Val: That's the whole point - to override style that is set using jQuery. Read the question. Besides !important in CSS overrides style="display:block;" but not style="display:block !important;" See the spec. – rsp Feb 28 '11 at 14:56
  • Best practices really don't help in these situations. – user620240 Feb 28 '11 at 15:03
  • look all im saying is that !important is not used and neither recommended tell me last time you used it? it's not clean and can take along time to debug where in the file that is especially if you use it in style="" attr and not to mention with php or asp mixed together, it will take you a long while before you remember the !important qualifier – Val Feb 28 '11 at 15:05
  • @Val: When was the last time I used it? Well, about 28 mins ago, according to Stack Overflow, when I helped user620240 solve the problem. ;) – rsp Feb 28 '11 at 15:08